@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600;800&display=swap");

/*-- -------------------------- -->
<---          Home Page         -->
<--- -------------------------- -*/

.sd_hero_wrapper {
  background: rgb(17, 31, 150);
  background: linear-gradient(
    90deg,
    rgba(17, 31, 150, 1) 0%,
    rgba(1, 149, 215, 1) 100%
  );
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-855 {
    /* 116px - 164px top */
    /* 60px - 100px  bottom */
    padding: clamp(7.25rem, 16.82vw, 10.25rem) 1rem
      clamp(3.75rem, 7.82vw, 6.25rem);
    /* clips the svg wave from overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  #hero-855 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
  }
  #hero-855 .cs-content {
    max-width: 39.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #hero-855 .cs-topper {
    font-size: 1.2rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: block;
    margin-left: 4px;
    color: var(--secondary);
  }
  #hero-855 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.3125rem);
    font-weight: 600;
    line-height: 1.2em;
    text-align: center;
    /* 23 characters including spaces wide */
    max-width: 23ch;
    margin: 0 0 1rem 0;
    color: #fff;
    position: relative;
  }
  #hero-855 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 33.1875rem;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
    color: #fff;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-855 {
    text-align: left;
  }
  #hero-855 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #hero-855 .cs-content {
    width: 40vw;
    /* prevents flex-box from squishing it */
    flex: none;
    align-items: flex-start;
  }
  #hero-855 .cs-title,
  #hero-855 .cs-text {
    text-align: left;
  }
  #hero-855 .cs-picture {
    /* 623px - 814px */
    height: clamp(38.9375rem, 60vw, 50.875rem);
  }
  #hero-855 .cs-wave {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/* Waves  */

.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px; /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}

.content {
  position: relative;
  height: 20vh;
  text-align: center;
  background-color: white;
}

/* Waves Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* What we do */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-368 {
    padding: var(--sectionPadding);
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-4px);
    }
    70% {
      transform: translateY(4px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes InAndOut {
    0% {
      transform: translateY(3.75rem) scale(1);
      opacity: 1;
    }
    30% {
      transform: translateY(1.875rem) scale(0.8);
      opacity: 1;
    }
    60% {
      transform: translateY(0.625rem) scale(0.5);
      opacity: 0.2;
    }
    100% {
      transform: translateY(0rem) scale(0.2);
      opacity: 0;
    }
  }
  @keyframes InAndOut2 {
    0% {
      transform: translateY(4.375rem) scale(1);
      opacity: 1;
    }
    30% {
      transform: translateY(2.5rem) scale(0.8);
      opacity: 1;
    }
    60% {
      transform: translateY(1.25rem) scale(0.6);
      opacity: 1;
    }
    100% {
      transform: translateY(0rem) scale(0.4);
      opacity: 0;
    }
  }
  #services-368 .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-368 .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-368 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-368 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    /* 20px - 40px top & bottom */
    /* 16px - 32px left & right */
    padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
    border-radius: 1rem;
    border: 1px solid #e8e8e8;
    box-sizing: border-box;
    transition: background-color 0.3s;
  }
  #services-368 .cs-item:hover {
    background-color: var(--primary);
  }
  #services-368 .cs-item:hover .cs-icon-wrapper:before,
  #services-368 .cs-item:hover .cs-bubble:before,
  #services-368 .cs-item:hover .cs-icon-wrapper:after,
  #services-368 .cs-item:hover .cs-bubble:after {
    background-color: #449ffc;
  }
  #services-368 .cs-item:hover .cs-icon {
    /* makes it white on hover */
    filter: grayscale(1) brightness(1000%);
  }
  #services-368 .cs-item:hover .cs-h3 {
    color: #fff;
  }
  #services-368 .cs-item:hover .cs-item-text {
    color: #fff;
  }
  #services-368 .cs-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #services-368 .cs-icon-wrapper {
    width: 6.125rem;
    height: 7.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
  }
  #services-368 .cs-icon-wrapper:before {
    /* Small Bubble */
    content: "";
    width: 1.6875rem;
    height: 1.6875rem;
    border-radius: 50%;
    background: #e5f2ff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0.1875rem;
    animation-name: InAndOut;
    animation-duration: 1.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transition: background-color 0.3s;
  }
  #services-368 .cs-icon-wrapper:after {
    /* Small Bubble */
    content: "";
    width: 1.6875rem;
    height: 1.6875rem;
    border-radius: 50%;
    background: #e5f2ff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0.6875rem;
    right: 0.3125rem;
    animation-name: InAndOut2;
    animation-duration: 2s;
    animation-delay: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transition: background-color 0.3s;
  }
  #services-368 .cs-bubble {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  #services-368 .cs-bubble:before {
    /* Big Bubble */
    content: "";
    width: 3.9375rem;
    height: 3.9375rem;
    border-radius: 50%;
    background: #e5f2ff;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0.25rem;
    left: 0rem;
    animation-name: floatAnimation2;
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    transition: background-color 0.3s;
  }
  #services-368 .cs-bubble:after {
    /* Big Bubble */
    content: "";
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background: #e5f2ff;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.25rem;
    right: 0rem;
    animation-name: floatAnimation2;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    transition: background-color 0.3s;
  }
  #services-368 .cs-icon {
    width: 4.5rem;
    height: auto;
    position: relative;
    z-index: 10;
  }
  #services-368 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #services-368 .cs-item-text {
    /* 14px - 16px */
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
  #services-368 .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;
  }
  #services-368 .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;
  }
  #services-368 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-368 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  #services-368 .cs-item {
    /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of cards, they don't stay centered, they align with their grid lines. This way its more FLEX-ible*/
    width: clamp(31.85%, 30.5vw, 32.28%);
  }
}

/* Our Process */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-276 {
    padding: var(--sectionPadding);
  }
  #steps-276 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-276 .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-276 .cs-title {
    max-width: 20ch;
  }

  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #steps-276 .cs-container {
      max-width: 80rem;
    }
  }
}

/* Pricing */

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

.pricing {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin: 4em auto;
}
.pricing-item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  text-align: center;
  -webkit-flex: 0 1 330px;
  flex: 0 1 330px;
}
.pricing-action {
  color: inherit;
  border: none;
  background: none;
}
.pricing-action:focus {
  outline: none;
}

.pricing-feature-list {
  text-align: left;
}

.pricing-palden .pricing-item {
  font-family: "Open Sans", sans-serif;
  background: #fff;
  box-shadow: 0 0 10px rgba(46, 59, 125, 0.23);
  border-radius: 20px 20px 10px 10px;
  margin: 1em;
}

@media screen and (min-width: 66.25em) {
  .pricing-palden .pricing-item {
    margin: 1em -0.5em;
  }

  .pricing-palden .pricing__item--featured {
    margin: 0;
    z-index: 10;
    box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
  }
}

.pricing-palden .pricing-deco {
  border-radius: 10px 10px 0 0;
  background: var(--primary);
  padding: 4em 0 9em;
  position: relative;
}
.pricing-palden .pricing-deco-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160px;
}
.pricing-palden .pricing-title {
  font-weight: bold;
  margin: 0;
  color: #fff;
}
.pricing-palden .deco-layer {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
.pricing-palden .pricing-item:hover .deco-layer--1 {
  -webkit-transform: translate3d(15px, 0, 0);
  transform: translate3d(15px, 0, 0);
}
.pricing-palden .pricing-item:hover .deco-layer--2 {
  -webkit-transform: translate3d(-15px, 0, 0);
  transform: translate3d(-15px, 0, 0);
}
.pricing-palden .icon {
  font-size: 2.5em;
}
.pricing-palden .pricing-price {
  font-size: 5em;
  font-weight: bold;
  padding: 0;
  color: #fff;
  margin: 0 0 0.2em 0;
  line-height: 0.7;
}
.pricing-palden .pricing-currency {
  font-size: 0.25em;
  vertical-align: top;
}
.pricing-palden .pricing-period {
  font-size: 0.2em;
  padding: 0 0 0 0.5em;
  font-style: italic;
}
.pricing-palden .pricing__sentence {
  font-weight: bold;
  margin: 0 0 1em 0;
  padding: 0 0 0.5em;
}
.pricing-palden .pricing-feature-list {
  font-family: Poppins;
  margin: 0;
  padding: 0.25em 0 2.5em;
  list-style: none;
  text-align: center;
}
.pricing-palden .pricing-feature {
  padding: 0.8em 0;
  border-bottom: 1px solid #c7cbd4;
  width: 70%;
  margin: 0 auto;
}
.pricing-palden .pricing-action {
  font-weight: bold;
  margin: auto 3em 2em 3em;
  padding: 1em 2em;
  color: #fff;
  /* border-radius: 30px; */
  background: var(--secondary);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.pricing-palden .pricing-action:hover,
.pricing-palden .pricing-action:focus {
  background-color: var(--accent);
}

.pricing-palden .pricing__item--featured .pricing-deco {
  padding: 5em 0 8.885em 0;
}

/*-- -------------------------- -->
<---          About Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #content-page-1399 {
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #content-page-1399 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 4vw, 4rem);
    position: relative;
  }
  #content-page-1399 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 46.125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #content-page-1399 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    width: 100%;
    max-width: 100%;
    margin: 0 0 2rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #content-page-1399 h2,
  #content-page-1399 h3,
  #content-page-1399 h4,
  #content-page-1399 h5,
  #content-page-1399 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #content-page-1399 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #content-page-1399 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #content-page-1399 h4,
  #content-page-1399 h5,
  #content-page-1399 h6 {
    font-size: 1.25rem;
  }
  #content-page-1399 .cs-button-solid {
    margin-bottom: 2rem;
  }
  #content-page-1399 .cs-no-margin {
    margin: 0;
  }
  #content-page-1399 .cs-color {
    color: var(--primary);
  }
  #content-page-1399 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
  }
  #content-page-1399 p:last-of-type {
    margin-bottom: 2rem;
  }
  #content-page-1399 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    filter: brightness(120%);
  }
  #content-page-1399 ol,
  #content-page-1399 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #content-page-1399 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #content-page-1399 ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  #content-page-1399 img {
    width: 100%;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-image-group {
    width: 100%;
    display: none;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.6vw, 1.25rem);
    position: relative;
  }
  #content-page-1399 .cs-flex {
    position: relative;
  }
  #content-page-1399 .cs-background {
    width: 100%;
    height: 100%;
    /* 32px - 48px */
    border-radius: clamp(2rem, 4vw, 3rem);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #content-page-1399 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #content-page-1399 .cs-box {
    text-align: left;
    width: 100%;
    max-width: 12.5rem;
    padding: 2rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--primary);
    /* 48px - 80px */
    border-radius: 2rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: absolute;
    /* 12px - 20px */
    left: clamp(0.75rem, 1.9vw, 1.5rem);
    /* 12px - 20px */
    bottom: clamp(0.75rem, 1.9vw, 1.5rem);
  }
  #content-page-1399 .cs-box-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #content-page-1399 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.265rem, 1fr));
    align-items: center;
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #content-page-1399 .cs-item {
    list-style: none;
    /* 16px - 24px */
    padding: clamp(1rem, 3vw, 1.5rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 1rem;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1399 .cs-item:before {
    display: none;
  }
  #content-page-1399 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #content-page-1399 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #content-page-1399 .cs-item-text:last-of-type {
    margin: 0;
  }
  #content-page-1399 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1399 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #content-page-1399 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
  #content-page-1399 .cs-bubbles {
    font-size: min(2.5vw, 0.7em);
    width: 36.375em;
    height: 34.8125em;
    display: none;
    position: absolute;
    /* changes to auto at larger desktop */
    right: -16.25em;
    /* changes to -220px at large desktop */
    bottom: -3.125em;
    z-index: -1;
  }
  #content-page-1399 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 29em;
    height: 29em;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #content-page-1399 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 22.875em;
    height: 22.875em;
    background: var(--primary);
    opacity: 0.15;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #content-page-1399 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #content-page-1399 .cs-content {
    width: 50%;
    max-width: 42.125rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #content-page-1399 .cs-image-group {
    width: 44%;
    max-width: 33.875rem;
    display: flex;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #content-page-1399 .cs-content {
    width: 53%;
  }
  #content-page-1399 .cs-image-group {
    width: 43%;
  }
  #content-page-1399 .cs-box {
    display: flex;
  }
  #content-page-1399 .cs-bubbles {
    font-size: 1em;
    margin-left: 37.5rem;
    display: block;
    right: auto;
    left: 50%;
    bottom: -13.75rem;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-880 {
    padding: var(--sectionPadding);
  }
  #services-880 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-880 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #services-880 .cs-title {
    /* max width of 18 characters, includes spaces between words */
    max-width: 18ch;
  }
  #services-880 .cs-text {
    margin-bottom: 1rem;
  }
  #services-880 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #services-880 .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;
  }
  #services-880 .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;
  }
  #services-880 .cs-button-solid:hover:before {
    width: 100%;
  }
  #services-880 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  #services-880 .cs-item {
    text-align: center;
    list-style: none;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #f7f7f7;
    grid-column: span 4;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #services-880 .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #services-880 .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.1);
  }
  #services-880 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-880 .cs-link {
    text-decoration: none;
    padding: 0 0 1.25rem 0;
    display: block;
  }
  #services-880 .cs-picture {
    width: 100%;
    height: 12.5rem;
    margin-bottom: 1.25rem;
    background-color: #4a92f7;
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }
  #services-880 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services-880 .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    transition: color 0.3s;
  }
  #services-880 .cs-item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
    padding: 0 1.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-880 .cs-container {
    max-width: 80rem;
  }
  #services-880 .cs-item {
    grid-column: span 2;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #services-880 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #services-880 .cs-card-group {
    width: 50%;
    max-width: 39.375rem;
    /* offsets by the same amount the cards are translated */
    margin-bottom: 3.75rem;
    grid-template-columns: repeat(2, 1fr);
  }
  #services-880 .cs-item {
    grid-column: span 1;
  }
  #services-880 .cs-item:nth-of-type(1),
  #services-880 .cs-item:nth-of-type(3) {
    transform: translateY(3.75rem);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1693 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
    position: relative;
    overflow: hidden;
  }
  #cta-1693 .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-1693 .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;
    gap: 1.5rem;
  }
  #cta-1693 .cs-title {
    max-width: 30ch;
    margin: 0;
    color: #fff;
  }
  #cta-1693 .cs-graphic {
    width: 23.25rem;
    height: 23.25rem;
    opacity: 0.1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #cta-1693 .cs-graphic-1 {
    left: -16.3125rem;
  }
  #cta-1693 .cs-graphic-2 {
    right: -16.3125rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-1693 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: center;
  }
  #cta-1693 .cs-graphic-1 {
    left: -7.8125rem;
  }
  #cta-1693 .cs-graphic-2 {
    right: -7.8125rem;
  }
}

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

/* Stats */

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

  #stats-4 .cs-card-group {
    width: 100%;
    max-width: 31.25rem;
    padding: 0 1.25rem;
    /* 40px - 68px */
    padding-top: clamp(2.5rem, 5.7vw, 4.25rem);
    /* 48px - 80px */
    padding-bottom: clamp(3rem, 6.5vw, 5rem);
    margin: 0;
    background: #fff;
    border-top: 8px solid var(--primaryLight);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.4375em;
    box-shadow: 0 1.25rem 2.5rem 0 rgba(0, 0, 0, 0.05);
    /* prevents padding from adding to the width of the container */
    box-sizing: border-box;
  }
  #stats-4 .cs-item {
    text-align: center;
    list-style: none;
  }
  #stats-4 .cs-number {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 4.7vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    /* 4px - 8px */
    margin-bottom: clamp(0.25rem, 0.78vw, 0.5rem);
    color: var(--primary);
    display: block;
  }
  #stats-4 .cs-stat-text {
    /* 16px - 25px */
    font-size: clamp(1rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
  }
  #stats-4 .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;
  }
  #stats-4 .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;
  }
  #stats-4 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* In-between - 500px */
@media only screen and (min-width: 31.25rem) {
  #stats-4 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 3.4375rem;
    column-gap: 6.25rem;
  }
  #stats-4 .cs-item {
    /* sets even spacing */
    width: 7.8125rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #stats-4:before {
    height: 37.5%;
  }
  #stats-4 .cs-card-group {
    max-width: 100%;
    justify-content: space-around;
  }
  #stats-4 .cs-item {
    /* reset width */
    width: auto;
  }
}