/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1262 {
    padding: var(--sectionPadding);
    /* clips svg graphic from overflowing the section */
    overflow: hidden;
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
  }
  mark {
    display: inline-block;
    line-height: 0em;
    padding-bottom: 0.5em;
    background-color: var(--primary);
  }
  #pricing-1262 .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, changes to 20px at large desktop */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    perspective: 1100px;
    padding-top: 2em;
  }
  #pricing-1262 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 40.1875rem;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #pricing-1262 .cs-text {
    margin-bottom: 1rem;
  }
  #pricing-1262 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #pricing-1262 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    overflow: hidden;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-1262 .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;
  }
  #pricing-1262 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-1262 .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: #f1f1f4;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #pricing-1262 .cs-plan {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing-1262 .cs-plan:hover {
    cursor: pointer;
  }
  #pricing-1262 .cs-toggle {
    width: 3.25rem;
    height: 2rem;
    border-radius: 2.5rem;
    background-color: var(--primaryLight);
    margin: 0 1.5rem;
    position: relative;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #pricing-1262 .cs-toggle:hover {
    cursor: pointer;
  }
  #pricing-1262 .cs-toggle.active:before {
    opacity: 1;
  }
  #pricing-1262 .cs-toggle.active .cs-toggle-switch {
    left: 1.4375rem;
  }
  #pricing-1262 .cs-toggle:before {
    /* top right box */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    border-radius: 2.5rem;
    transition: opacity 0.3s;
  }
  #pricing-1262 .cs-toggle-switch {
    width: 1.625rem;
    height: 1.625rem;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.1875rem;
    transition: left 0.3s;
    background: #fff;
  }
  #pricing-1262 .cs-ul-wrapper {
    position: relative;
    z-index: 10;
    perspective: 1200px;
  }
  #pricing-1262 .cs-ul-wrapper.cs-active .cs-option1 {
    transform: rotateY(180deg);
  }
  #pricing-1262 .cs-ul-wrapper.cs-active .cs-option2 {
    transform: rotateY(360deg);
  }
  #pricing-1262 .cs-option2 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
  }
  #pricing-1262 .cs-option2 .cs-item {
    border-radius: 0 1.5rem 0 0;
  }
  #pricing-1262 .cs-option2 .cs-item:nth-of-type(2) {
    border-radius: 0 0 0 1.5rem;
  }
  #pricing-1262 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border-radius: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    transition: transform 0.8s;
  }
  #pricing-1262 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 1.5rem 1.5rem;
    background-color: #fff;
    border: 1px solid #dad9e3;
    border-radius: 1.5rem 0 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    z-index: 1;
  }
  #pricing-1262 .cs-item:nth-of-type(2) {
    border-radius: 0 0 1.5rem 0;
  }
  #pricing-1262 .cs-item.cs-popular {
    background-color: #14142b;
    border: none;
  }
  #pricing-1262 .cs-item.cs-popular .cs-popular-tag {
    display: inline-flex;
  }
  #pricing-1262 .cs-item.cs-popular .cs-package,
  #pricing-1262 .cs-item.cs-popular .cs-price,
  #pricing-1262 .cs-item.cs-popular .cs-duration,
  #pricing-1262 .cs-item.cs-popular .cs-item-text,
  #pricing-1262 .cs-item.cs-popular .cs-li {
    color: var(--bodyTextColorWhite);
  }
  #pricing-1262 .cs-item.cs-popular .cs-item-text,
  #pricing-1262 .cs-item.cs-popular .cs-li {
    opacity: 0.8;
  }
  #pricing-1262 .cs-item.cs-popular .cs-icon {
    filter: none;
    opacity: 1;
  }
  #pricing-1262 .cs-item.cs-popular .cs-button-transparent {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border: none;
    transition: color 0.3s;
  }
  #pricing-1262 .cs-item.cs-popular .cs-button-transparent:before {
    background-color: #fff;
  }
  #pricing-1262 .cs-item.cs-popular .cs-button-transparent:hover {
    color: var(--primary);
  }
  #pricing-1262 .cs-popular-tag {
    font-size: 0.875rem;
    line-height: 1.2em;
    text-align: center;
    width: auto;
    margin: 0;
    padding: 0.25rem 0.75rem;
    box-sizing: border-box;
    color: #ff9b7d;
    overflow: hidden;
    border-radius: 0.25rem;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* same as cs-item padding top */
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
  }
  #pricing-1262 .cs-popular-tag:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.16;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #pricing-1262 .cs-picture {
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #pricing-1262 .cs-picture:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #pricing-1262 .cs-package {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
  #pricing-1262 .cs-price {
    font-size: 2.4375rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 900;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #pricing-1262 .cs-duration {
    font-size: 0.875rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--headerColor);
  }
  #pricing-1262 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 2rem;
    color: var(--bodyTextColor);
  }
  #pricing-1262 .cs-ul {
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1262 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1262 .cs-li-bold {
    /* 14px - 16px */
    font-weight: 1000;
  }
  #pricing-1262 .cs-li.cs-disabled {
    opacity: 0.5;
  }
  #pricing-1262 .cs-li.cs-disabled .cs-icon {
    filter: grayscale(1) brightness(300%);
  }
  #pricing-1262 .cs-icon {
    width: 1.5rem;
    height: auto;
    filter: grayscale(1);
    opacity: 0.5;
    display: block;
  }
  #pricing-1262 .button-solid {
    width: 100%;
  }
  #pricing-1262 .cs-button-transparent {
    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(--primary);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: transparent;
    border: 1px solid 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;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  }
  #pricing-1262 .cs-button-transparent: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;
  }
  #pricing-1262 .cs-button-transparent:hover {
    color: #fff;
    border-color: #000;
    background-color: #000;
  }
  #pricing-1262 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #pricing-1262 .cs-waves-wrapper {
    width: 100vw;
    height: 65%;
    display: block;
    position: absolute;
    bottom: -6.25rem;
    left: 50%;
    z-index: -10;
    transform: translateX(-50%);
  }
  #pricing-1262 .cs-waves-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1262 .cs-container {
    max-width: 80rem;
    /* remove the position so the svg waves wrapper can be positioned relative to the section container for tablet so it hugs the right edge of the screen. We set it back to relative at 1024px so it can then be positioned relative to the container again so it hugs the right edge of the container with the pricing cards */
    position: initial;
  }
  #pricing-1262 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  #pricing-1262 .cs-option2 .cs-item {
    border-radius: 1.5rem 0 0 1.5rem;
  }
  #pricing-1262 .cs-option2 .cs-item:nth-of-type(2) {
    border-radius: 0 1.5rem 1.5rem 0;
  }
  #pricing-1262 .cs-item {
    width: 50%;
    border-radius: 1.5rem 0 0 1.5rem;
  }
  #pricing-1262 .cs-item:nth-of-type(2) {
    border-radius: 0 1.5rem 1.5rem 0;
  }
  #pricing-1262 .cs-waves-wrapper {
    /* changes to 740px at large desktop */
    width: 55vw;
    height: 100%;
    left: auto;
    right: 0;
    bottom: auto;
    top: 0;
    transform: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1262 .cs-container {
    max-width: 80rem;
    position: relative;
    z-index: 1;
  }
  #pricing-1262 .cs-waves-wrapper {
    height: 140%;
    top: 50%;
    transform: translateY(-50%);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #pricing-1262 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.25rem;
  }
  #pricing-1262 .cs-ul-wrapper {
    width: 62%;
    max-width: 46.25rem;
    flex: none;
  }
  #pricing-1262 .cs-waves-wrapper {
    max-width: 46.25rem;
    width: 100%;
  }
}


/*-- -------------------------- -->
<---         CS-Content         -->
<--- -------------------------- -*/

/* you can place this CSS group in your global stylesheet that is loaded on every page of the site so all you need to do is copy and paste the HTML into any section and it will all work. Or piece it inside the media queries in whatever section you want to add it to. You can also remove the cs-topper, cs-title, and cs-text and if they aren't already in your global stylesheet you can paste them outside these media queries so all cs-topper, cs-title, and cs-text on your site will pull from 1 place. */

/* Mobile */
@media only screen and (min-width: 0rem) {
  #cs-content-831 {
    padding-top: 10em;
      /* 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;
  }
}