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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1384 {
      padding: var(--sectionPadding);
      /* clips the cs-floater and prevents it from causing overflow issues */
      overflow: hidden;
      background-color: #f7f7f7;
      position: relative;
      z-index: 1;
  }
  #pricing-1384 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 36.5rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 198px - 214px, 48px and 64px + the 150px negative margin to on the cs-flex. We add that negative marign value to the regular standard gap spacing so there's the proper standard spacing between the cs-content and the cs-card to account for the cs-flex pulling the cs-content closer to it with a negative margin */
      gap: clamp(12.375rem, 18vw, 13.375rem);
  }
  #pricing-1384 .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;
  }

  #pricing-1384 .cs-title {
      max-width: 20ch;
  }
  #pricing-1384 .cs-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* 16px - 20px */
      column-gap: clamp(1rem, 2.3vw, 1.25rem);
      /* 166px - 170px */
      row-gap: clamp(10.375rem, 20vw, 10.625rem);
  }
  #pricing-1384 .cs-item {
      text-align: center;
      list-style: none;
      width: 100%;
      margin: 0;
      padding: 0 2.5rem 2.5rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  #pricing-1384 .cs-item.cs-popular .cs-flex {
      background-color: var(--primary);
  }
  #pricing-1384 .cs-item.cs-popular .cs-tag {
      display: flex;
  }
  #pricing-1384 .cs-item.cs-popular .cs-package,
  #pricing-1384 .cs-item.cs-popular .cs-price,
  #pricing-1384 .cs-item.cs-popular .cs-duration {
      color: var(--bodyTextColorWhite);
  }
  #pricing-1384 .cs-item.cs-popular .cs-duration {
      opacity: 0.8;
  }
  #pricing-1384 .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-1384 .cs-item.cs-popular .cs-button-transparent:hover {
      border-color: #1a1a1a;
      background-color: #1a1a1a;
  }
  #pricing-1384 .cs-flex {
      /* 196px - 250px */
      width: clamp(12.25rem, 25vw, 15.625rem);
      height: clamp(12.25rem, 25vw, 15.625rem);
      margin-top: -9.375rem;
      border-radius: 50%;
      background-color: #e8e8e8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
  }
  #pricing-1384 .cs-tag {
      font-size: 0.8125rem;
      color: var(--headerColor);
      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: #fff;
      /* 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-1384 .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-1384 .cs-icon {
      width: 1.25rem;
      height: auto;
      display: flex;
  }
  #pricing-1384 .cs-package {
    color: var(--primary);
      /* 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-1384 .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: var(--primary);
      display: flex;
      justify-content: center;
      align-items: flex-end;
  }
  #pricing-1384 .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-1384 .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-1384 .cs-li {
    
      font-size: 1rem;
      list-style: none;
      line-height: 1.5em;
      font-weight: 600;
      text-align: inherit;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
      display: block;
  }
  .cs-disabled {
    text-decoration: line-through;
    opacity: 0.6; /* Optional: Makes it slightly faded */
    
}

  #pricing-1384 .cs-button-transparent {
      font-size: 1rem;
      line-height: 3.5rem;
      text-decoration: none;
      font-weight: 700;
      overflow: hidden;
      margin: 0;
      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-1384 .cs-button-transparent:before {
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 0%;
      background: #1a1a1a;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #pricing-1384 .cs-button-transparent:hover {
      color: var(--bodyTextColorWhite);
      border-color: #1a1a1a;
  }
  #pricing-1384 .cs-button-transparent:hover:before {
      width: 100%;
  }
  #pricing-1384 .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-1384 .cs-container {
      max-width: 80rem;
  }
  #pricing-1384 .cs-container .cs-card-group {
      flex-direction: row;
      align-items: stretch;
  }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #pricing-1384 {
      background-color: rgba(0, 0, 0, 0.2);
    }
  
    body.dark-mode #pricing-1384 .cs-container {
      background-color: transparent;
    }
  
    body.dark-mode #pricing-1384 .cs-title,
    body.dark-mode #pricing-1384 .cs-package,
    body.dark-mode #pricing-1384 .cs-price,
    body.dark-mode #pricing-1384 .cs-duration {
      color: var(--bodyTextColorWhite);
    }
  
    body.dark-mode #pricing-1384 .cs-item {
      background-color: #2a2a2a;
    }
  
    body.dark-mode #pricing-1384 .cs-flex {
        background-color: var(--primary);
      }
    body.dark-mode #pricing-1384 .cs-ul {
      background-color: transparent;
      border-radius: 8px;
    }
  
    body.dark-mode #pricing-1384 .cs-li {
      color: var(--bodyTextColorWhite);
      /* opacity: 0.9; */
    }
  
    body.dark-mode #pricing-1384 .cs-button-transparent {
      background-color: var(--primary);
      color: #f1f1f1;
      border-color: #666;
    }
  
    body.dark-mode #pricing-1384 .cs-picture img {
      filter: brightness(0.8);
    }
  }
  
                              

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1458 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
  }
  #faq-1458 .cs-container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-1458 .cs-content {
    text-align: left;
    max-width: 39.375rem;
  }
  #faq-1458 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
  }
  #faq-1458 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
  }
  #faq-1458 .cs-faq-item {
    list-style: none;
    width: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
    border-bottom: 1px solid #e8e8e8;
  }
  #faq-1458 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #faq-1458 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1458 .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq-1458 .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq-1458 .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #faq-1458 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1458 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1458 .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: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1458 .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: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1458 .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq-1458 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #faq-1458 .cs-image-group {
    /* we use ems for everything in the container so they pull their value for em from the font size of this parent instead of the root element (html). This font size scales with the view width of the screen and stops when the font size equals the value of 1em (16px) and stops growing */
    font-size: min(2.43vw, 1em);
    width: 37.375em;
    height: 42.375em;
    display: block;
    position: relative;
  }
  #faq-1458 .cs-picture {
    width: 32.625em;
    height: 38.0625em;
    top: 0;
    left: 0;
  }
  #faq-1458 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1458 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #faq-1458 .cs-content {
    width: 55%;
  }
  #faq-1458 .cs-image-group {
    font-size: min(1.4vw, 1em);
    height: auto;
    min-height: 42.375rem;
  }
  #faq-1458 .cs-picture {
    height: 90%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1458 .cs-title,
  body.dark-mode #faq-1458 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1458 .cs-item-p {
    opacity: 0.8;
  }
  body.dark-mode #faq-1458 .cs-faq-item {
    border-bottom: rgba(255, 255, 255, 0.1);
  }
  body.dark-mode #faq-1458 .cs-faq-item.active {
    border-color: #fff;
  }
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button {
    color: var(--secondary);
  }
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button:after {
    background-color: var(--secondary);
  }
  body.dark-mode #faq-1458 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1458 .cs-button:before,
  body.dark-mode #faq-1458 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
}
             /*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-80 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #cta-80:before {
    /* black background on mobile */
    content: "";
    width: 100%;
    height: 50%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #cta-80 .cs-stripes {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* prevent stripes from overlapping sections above and below */
    overflow: hidden;
    /* Makes it so your cursor acts like it doesn't exist */
    pointer-events: none;
  }
  #cta-80 .cs-stripes:before {
    /* Stripe 1 */
    content: "";
    width: 8.25rem;
    height: 68.75rem;
    background: -moz-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0.45) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0.45) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.45) 100%);
    opacity: 0.08;
    transform: rotate(-25deg);
    position: absolute;
    display: block;
    bottom: -9.375rem;
    /* position in the middle, 50% from the left, no matter how wide 
                   the screen gets, it will be placed on the center line of the div */
    left: 50%;
    /* push X amount of pixels from this 50% midpoint */
    margin-left: -18.75rem;
  }
  #cta-80 .cs-stripes:after {
    /* Stripe 2 */
    content: "";
    width: 8.25rem;
    height: 75rem;
    background: -moz-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0.45) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0.45) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.45) 100%);
    opacity: 0.08;
    transform: rotate(-25deg);
    position: absolute;
    display: block;
    bottom: -6.25rem;
    /* position in the middle, 50% from the left, no matter how wide 
                   the screen gets, it will be placed on the center line of the div */
    left: 50%;
    /* push X amount of pixels from this 50% midpoint */
    margin-left: -10.625rem;
  }
  #cta-80 .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-80 .cs-content {
    /* set text align to left or center if content needs to be aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* aligns the content */
    align-items: center;
  }
  #cta-80 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #cta-80 .cs-text {
    color: var(--bodyTextColorWhite);
    margin-bottom: 2rem;
    opacity: 0.8;
  }
  #cta-80 .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;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta-80 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cta-80 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-80 .cs-picture {
    width: 100%;
    max-width: 28.5625rem;
    margin: auto;
    position: relative;
    display: block;
    /* moves it to the 1st position at the top */
    order: -1;
    aspect-ratio: 300/475;
  }
  #cta-80 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 0.5rem 0.5rem 0 0;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-80 {
    text-align: left;
    /* 144px - 225px - creates the white space above */
    margin-top: clamp(9rem, 9.9vw, 14.0625rem);
    padding-bottom: 0;
    position: relative;
    z-index: 1;
    background-color: var(--primary);
  }
  #cta-80:before {
    display: none;
  }
  #cta-80 .cs-stripes:before {
    top: -9.375rem;
    bottom: auto;
    margin-left: -7.5rem;
  }
  #cta-80 .cs-stripes:after {
    top: -6.25rem;
    bottom: auto;
    margin-left: -15.9375rem;
  }
  #cta-80 .cs-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
  }
  #cta-80 .cs-content {
    text-align: left;
    width: 50%;
    max-width: 39.375rem;
    margin: 0;
    /* 60px - 100px - this gives us the space on the bottom without padding  */
    margin-bottom: clamp(3.75rem, 6.2vw, 6.25rem);
    align-items: flex-start;
  }
  #cta-80 .cs-picture {
    width: 41vw;
    max-width: 28.5625rem;
    /* height is a percentage of parent container height. When the cs-content height changes from extra text, the height of the image adjusts. Since the container is now longer/shorter, 150% of that height with also be longer/shorter */
    height: clamp(145%, 44vw, 160%);
    /* 500px - 578px */
    max-height: clamp(31.25rem, 44vw, 36.125rem);
    margin: 0;
    /* position absolute so we can have the cs-content centered inside the black section and have it respond to different heights of the cs-content */
    position: absolute;
    right: 0;
    bottom: 0;
    /* reset */
    aspect-ratio: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-80 {
    /* 144px - 200px */
    margin-top: clamp(9rem, 12.9vw, 12.5rem);
  }
  #cta-80 .cs-stripes:before {
    margin-left: -13.75rem;
    width: 12.1875rem;
  }
  #cta-80 .cs-stripes:after {
    margin-left: -26.875rem;
    width: 12.125rem;
  }
}