/* Core Styles */
:root {
  --primary: #1EBBD7;
  --primaryLight: #1896ac;
  --secondary: #033b73;
  --secondaryLight: #62cfe3;
  --headerColor: black;
  --bodyTextColor: black;
  --bodyTextColorWhite: black;
  --background-color: hsl(193, 54%, 95%);
  /* 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;
  background-color: var(--background-color);
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


*, *: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: 1023px) {
    body.cs-open {
      overflow: hidden;
    }
    #cs-navigation {
      width: 100%;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: sticky;
      padding: 0;
      top: 0;
      z-index: 10000;
      transition: transform .3s;
    }
    #cs-navigation.cs-active:before {
      width: 100%;
      opacity: 1;
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
      opacity: 1;
      transform: scaleX(1);
      transition-delay: .2s;
    }
    #cs-navigation.cs-active .cs-li {
      transform: translateX(0);
      opacity: 1;
    }
    #cs-navigation .cs-top-link {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    #cs-navigation .cs-top-link:nth-of-type(2) {
      display: none;
    }
    #cs-navigation .cs-link-icon {
      width: 1rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-top-social {
      visibility: visible;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      transition: opacity .3s, visibility .3s, height .3s;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-social-icon {
      width: 1.25rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-container {
      width: 100%;
      padding: 1.25rem 1rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
    }
    #cs-navigation .cs-logo {
      width: auto;
      height: 2.5rem;
      margin: 0 auto 0 0;
      padding: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      order: 1;
      z-index: 10;
    }
    #cs-navigation .cs-logo img {
      width: 296px;
      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-nav {
      order: 2;
    }
    #cs-navigation .cs-toggle {
      width: 2.875rem;
      height: 2.875rem;
      margin: 0 0 0 auto;
      background-color: var(--primary);
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform .6s;
    }
    #cs-navigation .cs-toggle.cs-active {
      transform: rotate(180deg);
    }
    #cs-navigation .cs-active .cs-line1 {
      top: 50%;
      transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
      top: 50%;
      transform-origin: center;
      transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    }
    #cs-navigation .cs-active .cs-line3 {
      bottom: 100%;
      opacity: 0;
    }
    #cs-navigation .cs-box {
      /* 24px - 28px */
      width: clamp(1.5rem, 2vw, 1.75rem);
      height: 0.75rem;
      position: relative;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background-color: #FAFBFC;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
      top: 0;
      transform-origin: center;
      transition: transform .5s, top .3S, left .3S;
      animation-duration: .7s;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-direction: normal;
    }
    #cs-navigation .cs-line2 {
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      transition: top .3s, left .3s, transform .5s;
      animation-duration: .7s;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-direction: normal;
    }
    #cs-navigation .cs-line3 {
      bottom: 0;
      transition: bottom .3s, opacity .3s;
    }
    #cs-navigation .cs-ul-wrapper {
      min-width: 70vw;
      height: 100vh;
      opacity: 0;
      background-color: #fff;
      box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
      overflow: hidden;
      position: absolute;
      top: 100%;
      left: auto;
      right: 0;
      z-index: -1;
      transform: scaleX(0);
      transform-origin: top right;
      transition: transform .4s, opacity .3s;
    }
    #cs-navigation .cs-ul {
      margin: 0;
      /* 28px - 40px */
      padding: 3rem clamp(1.75rem, 3vw, 2.5rem) 2rem 4.375rem;
      width: auto;
      min-width: 40%;
      height: 65vh;
      overflow: scroll;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-end;
      gap: 1.25rem;
    }
    #cs-navigation .cs-li {
      text-align: right;
      list-style: none;
      width: 100%;
      margin-right: 0;
      /* transition from these values */
      transform: translateX(-2.5rem);
      opacity: 0;
      transition: transform .6s, opacity .9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
      transition-delay: .05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
      transition-delay: .1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
      transition-delay: .15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
      transition-delay: .2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
      transition-delay: .25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
      transition-delay: .3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
      transition-delay: .35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
      transition-delay: .4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
      transition-delay: .45s;
    }
    #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:before {
      /* active state underline */
      content: '';
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: 1;
      position: absolute;
      display: none;
      bottom: -0.125rem;
      left: 0;
    }
    #cs-navigation .cs-li-link.cs-active {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active:before {
      display: block;
    }
    #cs-navigation .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: white;
      padding: 0 2rem;
      background-color: var(--primary);
      overflow: hidden;
      display: inline-block;
      position: relative;
      z-index: 1;
      background-color: var(--primaryLight);
      border: 2px var(--primary) solid;
      border-radius: 20px;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color .3s;
    }
    #cs-navigation .cs-button-solid:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 0%;
      background: var(--primary);
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width .3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }

    #cs-navigation .cs-button-solid:hover{
      color: #000;
      transition-delay: 10ms;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #cs-navigation .cs-top-link:nth-of-type(2) {
      display: flex;
    }
  }

  /* Dark Mode */
@media only screen and (max-width: 1023px) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-toggle {
    background-color: var(--primary);
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
}
  
  /*-- -------------------------- -->
  <---     Navigation Dropdown    -->
  <--- -------------------------- -*/
  
  /* Mobile - 1023px */
  @media only screen and (max-width: 1023px) {
    #cs-navigation .cs-dropdown {
      position: relative;
      color: var(--bodyTextColorWhite);
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
      height: auto;
      opacity: 1;
      visibility: visible;
      margin: 0.75rem 0 0 0;
      padding: 1.5rem;
      transform: scale(1);
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
      opacity: 1;
    }
    #cs-navigation .cs-dropdown .cs-li-link {
      position: relative;
      transition: opacity .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 {
      height: 0;
      margin: 0;
      padding: 0 1.5rem 0 1.5rem;
      box-sizing: border-box;
      background-color: var(--primary);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.75rem;
      transform: scale(0);
      transform-origin: top right;
      transition: padding .3s, margin .3s, height .3s, opacity .3s, transform .3s, visibility .3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
      text-align: inherit;
    }
    #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 {
      transform: scaleY(1);
      opacity: 1;
      visibility: visible;
    }
    #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: var(--background-color);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
      border-bottom: 5px solid var(--primary);
      /* 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;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .3s, visibility .3s, opacity .3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
      font-size: 1rem;
      text-decoration: none;
      opacity: 0;
      width: 100%;
      height: auto;
      display: block;
      transform: translateY(-0.625rem);
      transition: opacity .6s, transform .6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(1) {
      transition-delay: .05s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(2) {
      transition-delay: .1s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(3) {
      transition-delay: .15s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(4) {
      transition-delay: .2s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(5) {
      transition-delay: .25s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(6) {
      transition-delay: .3s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(7) {
      transition-delay: .35s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(8) {
      transition-delay: .4s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(9) {
      transition-delay: .45s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(10) {
      transition-delay: .5s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(11) {
      transition-delay: .55s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(12) {
      transition-delay: .6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(13) {
      transition-delay: .65s;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      font-size: 1rem;
      white-space: nowrap;
      line-height: 1.5em;
      text-decoration: none;
      width: 100%;
      padding: 0.75rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      color: black;
      display: block;
      transition: color 0.3s, background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--primary);
      background-color: black;
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #cs-navigation .cs-drop-ul {
      background-color: var(--primary);
    }
    body.dark-mode #cs-navigation .cs-drop-icon {
      filter: grayscale(1) brightness(1000%);
    }
    body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--bodyTextColorWhite);
      background-color: rgba(255, 255, 255, 0.2);
    }
    body.dark-mode #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 {
      position: sticky;
      top: 0;
    }
    #cs-navigation {
      width: 100%;
      padding: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: var(--background-color);
      z-index: 10000;
      transition: transform .3s;
      position: sticky;
      top: 0;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      padding: 0 1rem 0 0;
      /* prevents padding from affecting height */
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
      position: relative;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      /* 40px - 44px */
      height: clamp(2.5rem, 4vw, 2.75rem);
      /* 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: auto;
      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;
      gap: 3rem;
    }
    #cs-navigation .cs-li {
      list-style: none;
      padding: 1.9375rem 0;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.3vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: block;
      position: relative;
      transition: color .3s;
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active {
      font-weight: 700;
      color: var(--headerColor);
    }
    #cs-navigation .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: white;
      padding: 0 2rem;
      background-color: var(--primary);
      overflow: hidden;
      display: inline-block;
      position: relative;
      z-index: 1;
      background-color: var(--primaryLight);
      border: 2px var(--primary) solid;
      border-radius: 20px;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color .3s;
    }
    #cs-navigation .cs-button-solid:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 0%;
      background: var(--primary);
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width .3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }

    #cs-navigation .cs-button-solid:hover{
      color: #000;
      transition-delay: 10ms;
    }


    #cs-navigation .cs-nav-button {
      line-height: 2.875rem;
      margin-left: 1.5rem;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 64rem) {
    body.dark-mode #cs-navigation {
      background-color: var(--dark);
    }
    body.dark-mode #cs-navigation .cs-top-container:before {
      background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #cs-navigation .cs-li-link,
    body.dark-mode #cs-navigation .cs-top-link {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #cs-navigation .cs-li-link:hover,
    body.dark-mode #cs-navigation .cs-top-link:hover {
      color: var(--secondary);
    }
    body.dark-mode #cs-navigation .cs-top-link {
      opacity: .8;
    }
  }

/*-- -------------------------- -->
<---           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: clamp(12.5rem, 25.95vw, 18.75em) 1rem;
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-mask-image: linear-gradient(180deg,#f2f2f2 60%,transparent)
  }
  #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: 39.375rem;
  }
  #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(--primary);
    display: inline-block;
    position: relative;
  }
  #hero-1426 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.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: white;
    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-button1:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: white;
    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-button-solid:hover{
    color: black;
    transition-delay: 65ms;
  }

  #hero-1426 .cs-button1 {
    background-color: var(--primary);
  }

  #hero-1426 .cs-button2{
    background-color: rgb(255,255,255, 0);
  }

  #hero-1426 .cs-button2:hover{
    color: var(--primary);
  }

}
/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1377 {
      padding: var(--sectionPadding);
      background-color: black;
  }
  #services-1377 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1377 .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-1377 .cs-topper {
      color: var(--primary);
  }
  #services-1377 .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);
  }
  #services-1377 .cs-item {
      list-style: none;
      width: 100%;
      /* 210px - 305px */
      min-height: clamp(13.125rem, 30vw, 19.0625rem);
      margin: 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      /* 16px - 24px */
      padding: clamp(1rem, 1.8vw, 1.5rem);
      /* 24px - 32px */
      padding-top: clamp(1.5rem, 2.3vw, 2rem);
      background-color: grey;
      border-radius: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: start;
      grid-column: span 12;
      gap: 3rem;
      position: relative;
      z-index: 1;
      transition: background-color 0.3s;
  }
  #services-1377 .cs-item:hover {
      background-color: var(--primary);
  }
  #services-1377 .cs-item:hover .cs-icon,
  #services-1377 .cs-item:hover .cs-arrow {
      filter: grayscale(1) brightness(1000%);
  }
  #services-1377 .cs-item:hover .cs-h3 {
      color: #fff;
  }
  #services-1377 .cs-item:hover .cs-arrow-wrapper {
      border-color: #fff;
  }
  #services-1377 .cs-icon {
      width: auto;
      height: 2.5rem;
      transition: filter 0.3s;
  }
  #services-1377 .cs-link {
      text-decoration: none;
      color: var(--headerColor);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      gap: 0.625rem;
  }
  #services-1377 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      font-weight: bold;
      line-height: 1.2em;
      text-align: inherit;
      /* if a word is too long for the card, break it onto a new line */
      word-break: break-word;
      margin: 0;
      transition: color 0.3s;
  }
  #services-1377 .cs-arrow-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 arrow */
      flex-shrink: 0;
      transition: border-color 0.3s;
  }
  #services-1377 .cs-arrow {
      width: auto;
      height: 0.75rem;
      transition: filter 0.3s;
  }
}
/* In between - 500px */
@media only screen and (min-width: 31.25rem) {
  #services-1377 .cs-item {
      grid-column: span 6;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1377 .cs-item {
      text-align: left;
      align-items: flex-start;
      grid-column: span 3;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1377 .cs-link {
      flex-direction: row;
  }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

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

  #steps-1171 .cs-topper {
      color: var(--secondary);
  }
  #steps-1171 .cs-title,
  #steps-1171 .cs-text {
      color: var(--bodyTextColorWhite);
  }
  #steps-1171 .cs-text {
      opacity: 0.8;
  }
  #steps-1171 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1.25rem;
  }
  #steps-1171 .cs-item {
      text-align: center;
      list-style: none;
      display: flex;
      grid-column: span 12;
      flex-direction: column;
      align-items: center;
      position: relative;
  }
  #steps-1171 .cs-item:last-of-type:after {
      display: none;
  }
  #steps-1171 .cs-item:nth-of-type(even):after {
      /* scaleX -1 flips it horizontally */
      transform: rotate(-135deg) scaleX(-1);
  }
  #steps-1171 .cs-item:after {
      content: "";
      position: relative;
      display: block;
      /* 54px - 84px */
      width: clamp(3.375rem, 6vw, 5.25rem);
      height: clamp(3.375rem, 6vw, 5.25rem);
      margin-top: 1.25rem;
      background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/curved-arrow.svg");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 1;
      transform: rotate(135deg);
  }
  #steps-1171 .cs-picture {
      margin-bottom: 1.5rem;
      width: 5.5rem;
      height: 5.5rem;
      border: 1px solid #121212;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #steps-1171 .cs-icon {
      width: 2.5rem;
      height: auto;
      display: block;
  }
  #steps-1171 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      color: var(--bodyTextColorWhite);
  }
  #steps-1171 .cs-item-p {
      font-size: 1rem;
      line-height: 1.5em;
      text-align: inherit;
      max-width: 21.375rem;
      margin: 0;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
  }
  #steps-1171 .cs-graphic {
      width: 52.5rem;
      height: auto;
      opacity: 0.05;
      position: absolute;
      top: -5rem;
      left: -5rem;
      transform: rotate(-10deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1171 .cs-item {
      grid-column: span 6;
  }
  #steps-1171 .cs-item:nth-of-type(2):after {
      display: none;
  }
  #steps-1171 .cs-item:nth-of-type(1):after {
      transform: rotate(135deg) scaleX(-1);
  }
  #steps-1171 .cs-item:after {
      margin: 0;
      position: absolute;
      right: -2.5rem;
      top: 0;
      transform: rotate(45deg);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #steps-1171 .cs-container {
      max-width: 80rem;
  }
  #steps-1171 .cs-item {
      grid-column: span 3;
  }
  #steps-1171 .cs-item:nth-of-type(2):after {
      display: block;
      transform: rotate(45deg);
  }
  #steps-1171 .cs-item:nth-of-type(3):after {
      display: block;
      transform: rotate(135deg) scaleX(-1);
  }
  #steps-1171 .cs-item:after {
      right: -3rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-1171 {
      background-color: rgba(0, 0, 0, 0.6);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-578 {
  }
  #sbs-578 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 7vw, 4rem);
  }
  #sbs-578 .cs-content {
      /* set text align 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;
  }

  #sbs-578 .cs-text {
      margin-bottom: 1rem;
  }
  #sbs-578 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #sbs-578 .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;
  }
  #sbs-578 .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;
  }
  #sbs-578 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbs-578 .cs-picture {
      display: block;
      position: relative;
      width: 100%;
      height: 18.75rem;
  }
  #sbs-578 .cs-picture img {
      position: relative;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }

  .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    background-color: white;
    padding: 5px;
  }

}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-578 {
      padding: var(--sectionPadding);
  }
  #sbs-578 .cs-container {
      flex-direction: row;
      justify-content: flex-start;
      /* 60px - 128px */
      gap: clamp(3.75rem, 10vw, 8rem);
  }
  #sbs-578 .cs-content {
      width: 53%;
      /* reset the padding, add the section padding back to the section container */
      padding: 0;
  }
  #sbs-578 .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;
  }
  #sbs-578 .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);
  }
}

                              

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1387 {
      padding-top: 7rem;
      /* clips the cs-floater and prevents it from causing overflow issues */
      overflow: hidden;
      background-color: var(--background-color);
      position: relative;
      z-index: 1;
  }
  #pricing-1387 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 36.5rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 3vw, 4rem);
      position: relative;
  }
  #pricing-1387 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 33.875rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
      margin-top: 5rem;
  }

  #pricing-1387 .cs-title {
      max-width: 20ch;
  }
  #pricing-1387 .cs-text {
      margin-bottom: 1rem;
  }
  #pricing-1387 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #pricing-1387 .cs-toggle-group {
      width: 100%;
      max-width: 25.875rem;
      margin: 0;
      padding: 0.75rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      background-color: #495057;
      border-radius: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #pricing-1387 .cs-plan {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.5em;
      margin: 0;
      padding: 0;
      color: var(--headerColor);
  }
  #pricing-1387 .cs-plan:hover {
      cursor: pointer;
  }

  #pricing-1387 .cs-card-group {
      width: 100%;
      max-width: 39.375rem;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* 16px - 20px */
      gap: clamp(7rem, 2.3vw, 1.25rem);
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option1 {
      /* when the active class is on the cs-card-group, run these styles */
      transform: scale(0);
      position: absolute;
      right: 0;
      bottom: 0;
      opacity: 0;
      visibility: hidden;
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option1 .cs-item {
      /* when the active class is on the cs-card-group, run these styles */
      opacity: 0;
      transform: translateY(1.25rem) rotateY(90deg);
      transition:
          opacity 0.3s,
          transform 0.6s;
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option2 {
      /* when the active class is on the cs-card-group, run these styles */
      visibility: visible;
      pointer-events: all;
      opacity: 1;
      position: relative;
      right: auto;
      bottom: auto;
      transform: scale(1);
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option2 .cs-item {
      /* when the active class is on the cs-card-group, run these styles */
      opacity: 1;
      transform: translateY(0rem) rotateY(0deg);
  }
  #pricing-1387 .cs-option1 {
      /* default styles when there is no active class on the cs-card-group */
      opacity: 1;
      visibility: visible;
      right: 0;
      bottom: auto;
      transform: scale(1);
      transform-origin: top;
      transition:
          transform 0.6s,
          opacity 0.3s,
          visibility 0.3s;
  }
  #pricing-1387 .cs-option1 .cs-item {
      /* default styles when there is no active class on the cs-card-group */
      opacity: 1;
      transform: translateY(0rem) rotateY(0deg);
      transition:
          opacity 0.3s,
          transform 0.6s;
  }
  #pricing-1387 .cs-option1 .cs-item:nth-of-type(2) {
      transition-delay: 0.2s;
  }
  #pricing-1387 .cs-option1 .cs-item:nth-of-type(3) {
      transition-delay: 0.4s;
  }
  #pricing-1387 .cs-option2 {
      /* default styles when there is no active class on the cs-card-group */
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      position: absolute;
      right: 0;
      bottom: 0;
      transform: scale(0);
      transform-origin: top;
      transition:
          transform 0.6s,
          opacity 0.3s,
          visibility 0.3s;
  }
  #pricing-1387 .cs-option2 .cs-item {
      /* default styles when there is no active class on the cs-card-group */
      opacity: 0;
      transform: translateY(1.25rem) rotateY(90deg);
      transition:
          opacity 0.3s,
          transform 0.6s;
  }
  #pricing-1387 .cs-option2 .cs-item:nth-of-type(2) {
      transition-delay: 0.2s;
  }
  #pricing-1387 .cs-option2 .cs-item:nth-of-type(3) {
      transition-delay: 0.4s;
  }
  #pricing-1387 .cs-item {
      text-align: center;
      list-style: none;
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
  }
  #pricing-1387 .cs-item.cs-popular .cs-flex {
      background-color: var(--primary);
  }
  #pricing-1387 .cs-item.cs-popular .cs-tag {
      display: flex;
  }
  #pricing-1387 .cs-item.cs-popular .cs-package,
  #pricing-1387 .cs-item.cs-popular .cs-price,
  #pricing-1387 .cs-item.cs-popular .cs-duration {
      color: var(--bodyTextColorWhite);
  }
  #pricing-1387 .cs-item.cs-popular .cs-duration {
      opacity: 0.8;
  }
  #pricing-1387 .cs-item.cs-popular .cs-button-transparent {
      background-color: var(--primary);
      color: #fff;
      transition:
          color 0.3s,
          border-color 0.6s,
          background-color 0.3s;
  }
  #pricing-1387 .cs-item.cs-popular .cs-button-transparent:hover {
      border-color: #495057;
      background-color: #495057;
  }
  #pricing-1387 .cs-flex {
      /* 196px - 250px */
      width: clamp(12.25rem, 25vw, 15.625rem);
      height: clamp(12.25rem, 25vw, 15.625rem);
      margin-bottom: -6.25rem;
      border-radius: 50%;
      background-color: var(--secondary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      color: lightgray;
  }
  #pricing-1387 .cs-tag {
      font-size: 0.8125rem;
      color: white;
      text-transform: uppercase;
      /* keeps the text in one line, won't jump to two lines */
      white-space: nowrap;
      font-weight: 700;
      padding: 0.5rem;
      gap: 0.25rem;
      border-radius: 50px;
      background-color: #495057;
      /* clips the corners of the pseudo element */
      overflow: hidden;
      display: none;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 50%;
      bottom: -0.25rem;
      transform: translateX(-50%);
  }
  #pricing-1387 .cs-tag:before {
      content: "";
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 0.3;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #pricing-1387 .cs-icon {
      width: 1.25rem;
      height: auto;
      display: flex;
  }
  #pricing-1387 .cs-package {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.5625rem);
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      /* 4px - 8px */
      margin: 0 0 clamp(0.25rem, 1vw, 0.5rem) 0;
  }
  #pricing-1387 .cs-price {
      /* 31px - 49px */
      font-size: clamp(1.9375rem, 4vw, 3.0625rem);
      line-height: 1.2em;
      font-weight: 700;
      text-align: inherit;
      margin: 0;
      padding: 0;
      color: lightgray;
      display: flex;
      justify-content: center;
      align-items: flex-end;
  }
  #pricing-1387 .cs-duration {
      font-size: 1rem;
      line-height: 1.5em;
      font-weight: 400;
      text-align: inherit;
      margin: 0;
      /* 4px - 8px */
      padding: clamp(0.25rem, 1vw, 0.5rem) 0;
      color: var(--bodyTextColor);
      display: block;
  }
  #pricing-1387 .cs-info {
      width: 100%;
      padding: 5.375rem 2.5rem 2.5rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #495057;
      border-radius: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  #pricing-1387 .cs-ul {
      width: 100%;
      margin: 2.5rem 0 2.5rem 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      position: relative;
  }
  #pricing-1387 .cs-li {
      font-size: 1rem;
      list-style: none;
      line-height: 1.5em;
      font-weight: 400;
      text-align: inherit;
      margin: 0;
      padding: 0;
      color: white;
      display: block;
  }
  #pricing-1387 .cs-li.cs-disabled {
      opacity: 0.5;
  }
  #pricing-1387 .cs-button-transparent {
      font-size: 1rem;
      line-height: 3.5rem;
      text-decoration: none;
      font-weight: 700;
      overflow: hidden;
      margin: 0;
      color: var(--bodyTextColorWhite);
      background-color: var(--primary);
      padding: 0 3rem;
      border-radius: 1.875rem;
      border: 1px solid var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
  }
  #pricing-1387 .cs-button-transparent:before {
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 0%;
      background-color: var(--dark);
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #pricing-1387 .cs-button-transparent:hover {
      color: var(--bodyTextColorWhite);
      border-color: var(--primary);
  }
  #pricing-1387 .cs-button-transparent:hover:before {
      width: 100%;
  }
  #pricing-1387 .cs-button-transparent {
      /* this is the section specific override if you choose to pull out the cs-button-transparent and place it in a global stylesheet to resue acorss the entire site */
      margin-top: auto;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1387 .cs-container {
      max-width: 80rem;
  }
  #pricing-1387 .cs-container .cs-card-group {
      flex-direction: row;
      align-items: stretch;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1387 .cs-container {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
  }
  #pricing-1387 .cs-content {
      text-align: left;
      width: 47%;
      align-items: flex-start;
  }
  #pricing-1387 .cs-info {
      min-height: auto;
  }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #pricing-1387 {
      background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #pricing-1387 .cs-title,
  body.dark-mode #pricing-1387 .cs-text {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1387 .cs-text {
      opacity: 0.8;
  }
  body.dark-mode #pricing-1387 .cs-toggle-group {
      background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #pricing-1387 .cs-plan {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1387 .cs-flex {
      background-color: lightslategrey;
  }
  body.dark-mode #pricing-1387 .cs-ul:before {
      opacity: 0.5;
  }
  body.dark-mode #pricing-1387 .cs-item.cs-popular .cs-button-transparent {
      background-color: #fff;
      color: var(--primary);
  }
  body.dark-mode #pricing-1387 .cs-item.cs-popular .cs-button-transparent:hover {
      background-color: #1a1a1a;
  }
  body.dark-mode #pricing-1387 .cs-info {
      background-color: var(--medium);
  }
  body.dark-mode #pricing-1387 .cs-package {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1387 .cs-price,
  body.dark-mode #pricing-1387 .cs-duration,
  body.dark-mode #pricing-1387 .cs-li {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1387 .cs-duration,
  body.dark-mode #pricing-1387 .cs-li {
      opacity: 0.8;
  }
  body.dark-mode #pricing-1387 .cs-button-transparent {
      background-color: var(--primary);
      color: #fff;
      border: none;
      transition:
          color 0.3s,
          background-color 0.3s;
  }
  body.dark-mode #pricing-1387 .cs-button-transparent:hover {
      background-color: var(--background-color);
  }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1675 {
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
  }
  #steps-1675 .cs-container {
    width: 100%;
    /* changes to 1920px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1675 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #steps-1675 .cs-text {
    /* 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 selector is a section specific override that stays inside this stitch */
    max-width: 32.625rem;
  }
  #steps-1675 .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    align-items: stretch;
    grid-auto-flow: row;
  }
  #steps-1675 .cs-item {
    list-style: none;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    /* bottom border */
  }
  #steps-1675 .cs-item::after {
    content: "";
    width: 100%;
    height: 1px;
    /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
    /* note you'll also have to change the color in the tablet media query when the lines go vertical */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #steps-1675 .cs-item:first-of-type {
    padding-top: 0;
  }
  #steps-1675 .cs-item:last-of-type {
    padding-bottom: 0;
  }
  #steps-1675 .cs-item:last-of-type::after {
    content: none;
  }
  #steps-1675 .cs-number {
    /* 80px - 100px */
    font-size: clamp(5rem, 1vw, 6.25rem);
    font-weight: 900;
    line-height: 1.2em;
    color: var(--primary);
    opacity: 0.12;
    display: block;
  }
  #steps-1675 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: -1.9375rem 0 1rem 0;
    color: var(--headerColor);
  }
  #steps-1675 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1675 .cs-container {
    max-width: 120rem;
  }
  #steps-1675 .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  #steps-1675 .cs-item {
    /* 24px - 60px */
    padding: clamp(1.5rem, 3vw, 3.75rem);
    /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
  }
  #steps-1675 .cs-item::after {
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    right: 0;
    left: initial;
  }
  #steps-1675 .cs-item:first-of-type,
  #steps-1675 .cs-item:last-of-type {
    /* 24px - 60px */
    padding: clamp(1.5rem, 3vw, 3.75rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-1675 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #steps-1675 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-1675 .cs-item {
    border-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-1675 .cs-item:after {
    opacity: .2;
  }
  body.dark-mode #steps-1675 .cs-item-text,
  body.dark-mode #steps-1675 .cs-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #steps-1675 .cs-h3,
  body.dark-mode #steps-1675 .cs-number {
    color: var(--primaryLight);
  }
}
                                

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

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

  #contact-1333 .cs-title {
      max-width: 23ch;
      margin: 0 0 1.75rem 0;
  }
  #contact-1333 .cs-form {
      width: 100%;
      max-width: 40.625rem;
      /* 32px - 48px top and bottom */
      /* 16px - 60px left and right */
      padding: clamp(2rem, 5.18vw, 3rem) clamp(1rem, 5vw, 3.75rem);
      /* prevents flexbox from affecting height and width */
      box-sizing: border-box;
      background-color: #f7f7f7;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      /* prevents flexbox from squishing it */
      flex: none;
      gap: 0.75rem;
  }
  #contact-1333 .cs-form .cs-title {
      /* 16px - 28px */
      margin: 0 0 clamp(1rem, 3vw, 1.75rem) 0;
  }
  #contact-1333 .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-1333 .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-1333 .cs-input::placeholder {
      color: #767676;
      opacity: 0.6;
  }
  #contact-1333 .cs-textarea {
      min-height: 7.5rem;
      padding-top: 1.5rem;
      /* 16px - 28px */
      margin: 0 0 clamp(1rem, 3vw, 1.75rem) 0;
      font-family: inherit;
  }
  #contact-1333 .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);
      overflow: hidden;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color 0.3s;
  }
  #contact-1333 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #contact-1333 .cs-button-solid:hover {
      color: #fff;
  }
  #contact-1333 .cs-button-solid:hover:before {
      width: 100%;
  }
  #contact-1333 .cs-submit {
      width: 100%;
      min-width: 17.6875rem;
  }
  #contact-1333 .cs-submit:hover {
      cursor: pointer;
  }
  #contact-1333 .cs-faq-group {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  #contact-1333 .cs-faq-item {
      list-style: none;
      width: 100%;
      border-bottom: 1px solid #e8e8e8;
      transition: border-bottom 0.3s;
  }
  #contact-1333 .cs-faq-item.active {
      border-color: var(--primary);
  }
  #contact-1333 .cs-faq-item.active .cs-button {
      color: var(--primary);
  }
  #contact-1333 .cs-faq-item.active .cs-button:before {
      background-color: var(--primary);
      transform: rotate(315deg);
  }
  #contact-1333 .cs-faq-item.active .cs-button:after {
      background-color: var(--primary);
      transform: rotate(-315deg);
  }
  #contact-1333 .cs-faq-item.active .cs-item-p {
      height: auto;
      /* 20px - 24px bottom */
      /* 16px - 24px left & right */
      padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2vw, 1.5rem) 0;
      opacity: 1;
  }
  #contact-1333 .cs-button {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: left;
      font-weight: bold;
      /* 16px - 24px */
      padding: clamp(1rem, 2vw, 1.5rem);
      padding-left: 0;
      border: none;
      background: transparent;
      color: var(--headerColor);
      display: block;
      width: 100%;
      position: relative;
      transition:
          background-color 0.3s,
          color 0.3s;
  }
  #contact-1333 .cs-button:hover {
      cursor: pointer;
  }
  #contact-1333 .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.5rem;
      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;
  }
  #contact-1333 .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: 1.3125rem;
      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;
  }
  #contact-1333 .cs-button-text {
      width: 80%;
      display: block;
  }
  #contact-1333 .cs-item-p {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      width: 90%;
      height: 0;
      margin: 0;
      /* 16px - 24px */
      padding: 0 clamp(1rem, 2vw, 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;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1333 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
  }
  #contact-1333 .cs-form {
      width: 45vw;
  }
  #contact-1333 .cs-submit {
      width: auto;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #contact-1333 .cs-title,
  body.dark-mode #contact-1333 .cs-item-p,
  body.dark-mode #contact-1333 .cs-button,
  body.dark-mode #contact-1333 label {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-1333 .cs-button:before,
  body.dark-mode #contact-1333 .cs-button:after {
      background-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-1333 .cs-item-p {
      opacity: 0.8;
  }
  body.dark-mode #contact-1333 .cs-form {
      background-color: var(--medium);
  }
  body.dark-mode #contact-1333 .cs-input {
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff;
  }
  body.dark-mode #contact-1333 .cs-input::placeholder {
      color: #fff;
      opacity: 0.8;
  }
  body.dark-mode #contact-1333 .cs-graphic {
      opacity: 0.4;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer-1390 {
      padding: var(--sectionPadding);
      background-color: var(--background-color);
      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: center;
      justify-content: center;
      /* 24px - 40px */
      gap: clamp(1.25rem, 4vw, 2.5rem);
  }
  #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: 55%;
      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: #bababa;
      line-height: 1.5em;
      margin: 0;
      display: block;
  }
  #footer-1390 .cs-copyright-link,
  #footer-1390 .cs-separater {
      font-size: 1rem;
      text-decoration: none;
      color: #bababa;
      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 {
      align-items: flex-start;
  }
  #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;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #footer-1390 {
      background-color: var(--dark);
  }
}

/* About-Page */

/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team-220 {
      /* centers the button */
      text-align: center;
      padding: var(--sectionPadding);
  }
  #meet-team-220 .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, 6vw, 4rem);
  }
  #meet-team-220 .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;
  }
  #meet-team-220 .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;
  }
  #meet-team-220 .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;
  }
  #meet-team-220 .cs-text {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      max-width: 40.625rem;
      margin: 0;
      color: var(--bodyTextColor);
  }
  #meet-team-220 .cs-picture {
      width: 100%;
      margin-bottom: 1rem;
      border-radius: 0.25rem;
      display: block;
      position: relative;
      aspect-ratio: 0.925;
      /* clips the corners off the image tag */
      overflow: hidden;
  }
  #meet-team-220 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes image behave like a background image */
      object-fit: cover;
      transition: transform 0.7s;
  }
  #meet-team-220 .cs-card-group {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      /* gap: 1rem; */
  }
  #meet-team-220 .cs-item {
      list-style: none;
      /* Changes on tablet */
      width: 100%;
      max-width: 21.25rem;
      /* 16px - 20px */
      padding: clamp(1rem, 2vw, 1.25rem);
      padding-bottom: 1.25rem;
      background: black;
      border-radius: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
  }
  #meet-team-220 .cs-item:hover .cs-picture img {
      transform: scale(1.1);
  }
  #meet-team-220 .cs-name {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin-bottom: 0.25rem;
      color: var(--headerColor);
      display: block;
  }
  #meet-team-220 .cs-job-title {
      font-size: 1rem;
      margin-bottom: 0.75rem;
      color: var(--headerColor);
      display: block;
  }
  #meet-team-220 .cs-social {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
  }
  #meet-team-220 .cs-link {
      /* 28px - 32px */
      width: clamp(1.75rem, 3vw, 2rem);
      /* 28px - 32px */
      height: clamp(1.75rem, 3vw, 2rem);
      /* After making the a tag into a box, we center the image inside of it */
      border-radius: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      /* creates the 3D space for the 3D effect when spinning */
      transform-style: preserve-3d;
      perspective: 700px;
  }
  #meet-team-220 .cs-link:hover img {
      transform: translateY(-0.3125rem) rotateY(360deg);
  }
  #meet-team-220 .cs-link img {
      width: 0.875rem;
      height: auto;
      transition: transform 0.7s;
  }
  #meet-team-220 .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;
  }
  #meet-team-220 .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;
  }
  #meet-team-220 .cs-button-solid:hover:before {
      width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #meet-team-220 .cs-container {
      max-width: 80em;
  }
  #meet-team-220 .cs-card-group {
      flex-direction: row;
  }
  #meet-team-220 .cs-item {
      width: 31%;
  }
  #meet-team-220 .cs-picture {
      /* 240px - 360px */
      height: clamp(15rem, 31.25vw, 22.5rem);
      aspect-ratio: none;
  }
}

                              

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-580,
  #RPsbsr-580 {
  }
  #RPsbs-580 .cs-container,
  #RPsbsr-580 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 7vw, 4rem);
  }
  #RPsbs-580 .cs-content,
  #RPsbsr-580 .cs-content {
      /* set text align 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;
  }

  #RPsbs-580 .cs-text,
  #RPsbsr-580 .cs-text {
      margin-bottom: 1rem;
  }
  #RPsbs-580 .cs-text:last-of-type,
  #RPsbsr-580 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #RPsbs-580 .cs-button-solid,
  #RPsbsr-580 .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;
  }
  #RPsbs-580 .cs-button-solid:before,
  #RPsbsr-580 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: white;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #RPsbs-580 .cs-button-solid:hover:before,
  #RPsbsr-580 .cs-button-solid:hover:before {
      width: 100%;
  }

  #RPsbsr-580 .cs-button-solid:hover{
    color: black;
    transition-delay: 45ms;
  }

  #RPsbs-580 .cs-button-solid:hover{
    color: black;
    transition-delay: 45ms;
  }

  #RPsbs-580 .cs-picture,
  #RPsbsr-580 .cs-picture {
      display: block;
      position: relative;
      width: 100%;
      height: 18.75rem;
  }
  #RPsbs-580 .cs-picture img,
  #RPsbsr-580 .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) {
  #RPsbs-580,
  #RPsbsr-580 {
      padding: var(--sectionPadding);
  }
  #RPsbs-580 .cs-container,
  #RPsbsr-580 .cs-container {
      flex-direction: row;
      justify-content: flex-start;
      /* 60px - 128px */
      gap: clamp(3.75rem, 10vw, 8rem);
  }
  #RPsbs-580 .cs-content,
  #RPsbsr-580 .cs-content {
      width: 53%;
      /* reset the padding, add the section padding back to the section container */
      padding: 0;
  }
  #RPsbs-580 .cs-picture,
  #RPsbsr-580 .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;
  }
  #RPsbs-580 .cs-picture:before,
  #RPsbsr-580 .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);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #RPsbs-580 .cs-topper,
  body.dark-mode #RPsbsr-580 .cs-topper {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #RPsbs-580 .cs-title,
  body.dark-mode #RPsbsr-580 .cs-title,
  body.dark-mode #RPsbs-580 .cs-text,
  body.dark-mode #RPsbsr-580 .cs-text {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #RPsbs-580 .cs-text,
  body.dark-mode #RPsbsr-580 .cs-text {
      opacity: 0.8;
  }
  body.dark-mode #RPsbs-580 .cs-picture:before,
  body.dark-mode #RPsbsr-580 .cs-picture:before {
      background-color: var(--accent);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-333 {
      padding: var(--sectionPadding);
  }
  #sbsr-333 .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, 6vw, 4rem);
  }
  #sbsr-333 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 32.625rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #sbsr-333 .cs-text {
      margin-bottom: 1rem;
  }
  #sbsr-333 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #sbsr-333 .cs-ul {
      width: 100%;
      margin: 0 0 2rem 0;
      padding-left: 1.25rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
  }
  #sbsr-333 .cs-li {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      list-style: none;
      text-align: left;
      width: 100%;
      max-width: 25rem;
      margin: 0;
      color: var(--bodyTextColor);
      position: relative;
  }
  #sbsr-333 .cs-li:before {
      /* bullet */
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: currentColor;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0.625rem;
      left: -0.9375rem;
  }
  #sbsr-333 .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-333 .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-333 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbsr-333 .cs-image-group {
      /* scaling entire section down. font-size starts at a min in vw, and stops when that value reaches 1em (16px). Since we want the picture elements to base their font size on the parent and not the root, we use ems for this entire section  */
      font-size: min(2.08vw, 0.791em);
      width: 42.875em;
      height: 41.125em;
      position: relative;
      /* flips it horizontally */
      transform: scaleX(-1);
  }
  @keyframes floatAnimation {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-3em);
      }
      100% {
          transform: translateY(0);
      }
  }
  @keyframes floatAnimation2 {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-2em);
      }
      100% {
          transform: translateY(0);
      }
  }
  #sbsr-333 .cs-image-group:before {
      /* blue circle */
      content: "";
      width: 7.5em;
      height: 7.5em;
      border-radius: 50%;
      background: var(--secondary);
      opacity: 1;
      position: absolute;
      display: block;
      bottom: 6.25em;
      left: 0em;
      z-index: 10;
      animation-name: floatAnimation;
      animation-duration: 6s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #sbsr-333 .cs-image-group:after {
      /* white circle */
      content: "";
      width: 9.375em;
      height: 9.375em;
      border-radius: 50%;
      background: var(--primaryLight);
      opacity: 1;
      position: absolute;
      display: block;
      top: 0em;
      right: 6.25em;
      z-index: -1;
      animation-name: floatAnimation2;
      animation-duration: 4s;
      animation-delay: 0.2s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #sbsr-333 .cs-picture {
      width: 39.375em;
      height: 39.375em;
      border-radius: 50%;
      border: clamp(6px, 1.2vw, 12px) solid #f7f7f7;
      /* clips the img tag corners */
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
  }
  #sbsr-333 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      /* flips image to original orientation, undoing the flip on the parent container */
      transform: scaleX(-1);
  }
  #sbsr-333 .cs-box {
      width: 15.8125em;
      height: 15.8125em;
      border-radius: 50%;
      border: clamp(6px, 1.2vw, 12px) solid #f7f7f7;
      background-color: var(--primaryLight);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 0.25rem;
      position: absolute;
      bottom: 0;
      right: 0;
      /* flips image to original orientation, undoing the flip on the parent container */
      transform: scaleX(-1);
  }
  #sbsr-333 .cs-number {
      /* 40px - 61px */
      font-size: clamp(2.5rem, 5vw, 3.8125rem);
      line-height: 1.2em;
      font-weight: bold;
      text-align: center;
      color: var(--bodyTextColorWhite);
  }
  #sbsr-333 .cs-desc {
      /* 14px - 25px */
      font-size: clamp(0.875rem, 2.2vw, 1.5625rem);
      line-height: 1.2em;
      text-align: center;
      max-width: 7.8125rem;
      color: var(--bodyTextColorWhite);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-333 .cs-container {
      max-width: 80rem;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: space-between;
  }
  #sbsr-333 .cs-content {
      width: 50%;
  }
  #sbsr-333 .cs-image-group {
      /* reset the scale */
      font-size: min(1.2vw, 1em);
      /* sends it to the right in the 2nd position */
      order: 2;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-333 .cs-topper {
      color: var(--primaryLight);
  }
  body.dark-mode #sbsr-333 .cs-title,
  body.dark-mode #sbsr-333 .cs-text,
  body.dark-mode #sbsr-333 .cs-li {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-333 .cs-picture,
  body.dark-mode #sbsr-333 .cs-box {
      border-color: var(--accent);
  }
}

                              

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr-580 {
      background-color: #121212;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbsr-580 .cs-container {
      justify-content: flex-end;
  }
  #RPsbsr-580 .cs-content {
      /* sends it to the left in the first position */
      order: -1;
  }
  #RPsbsr-580 .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;
  }
  #RPsbsr-580 .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);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #RPsbsr-580 {
      background-color: rgba(0, 0, 0, 0.2);
  }
}

/* Booking Calendar */

#booking-header{
  text-align: center;
  color: var(--primary);
}

#booking-wrapper{
  display: flex;
  justify-content: center;
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-contact-490 {
    padding: var(--sectionPadding);
  }
  #cs-contact-490 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
  }
  #cs-contact-490 .cs-content {
    max-width: 32.625rem;
    text-align: left;
  }
  #cs-contact-490 .cs-text {
    /* 16px - 48px */
    margin: 0 0 clamp(1rem, 4.4vw, 3rem) 0;
  }
  #cs-contact-490 .cs-header {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 1rem 0;
    color: #b4b2c7;
    display: block;
  }
  #cs-contact-490 .cs-link {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-decoration: none;
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 32px */
    margin: 0 0 clamp(1rem, 2.5vw, 2rem);
    color: var(--headerColor);
    display: block;
  }
  #cs-contact-490 .cs-link:hover {
    text-decoration: underline;
  }
  #cs-contact-490 .cs-link:last-of-type {
    margin-bottom: 0;
  }
  #cs-contact-490 .cs-social {
    /* 32px - 80px */
    margin-top: clamp(2rem, 6vw, 5rem);
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.75em;
  }
  #cs-contact-490 .cs-social-link {
    /* 32px - 52px */
    width: clamp(2rem, 4vw, 3.25rem);
    height: clamp(2rem, 4vw, 3.25rem);
    background-color: #4e4b66;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s, background-color 0.3s;
  }
  #cs-contact-490 .cs-social-link:hover {
    background-color: var(--primary);
    transform: translateY(-0.1875rem);
  }
  #cs-contact-490 .cs-social-img {
    /* 14px - 24px */
    height: clamp(0.875rem, 2vw, 1.5rem);
    width: auto;
    display: block;
  }
  #cs-contact-490 #cs-form-490 {
    width: 100%;
    max-width: 40.625rem;
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 5.3vw, 2.5rem);
    /* 20px - 40px */
    padding: clamp(1.25rem, 4.5vw, 2.5rem);
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    border: 1px solid #dad9e3;
    border-radius: 1rem;
  }
  #cs-contact-490 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 20px */
    margin-bottom: clamp(1rem, 1em, 1.25rem);
    color: var(--headerColor);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #cs-contact-490 .cs-label-message {
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 4.5vw, 2.5rem);
  }
  #cs-contact-490 .cs-input,
  #cs-contact-490 textarea {
    font-size: 1rem;
    width: 100%;
    height: 4rem;
    margin-top: 0.25rem;
    padding-left: 1.25rem;
    /* set transparent border so on hover border doesn't make it glitch */
    border: 1px solid transparent;
    border-bottom: 1px solid #b4b2c7;
    /* prevents border & padding from affecting height */
    box-sizing: border-box;
    transition: border 0.3s;
  }
  #cs-contact-490 .cs-input:hover,
  #cs-contact-490 textarea:hover {
    border: 1px solid var(--primary);
  }
  #cs-contact-490 .cs-input::placeholder,
  #cs-contact-490 textarea::placeholder {
    color: #7d799c;
  }
  #cs-contact-490 textarea {
    font-family: inherit;
    margin: 0;
    padding-top: 1.25rem;
    min-height: 7.5rem;
  }
  #cs-contact-490 .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: auto;
    width: 100%;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border: none;
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cs-contact-490 .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;
  }
  #cs-contact-490 .cs-button-solid:hover {
    cursor: pointer;
  }
  #cs-contact-490 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
  #cs-contact-490 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #cs-contact-490 .cs-content {
    width: 40%;
    /* pushes it to the right */
    order: 2;
    flex: none;
  }
  #cs-contact-490 #cs-form-490 {
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 43.75rem) {
  body.dark-mode #cs-contact-490 .cs-title,
  body.dark-mode #cs-contact-490 .cs-text,
  body.dark-mode #cs-contact-490 .cs-link,
  body.dark-mode #cs-contact-490 .cs-header,
  body.dark-mode #cs-contact-490 .cs-label {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-contact-490 .cs-text,
  body.dark-mode #cs-contact-490 .cs-link {
    opacity: .8;
  }
  body.dark-mode #cs-contact-490 #cs-form-490 {
    border-color: rgba(255, 255, 255, 0.3);
  }
  body.dark-mode #cs-contact-490 .cs-input {
    color: var(--bodyTextColorWhite);
    background-color: transparent;
  }
  body.dark-mode #cs-contact-490 .cs-input::placeholder {
    color: var(--bodyTextColorWhite);
    opacity: .5;
  }
}
                                

/*-- -------------------------- -->
<---          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%;
      max-width: 69rem;
      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: 1;
      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;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-942 {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
  }
  #services-942 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      margin-top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-942 .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-942 .cs-title,
  #services-942 .cs-text {
      max-width: 100%;
  }
  #services-942 .cs-card-group {
      margin: 0;
      padding: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      /* 16px - 20px */
      gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-942 .cs-item {
      width: 100%;
      text-align: center;
      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: black;
      /* 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: center;
      justify-content: center;
      position: relative;
      z-index: 1;
  }
  #services-942 .cs-item:hover .cs-h3 {
      color: var(--bodyTextColorWhite);
  }
  #services-942 .cs-item:hover .cs-item-text {
      color: var(--bodyTextColorWhite);
      opacity: 0.9;
  }
  #services-942 .cs-item:hover .cs-background {
      opacity: 1;
  }
  #services-942 .cs-icon-wrapper {
      width: 5.5rem;
      height: 5.5rem;
      margin: -2.75rem 0 2.25rem 0;
      background-color: var(--primary);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #services-942 .cs-icon {
      width: 2.5rem;
      height: auto;
  }
  #services-942 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: bold;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
  }
  #services-942 .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-942 .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-942 .cs-link:hover {
      color: #fff;
  }
  #services-942 .cs-link:before {
      /* underline */
      content: "";
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: 1;
      position: absolute;
      display: block;
      bottom: 0rem;
      left: 0;
  }
  #services-942 .cs-background {
      width: 100%;
      height: 100%;
      opacity: 0;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: opacity 0.3s;
  }
  #services-942 .cs-background:before {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #1a1a1a;
      opacity: 0.84;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #services-942 .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-942 .cs-waves {
      width: 100%;
      height: 13.875rem;
      background-color: var(--primary);
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1;
  }
  #services-942 .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-942 .cs-container {
      max-width: 80rem;
  }
  #services-942 .cs-item {
      grid-column: span 4;
  }
}

#pricing-button{
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.cs-button-6 {
  text-align: center;
  font-size: 1rem;
  /* 46px - 56px */
  line-height: clamp(2.875rem, 8vw, 3.5rem);
  text-decoration: none;
  font-weight: 700;
  min-width: 10.875rem;
  margin: auto;
  color: #1a1a1a;
  padding: 0 1.5rem;
  /* prevents padding and border from affecting height and width */
  box-sizing: border-box;
  background-color: var(--primary);
  border: 2px solid #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.cs-button-6:before {
  content: "";
  width: 0.375rem;
  height: 100%;
  background: #1a1a1a;
  opacity: 1;
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  transition: width 0.3s;
  z-index: -1;
}
.cs-button-6 .cs-icon {
  width: 1.5rem;
  height: auto;
}
.cs-button-6 .cs-icon path {
  transition: fill 0.3s;
}
.cs-button-6:hover {
  color: #fff;
}
.cs-button-6:hover:before {
  width: 100%;
}
.cs-button-6:hover .cs-icon path {
  fill: #fff;
}

                              

/*-- -------------------------- -->
<---           Table            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #table-1669 {
    padding: var(--sectionPadding);
  }
  #table-1669 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #table-1669 .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;
  }
  #table-1669 .cs-table {
    width: 100%;
    border-collapse: collapse;
  }
  #table-1669 .cs-th {
    padding: 0.75rem 1rem;
    box-sizing: border-box;
  }
  #table-1669 .cs-td {
    padding: 0.5rem 1rem;
    box-sizing: border-box;
  }
  #table-1669 .cs-th,
  #table-1669 .cs-td {
    border: 1px solid black;
    text-align: center;
    background-color: var(--secondary);
  }
  #table-1669 .cs-color .cs-th:first-child {
    color: #fff;
    background-color: var(--primary);
  }
  #table-1669 .cs-th:first-child,
  #table-1669 .cs-td:first-child {
    position: sticky;
    left: 0;
    z-index: 100;
    /* Make sure it sits above the other cells */
    background-color: lightcyan;
    border: 1px solid black;
    text-align: left;
  }
  #table-1669 .cs-th {
    background-color: lightcyan;
  }


  #table-1669 .cs-tr {
    color: black;
  }

  #table-1669 .cs-icon {
    height: 1rem;
    width: auto;
  }
}
/* Tablet - 600px */
@media screen and (max-width: 37.5rem) {
  #table-1669 .cs-table {
    display: block;
    overflow-x: auto;
  }
}
             
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1628 {
    padding: var(--sectionPadding);
    background-color: var(--background-color);
  }
  #services-1628 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1628 .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;
  }
  #services-1628 .cs-title {
    max-width: 20ch;
  }
  #services-1628 .cs-text {
    max-width: 40rem;
    position: relative;
    z-index: 1;
  }
  #services-1628 .cs-text:after {
    /* divider line */
    content: "";
    width: 100%;
    height: 1px;
    margin-top: 1.5rem;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: relative;
  }
  #services-1628 .cs-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
  }
  #services-1628 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
    /* 28px - 40px */
    row-gap: clamp(1.75rem, 2.5vw, 2.5rem);
  }
  #services-1628 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-1628 .cs-item:hover .cs-picture img {
    opacity: .5;
    transform: scale(1.2);
  }
  #services-1628 .cs-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-1628 .cs-picture {
    width: 100%;
    height: 15rem;
    margin-bottom: 1.5rem;
    background-color: #000;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #services-1628 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #services-1628 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #services-1628 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColor);
  }
  #services-1628 .cs-fake-link {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    margin-top: auto;
    color: var(--primary);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #services-1628 .cs-fake-link:hover .cs-icon {
    transform: translateX(0.5rem);
  }
  #services-1628 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform .3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1628 .cs-container {
    max-width: 80rem;
  }
  #services-1628 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #services-1628 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #services-1628 .cs-title {
    margin: 0;
  }
  #services-1628 .cs-text {
    padding: 0.75rem 0 0.75rem 1.5rem;
  }
  #services-1628 .cs-text:after {
    width: 1px;
    height: 100%;
    margin: 0 1.5rem 0 0;
    order: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  #services-1628 .cs-item {
    grid-column: span 6;
  }
  #services-1628 .cs-picture {
    /* 240px - 420px */
    height: clamp(15rem, 33vw, 26.25rem);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1628 .cs-item {
    grid-column: span 3;
  }
}

@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1628 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services-1628 .cs-title,
  body.dark-mode #services-1628 .cs-text,
  body.dark-mode #services-1628 .cs-h3,
  body.dark-mode #services-1628 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1628 .cs-text,
  body.dark-mode #services-1628 .cs-item-text {
    opacity: .8;
  }
}
                                
/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-712 {
      /* 175px - 200px top */
      padding: clamp(10.9375rem, 10vw, 12.5rem) 1rem 6.25rem;
      position: relative;
      z-index: 1;
  }
  #banner-712 .cs-container {
      text-align: center;
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
  }
  #banner-712 .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-712 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #banner-712 .cs-background:before {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #000;
      opacity: 0.75;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #banner-712 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #banner-712 .cs-background:before {
      opacity: 1;
      background: linear-gradient(
          90.01deg,
          rgba(0, 0, 0, 0.9) 16.86%,
          rgba(0, 0, 0, 0) 100%
      );
  }
}

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-697 {
    padding: var(--sectionPadding);
    background-color: var(--secondary);
    position: relative;
    z-index: 1;
  }
  #cta-697 .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-697 .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;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #cta-697 .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: var(--bodyTextColorWhite);
    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;
  }
  #cta-697 .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-697 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-697 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-697 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }
}