/* Page-specific font override */
@media only screen and (min-width: 0rem) {
    body {
        font-family: 'Roboto', Arial, sans-serif;
    }
}


/*-- -------------------------- -->
<---           Video            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #video-548 {
        padding: var(--sectionPadding);
        padding-top: 4rem;   /* adjust this value */
    }
    
    #video-548 .cs-video-only {
        padding-top: 10rem;
    }

    #video-548 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(1rem, 2vw, 1rem);
    }
    #video-548 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
        gap: clamp(1rem, 2vw, 2rem);
    }

    #video-548 .cs-big-link {
        width: 100%;
        /* 430px - 580px */
        height: clamp(26.875rem, 43vw, 36.25rem);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }


    /* Smaller, centered video player */
    #video-548 .cs-big-link {
    /* instead of the fixed height clamp(...) */
    width: 100%;
    max-width: clamp(320px, 70vw, 720px); /* cap size; tweak 720px to taste */
    aspect-ratio: 16 / 9;                 /* perfect video rectangle */
    height: auto;                         /* let aspect-ratio control height */
    margin: 0 auto;                       /* center it */
    position: relative;                   /* for absolute children */
    overflow: hidden;                     /* clean edges on cover */
    border-radius: 12px;                  /* optional: nicer look */
  }

    /* Make background image & video fill the new box */
    #video-548 .cs-background,
    #video-548 .cs-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    }

    #video-548 .cs-background img,
    #video-548 .cs-video {
    object-fit: cover;
    }

    /* Slightly smaller play button so it fits the smaller frame */
    #video-548 .cs-link-icon {
    width: clamp(3.5rem, 8vw, 4.5rem);
    height: clamp(3.5rem, 8vw, 4.5rem);
    }

    #video-548 .cs-big-link:hover .cs-background img {
        transform: scale(1.1);
    }
    #video-548 .cs-background {
        width: 100%;
        height: 100%;
        /* clips the img from overflowing the container on hover */
        overflow: hidden;
        display: block;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #video-548 .cs-background:before {
        /* color overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0.72;
        background-blend-mode: multiply;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #video-548 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        z-index: -1;
        transition: transform 0.7s;
    }
    #video-548 .cs-link-icon {
        /* 80px - 110px */
        width: clamp(3.5rem, 8vw, 4.5rem);
        height: clamp(3.5rem, 8vw, 4.5rem);
        border-radius: 50%;
        position: absolute;
        z-index: 10;
        transition:
            transform 0.3s,
            box-shadow 0.3s;
    }
    #video-548 .cs-link-icon:hover {
        transform: scale(1.1);
        box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 29px 0px;
    }

    /* Ensure embedded YouTube video fits the frame */
    #video-548 .cs-yt {
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Self-hosted video styles */
    #video-548 .cs-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
        background: #000;
    }

   
    #video-548 .cs-text {
        font-size: 1.55rem;
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        max-width: auto;
        margin: 0 auto;
        color: var(--bodyTextColor);
    }

    #video-548 .cs-text-special {
      font-size: 1.55rem;
      line-height: 1.5em;
      text-align: left;

      width: 100%;
      max-width: auto;
      margin: 0 auto;
      color: var(--bodyTextColor);
  }


    #video-548 .cs-title {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.2em;
        text-align: center;
        max-width: auto;
        margin: 0 auto;
        color: var(--headerColor);
        position: relative;
      }

    /* Hide overlay and play icon when playing */
    #video-548 .cs-big-link.is-playing .cs-background,
    #video-548 .cs-big-link.is-playing .cs-link-icon {
        display: none;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #video-548 .cs-topper {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #video-548 .cs-title,
    body.dark-mode #video-548 .cs-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #video-548 .cs-text {
        opacity: 0.8;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-2418 {
    padding: var(--sectionPadding);
    /* padding-top resets at 768px */
    padding-top: 25rem;
    position: relative;
    overflow: hidden;
    /* figure */
    /* blockquote */
    /* figcaption */
    /* ornamental 'quote' graphic  */
    /* background image */
  }
  #reviews-2418 .cs-container {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2vw, 1rem);
  }
  #reviews-2418 .cs-card {
    width: 100%;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    /* 24px - 40px */
    padding: clamp(1rem, 2vw, 1rem);
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  #reviews-2418 .cs-card:before {
    /* background color */
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #reviews-2418 .cs-title {
    margin-bottom: 1rem;
  }
  #reviews-2418 .cs-blockquote {
    width: 100%;
    margin: 0;
  }
  #reviews-2418 .cs-stars {
    width: 8.5rem;
    height: auto;
    margin-bottom: 0.5rem;
    display: block;
  }
  #reviews-2418 .cs-review {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1rem);
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: var(--bodyTextColor);
    z-index: 1;
  }
  #reviews-2418 .cs-review:last-of-type {
    margin-bottom: 1rem;
  }
  #reviews-2418 .cs-info {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    position: relative;
  }
  #reviews-2418 .cs-profile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
  }
  #reviews-2418 .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
  }
  #reviews-2418 .cs-desc {
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    display: block;
    color: #fff
  }
  #reviews-2418 .cs-profile-graphic {
    width: 20vw;
    max-width: 5rem;
    height: auto;
    /* controls fill color */
    color: var(--primary);
    opacity: 0.2;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
  #reviews-2418 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #reviews-2418 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    object-position: center;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-2418 {
    /* resetting the padding */
    padding: var(--sectionPadding);
  }
  #reviews-2418 .cs-card {
    width: 62%;
    max-width: 46.125rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-2418 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #reviews-2418 .cs-review,
  body.dark-mode #reviews-2418 .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-2418 .cs-card {
    background-color: var(--dark);
  }
}
                                
/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1405 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
    #list-1405 {
        width: 100%;
        margin: 0 0 1.5rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    #list-1405 .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;
    }
    #list-1405 .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;
    }
}
/* Dark Mode, copy and paste only the styles inside the #list-1405 brackets into your section's dark mode media query */
@media only screen and (min-width: 0rem) {
    body.dark-mode #list-1405 .cs-li {
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    body.dark-mode #list-1405 .cs-icon {
        filter: grayscale(1) brightness(1000%);
    }
}
                                

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-2013 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
  }
  #steps-2013::before {
    /* backgorund color */
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: 0.05;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #steps-2013 .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-2013 .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-2013 .cs-text {
    max-width: 56.25rem;
  }
  #steps-2013 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    position: relative;
  }
  #steps-2013 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    padding: clamp(1.5rem, 3.1vw, 2rem) clamp(1rem, 2.3vw, 2rem);
    background-color: #fff;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 12;
    position: relative;
    transition: border 0.3s;
  }
  #steps-2013 .cs-item:hover {
    border: 1px solid var(--primary);
  }
  #steps-2013 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #steps-2013 .cs-icon {
    width: 3rem;
    height: auto;
    margin-bottom: 1rem;
    display: block;
  }
  #steps-2013 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #steps-2013 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColor);
  }
  #steps-2013 .cs-number-wrapper {
    width: 3rem;
    height: 3rem;
    margin-top: auto;
    margin-bottom: -1.5rem;
    padding: 0.625rem;
    background-color: var(--headerColor);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  #steps-2013 .cs-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
  }
  #steps-2013 .cs-picture {
    width: 100%;
    /* 140px - 180px */
    height: clamp(8.75rem, 18vw, 11.25rem);
    display: block;
    flex: none;
  }
  #steps-2013 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-2013 .cs-container {
    max-width: 80rem;
  }
  #steps-2013 .cs-item {
    grid-column: span 4;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-2013 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #steps-2013 .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #steps-2013 .cs-title,
  body.dark-mode #steps-2013 .cs-text,
  body.dark-mode #steps-2013 .cs-item-text,
  body.dark-mode #steps-2013 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-2013 .cs-text,
  body.dark-mode #steps-2013 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #steps-2013 .cs-number-wrapper {
    background-color: var(--primary);
  }
  body.dark-mode #steps-2013 .cs-picture {
    border-color: var(--dark);
  }
}
                                
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1194 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
  }
  #faq-1194 .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-1194 .cs-content {
    text-align: left;
    max-width: 39.375rem;
  }
  #faq-1194 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 0 2rem 0;
  }
  #faq-1194 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  #faq-1194 .cs-faq-item {
    list-style: none;
    width: 100%;
    background-color: #f7f7f7;
    padding: 1.25rem;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
  }
  #faq-1194 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #faq-1194 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1194 .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq-1194 .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq-1194 .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #faq-1194 .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-1194 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1194 .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-1194 .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-1194 .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq-1194 .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-1194 .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-1194 .cs-picture {
    display: block;
    position: absolute;
    z-index: 1;
  }
  #faq-1194 .cs-picture1 {
    width: 32.625em;
    height: 38.0625em;
    top: 0;
    right: 0;
  }
  #faq-1194 .cs-picture1 img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #faq-1194 .cs-picture2 {
    width: 25em;
    height: 40.625em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    bottom: 0;
    left: 0;
  }
  #faq-1194 .cs-picture2 img {
    width: auto;
    height: 100%;
    max-height: 40.625rem;
    object-fit: contain;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1194 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #faq-1194 .cs-content {
    width: 55%;
  }
  #faq-1194 .cs-image-group {
    font-size: min(1.4vw, 1em);
    height: 42.375rem;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #faq-1194 .cs-picture1 {
    height: 90%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1194 .cs-title,
  body.dark-mode #faq-1194 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1194 .cs-item-p {
    opacity: 0.8;
  }
  body.dark-mode #faq-1194 .cs-faq-item {
    background-color: rgba(0, 0, 0, 0.4);
  }
  body.dark-mode #faq-1194 .cs-faq-item.active {
    border-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1194 .cs-faq-item.active .cs-button {
    color: var(--secondary);
  }
  body.dark-mode #faq-1194 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-1194 .cs-faq-item.active .cs-button:after {
    background-color: var(--secondary);
  }
  body.dark-mode #faq-1194 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1194 .cs-button:before,
  body.dark-mode #faq-1194 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
}
                                
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1193 {
      padding: var(--sectionPadding);
      position: relative;
      overflow: hidden;
  }
  #faq-1193 .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-1193 .cs-content {
      text-align: left;
      max-width: 39.375rem;
  }

  #faq-1193 .cs-title {
      /* 20 characters wide including spaces */
      max-width: 20ch;
      margin: 0 0 2rem 0;
  }
  #faq-1193 .cs-faq-group {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
  }
  #faq-1193 .cs-faq-item {
      list-style: none;
      width: 100%;
      background-color: #f7f7f7;
      padding: 1.25rem;
      box-sizing: border-box;
      transition: border-bottom 0.3s;
  }
  #faq-1193 .cs-faq-item.active {
      border-color: var(--primaryLight);
  }
  #faq-1193 .cs-faq-item.active .cs-button {
      color: var(--primary);
  }
  #faq-1193 .cs-faq-item.active .cs-button:before {
      background-color: var(--primaryLight);
      transform: rotate(315deg);
  }
  #faq-1193 .cs-faq-item.active .cs-button:after {
      background-color: var(--primaryLight);
      transform: rotate(-315deg);
  }
  #faq-1193 .cs-faq-item.active .cs-item-p {
      height: auto;
      padding-top: 1rem;
      opacity: 1;
  }
  #faq-1193 .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-1193 .cs-button:hover {
      cursor: pointer;
  }
  #faq-1193 .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-1193 .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-1193 .cs-button-text {
      width: 90%;
      display: block;
  }
  #faq-1193 .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-1193 .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-1193 .cs-picture {
      display: block;
      position: absolute;
      z-index: 1;
  }
  #faq-1193 .cs-picture1 {
      width: 32.625em;
      height: 38.0625em;
      top: 0;
      left: 0;
  }
  #faq-1193 .cs-picture1 img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  #faq-1193 .cs-picture2 {
      width: 25em;
      height: 40.625em;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      bottom: 0;
      right: 0;
  }
  #faq-1193 .cs-picture2 img {
      width: auto;
      height: 100%;
      max-height: 40.625rem;
      object-fit: contain;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1193 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
  }
  #faq-1193 .cs-content {
      width: 55%;
  }
  #faq-1193 .cs-image-group {
      font-size: min(1.4vw, 1em);
      height: auto;
      min-height: 42.375rem;
  }
  #faq-1193 .cs-picture1 {
      height: 90%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1193 .cs-title,
  body.dark-mode #faq-1193 .cs-item-p {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1193 .cs-item-p {
      opacity: 0.8;
  }
  body.dark-mode #faq-1193 .cs-faq-item {
      background-color: rgba(0, 0, 0, 0.4);
  }
  body.dark-mode #faq-1193 .cs-faq-item.active {
      border-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1193 .cs-faq-item.active .cs-button {
      color: var(--secondary);
  }
  body.dark-mode #faq-1193 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-1193 .cs-faq-item.active .cs-button:after {
      background-color: var(--secondary);
  }
  body.dark-mode #faq-1193 .cs-button {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1193 .cs-button:before,
  body.dark-mode #faq-1193 .cs-button:after {
      background-color: var(--bodyTextColorWhite);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-861 {
      padding: var(--sectionPadding);
  }
  #pricing-861 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 31.25rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
  }
  #pricing-861 .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-861 .cs-title {
      max-width: 25ch;
  }
  #pricing-861 .cs-text {
      max-width: 56.25rem;
  }
  #pricing-861 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 1.8vw, 1.25rem);
  }
  #pricing-861 .cs-item {
      list-style: none;
      width: 100%;
      margin: 0;
      /* 20px - 32px left & right */
      /* 20px - 32px bottom */
      padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
      /* prevent padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid #f4f4f4;
      /* clips corners */
      overflow: hidden;
      border-radius: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      grid-column: span 12;
  }
  #pricing-861 .cs-item.cs-popular .cs-background {
      background-color: #1a1a1a;
  }
  #pricing-861 .cs-item.cs-popular .cs-background img {
      opacity: 1;
  }
  #pricing-861 .cs-item.cs-popular .cs-package {
      color: var(--primary);
  }
  #pricing-861 .cs-item.cs-popular .cs-price,
  #pricing-861 .cs-item.cs-popular .cs-desc {
      color: var(--bodyTextColorWhite);
  }
  #pricing-861 .cs-item.cs-popular .cs-desc {
      opacity: 0.8;
  }
  #pricing-861 .cs-top {
      padding: 2.5rem 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
      position: relative;
      z-index: 1;
  }
  #pricing-861 .cs-background {
      background-color: #fef7f4;
      position: absolute;
      top: 0;
      bottom: 0;
      /* same as cs-item padding left and right */
      left: -2rem;
      right: -2rem;
      z-index: -1;
  }
  #pricing-861 .cs-background img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      opacity: 0;
  }
  #pricing-861 .cs-package {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: center;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 700;
      width: 100%;
      margin: 0;
      color: #767676;
      display: block;
  }
  #pricing-861 .cs-price {
      /* 39px - 49px */
      font-size: clamp(2.4375rem, 5vw, 3.0625rem);
      line-height: 1.2em;
      text-align: center;
      font-weight: 900;
      margin: 0;
      color: var(--headerColor);
      display: block;
      /* so it's even with the bottom of the cs-desc */
      transform: translateY(0.5625rem);
  }
  #pricing-861 .cs-desc {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: center;
      margin: 0 0 0 0.5rem;
      color: var(--bodyTextColor);
      opacity: 0.8;
      display: block;
  }
  #pricing-861 .cs-ul {
      /* 24px - 40px */
      margin: clamp(1.5rem, 4vw, 2.5rem) 0 2rem 0;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
  }
  #pricing-861 .cs-li {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      list-style: none;
      line-height: 1.2em;
      width: 100%;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: space-between;
      /* push everything to the top so if the li goes to two lines the icon stays at the top */
      align-items: flex-start;
      gap: 1rem;
  }
  #pricing-861 .cs-li.cs-disabled {
      opacity: 0.4;
      filter: grayscale(1);
  }
  #pricing-861 .cs-icon {
      width: 1.125rem;
      height: auto;
      display: block;
  }
  #pricing-861 .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;
  }
  #pricing-861 .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;
  }
  #pricing-861 .cs-button-solid:hover:before {
      width: 100%;
  }
  #pricing-861 .cs-price-button {
      /* pushes up against the cs-ul so if there's loess li's in the list, the button always pushes itself to the bottom */
      margin-top: auto;
      width: 100%;
      border-radius: 0;
  }
  #pricing-861 .cs-price-button:before {
      border-radius: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-861 .cs-container {
      max-width: 80rem;
  }
  #pricing-861 .cs-item {
      grid-column: span 6;
  }
  #pricing-861 .cs-item.cs-popular {
      grid-column: span 12;
      order: -1;
  }
}
/* Tablet - 900px */
@media only screen and (min-width: 59.375rem) {
  #pricing-861 .cs-item {
      grid-column: span 4;
  }
  #pricing-861 .cs-item.cs-popular {
      grid-column: span 4;
      order: initial;
  }

  #pricing-861 .cs-item.cs-popular {
    grid-column: 5 / span 4; /* columns 5–8 => perfectly centered */
    order: initial;          /* keep your current order behavior */
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #pricing-861 {
      background-color: var(--dark);
  }
  body.dark-mode #pricing-861 .cs-topper {
      color: var(--primaryLight);
  }
  body.dark-mode #pricing-861 .cs-title,
  body.dark-mode #pricing-861 .cs-text,
  body.dark-mode #pricing-861 .cs-item-p,
  body.dark-mode #pricing-861 .cs-package,
  body.dark-mode #pricing-861 .cs-li,
  body.dark-mode #pricing-861 .cs-price,
  body.dark-mode #pricing-861 .cs-desc,
  body.dark-mode #pricing-861 .cs-plan {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-861 .cs-text {
      opacity: 0.8;
  }
  body.dark-mode #pricing-861 .cs-item {
      background-color: var(--medium);
  }
  body.dark-mode #pricing-861 .cs-item.cs-popular {
      background-color: var(--primary);
  }
  body.dark-mode #pricing-861 .cs-background {
      background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #pricing-861 .cs-icon {
      /* makes icon white (if it wasn't black to start) */
      filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #pricing-861 .cs-price-button {
      background-color: var(--bodyTextColorWhite);
      color: #1a1a1a;
      transition: color 0.3s;
  }
  body.dark-mode #pricing-861 .cs-price-button:hover {
      color: #fff;
  }
}

                                

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

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

  #faq-326 .cs-title {
      margin: 0;
  }
  #faq-326 .cs-faq-group {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 0.75rem;
  }
  #faq-326 .cs-faq-item {
      list-style: none;
      width: 100%;
      background-color: #f7f7f7;
      /* clips all corners of the button that overlap the rounded border */
      overflow: hidden;
      border-radius: 0.75rem;
      transition: border-bottom 0.3s;
  }
  #faq-326 .cs-faq-item.active .cs-button {
      background-color: var(--primary);
      color: var(--secondaryLight);
  }
  #faq-326 .cs-faq-item.active .cs-button:before {
      background-color: var(--secondaryLight);
      transform: rotate(315deg);
  }
  #faq-326 .cs-faq-item.active .cs-button:after {
      background-color: var(--secondaryLight);
      transform: rotate(-315deg);
  }
  #faq-326 .cs-faq-item.active .cs-item-p {
      height: auto;
      /* 20px - 24px top & bottom */
      /* 16px - 24px left & right */
      padding: clamp(1.25rem, 1.3vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
      opacity: 1;
  }
  #faq-326 .cs-button {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: left;
      font-weight: bold;
      /* 16px - 20px */
      padding: clamp(1rem, 1.3vw, 1.25rem);
      background-color: #f7f7f7;
      border: none;
      color: var(--headerColor);
      display: block;
      width: 100%;
      position: relative;
      transition:
          background-color 0.3s,
          color 0.3s;
  }
  #faq-326 .cs-button:hover {
      cursor: pointer;
  }
  #faq-326 .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: 50%;
      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;
  }
  #faq-326 .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: 50%;
      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;
  }
  #faq-326 .cs-button-text {
      width: 80%;
      display: block;
  }
  #faq-326 .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;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-326 .cs-topper {
      color: var(--secondaryLight);
  }
  body.dark-mode #faq-326 .cs-title,
  body.dark-mode #faq-326 .cs-item-p {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-326 .cs-faq-item {
      background-color: var(--accent);
  }
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button {
      background-color: var(--secondaryLight);
      color: var(--primary);
  }
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button:after {
      background-color: var(--primary);
  }
  body.dark-mode #faq-326 .cs-button {
      background-color: var(--accent);
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-326 .cs-button:before,
  body.dark-mode #faq-326 .cs-button:after {
      background-color: var(--bodyTextColorWhite);
  }
}

                              

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-52 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta-52 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    padding: var(--sectionPadding);
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #cta-52 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #cta-52 .cs-title,
  #cta-52 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #cta-52 .cs-text {
    margin: 0 0 2rem 0;
    opacity: .8;
  }
  #cta-52 .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;
  }
  #cta-52 .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 .3s;
  }
  #cta-52 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-52 .cs-picture {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-52 .cs-picture:before {
    /* black color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-52 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/* CTA Benefits List */
#cta-52 .cs-benefits {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--bodyTextColor);
}

#cta-52 .cs-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

#cta-52 .cs-benefits li::before {
  content: "✔️";
  color: var(--primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Warning Style */
#cta-52 .cs-warning {
  font-weight: 600;
  color: #c0392b; /* a professional red tone */
  margin: 1rem 0;
  padding-bottom: 2.5rem;
  padding-top: 1rem;
}



/* Dark Mode Support */
body.dark-mode #cta-52 .cs-benefits li::before {
  color: var(--secondary);
}
body.dark-mode #cta-52 .cs-warning {
  color: #ff6b6b;
}