/* PAGE-SPECIFIC STYLES FOR THE HOME PAGE */
/*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1634 {
    padding: var(--sectionPadding);
    background-color: var(--secondary);
  }

  #why-choose-1634 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 10vw, 6.25rem);
  }

  #why-choose-1634 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #why-choose-1634 .cs-flex {
    max-width: 38.5rem;
  }

  #why-choose-1634 .cs-title {
    max-width: 20ch;
    color: #fff
  }

  #why-choose-1634 .cs-text {
    margin-bottom: 1rem;
    color: #F7F7F7
  }

  #why-choose-1634 .cs-text:last-of-type {
    margin-bottom: 0;
  }

  #why-choose-1634 .cs-wrapper {
    width: 100%;
  }

  #why-choose-1634 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.75rem;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.3vw, 1.25rem);
  }

  #why-choose-1634 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    /* 16px - 24px */
    gap: clamp(1rem, 3vw, 1.5rem);
  }

  #why-choose-1634 .cs-icon-wrapper {
    /* 60px - 80px */
    background-color: #EBF8FE;
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    margin: 0;
    box-sizing: border-box;
    /* border: 1px solid var(--primary); */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 0.5rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #why-choose-1634 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }

  #why-choose-1634 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--headerColorWhite);
    text-align: inherit;
  }

  #why-choose-1634 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
    text-align: inherit;
  }

  #why-choose-1634 .cs-wrapper {
    /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
    display: contents;
  }

  #why-choose-1634 .cs-image-group {
    font-size: min(2.7vw, 1em);
    width: 33.875em;
    height: 30.875em;
    /* sends it to teh top in the 1st position */
    order: -1;
    position: relative;
    z-index: 1;
  }

  #why-choose-1634 .cs-picture-wrapper {
    width: 80.073801%;
    height: 83.805668%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: stretch;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }

  #why-choose-1634 .cs-box {
    width: 60%;
    margin-top: -2.375em;
    margin-left: 1.5em;
    padding: 1em;
    background-color: #EBF8FE;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: relative;
    z-index: 10;
  }

  #why-choose-1634 .cs-header {
    font-size: 1.5em;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    display: block;
  }

  #why-choose-1634 .cs-desc {
    font-size: 0.875em;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }

  #why-choose-1634 .cs-picture {
    position: relative;
    z-index: 1;
  }

  #why-choose-1634 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1rem;
  }

  #why-choose-1634 .cs-picture1 {
    width: 100%;
    height: 100%;
  }

  #why-choose-1634 .cs-picture2 {
    width: 36.346863%;
    height: 39.878543%;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

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

  #why-choose-1634 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;

  }

  #why-choose-1634 .cs-flex {
    text-align: left;
    width: 50vw;
    max-width: 40rem;
    flex: none;
  }

  #why-choose-1634 .cs-title {
    margin: 0;
    color: #fff
  }

  #why-choose-1634 .cs-h3 #why-choose-1634 .cs-item-text {
    text-align: left;
  }

  #why-choose-1634 .cs-item {
    grid-column: span 4;
  }

  #why-choose-1634 .cs-image-group {
    width: 100%;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1634 {
    /* set the darker background color on the main div */
    background-color: var(--secondary);
    overflow: hidden;
  }

  #why-choose-1634 .cs-content {
    align-items: flex-start;
  }

  #why-choose-1634 .cs-flex {
    width: 50%;
  }

  #why-choose-1634 .cs-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }

  #why-choose-1634 .cs-wrapper:before {
    /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
    content: '';
    width: 100vw;
    height: 100vw;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }

  #why-choose-1634 .cs-card-group {
    max-width: 39.375rem;
    /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
    padding-top: 3rem;
    align-self: flex-start;
  }

  #why-choose-1634 .cs-image-group {
    width: 33.875em;
    /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
    height: auto;
    min-height: 30.875em;
    /* makes it overlap the .cs-wrapper div */
    margin-top: -3rem;
    order: 2;
    flex: none;
  }

  #why-choose-1634 .cs-item {
    grid-column: span 12;
    flex-direction: row;
  }

  #why-choose-1634 .cs-h3 {
    color: var(--headerColor);
  }

  #why-choose-1634 .cs-item-text {
    color: var(--bodyTextColor);
  }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-1634 {
    background-color: rgba(0, 0, 0, 0.3);
  }

  body.dark-mode #why-choose-1634 .cs-title,
  body.dark-mode #why-choose-1634 .cs-text,
  body.dark-mode #why-choose-1634 .cs-h3,
  body.dark-mode #why-choose-1634 .cs-item-text,
  body.dark-mode #why-choose-1634 .cs-header {
    color: var(--bodyTextColorWhite);
  }

  body.dark-mode #why-choose-1634 .cs-text,
  body.dark-mode #why-choose-1634 .cs-item-text {
    opacity: .8;
  }

  body.dark-mode #why-choose-1634 .cs-box {
    background-color: var(--dark);
    position: relative;
    z-index: 1;
  }

  body.dark-mode #why-choose-1634 .cs-box:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }

  body.dark-mode #why-choose-1634 .cs-wrapper:before {
    background-color: var(--dark);
  }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-2rem);
    }

    100% {
      transform: translateY(0);
    }
  }

  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-3rem);
    }

    100% {
      transform: translateY(0);
    }
  }

  #gallery-1374 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    /* Prevents overflow from the image going off screen */
    overflow: hidden;
    background-color: #F5FCFF;
  }

  #gallery-1374 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }

  #gallery-1374 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }



  #gallery-1374 .cs-image-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    /* 16px - 60px */
    gap: clamp(1rem, 4.3vw, 3.75rem);
  }

  #gallery-1374 .cs-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #gallery-1374 .cs-item {
    list-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
    grid-column: span 12;
  }

  #gallery-1374 .cs-item:hover .cs-h3,
  #gallery-1374 .cs-item:hover .cs-desc {
    color: #fff;
  }

  #gallery-1374 .cs-item:hover .cs-item-text {
    background-color: var(--primary);
  }

  #gallery-1374 .cs-item:hover .cs-icon-wrapper {
    border-color: #fff;
  }

  #gallery-1374 .cs-item:hover .cs-icon {
    filter: brightness(1000%) grayscale(1);
  }

  #gallery-1374 .cs-picture {
    width: 100%;
    /* 344px - 420px */
    height: clamp(21.5rem, 30vw, 26.25rem);
    margin: auto;
    border-radius: 1.5rem;
    display: block;
    position: relative;
    overflow: hidden;
  }

  #gallery-1374 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  #gallery-1374 .cs-item-text {
    /* 16px - 20px top & bottom, 16px - 40px left & right */
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2.8vw, 2.5rem);
    background-color: #EBF8FE;
    border-radius: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* makes the item text the element that grows to fill the container */
    flex-grow: 1;
    gap: 1rem;
    transition: background-color 0.3s;
  }

  #gallery-1374 .cs-flex {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #gallery-1374 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
    line-height: 1.2em;
    text-align: left;
    margin: 0;
    color: #1a1a1a;
    transition: color 0.3s;
  }

  #gallery-1374 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    line-height: 1.5em;
    color: #1a1a1a;
    transition: color 0.3s;
  }

  #gallery-1374 .cs-icon-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid #bababa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents the parent flexbox from shrinking the icon */
    flex-shrink: 0;
    transition: border-color 0.3s;
  }

  #gallery-1374 .cs-icon {
    width: auto;
    height: 0.75rem;
    transition: filter 0.3s;
  }

}

/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-1374 .cs-item {
    grid-column: span 6;
  }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {

  body.dark-mode #gallery-1374 .cs-title,
  body.dark-mode #gallery-1374 .cs-text,
  body.dark-mode #gallery-1374 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }

  body.dark-mode #gallery-1374 .cs-text {
    opacity: 0.8;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-515 {
    padding: var(--sectionPadding);
    /* background: #001f3f; */
    background: var(--secondary);
  }

  #sbs-515 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 60px */
    gap: clamp(3rem, 10vw, 3.75rem);
  }

  #sbs-515 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #sbs-515 .cs-color {
    color: var(--primary);
  }

  #sbs-515 .cs-topper,
  #sbs-515 .cs-title {
    color: var(--bodyTextColorWhite);
  }

  #sbs-515 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }

  #sbs-515 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }

  #sbs-515 .cs-ul {
    width: 100%;
    /* 32px - 36px */
    margin: 0 0 clamp(2rem, 4vw, 2.25rem) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 24px - 32px */
    row-gap: clamp(1.5rem, 4vw, 2rem);
  }

  #sbs-515 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;


  }

  #sbs-515 .cs-li img {
    /* 14px - 16px */
    /* background-color: rgba(255, 255, 255, 0.16);
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08); */
    /* Icon */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
    gap: 10px;

    width: 56px;
    height: 56px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

  }


  #sbs-515 .cs-image-group {
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* 40px - 48px */
    row-gap: clamp(2.5rem, 6vw, 3rem);
    /* sends it to the top in the first position */
    order: -1;
  }

  #sbs-515 .cs-stat-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;

  }

  #sbs-515 .cs-stat {
    list-style: none;
    max-width: 14.375rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  #sbs-515 .cs-number {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    line-height: 1.2em;
    font-weight: 900;
    color: var(--primary);
  }

  #sbs-515 .cs-desc {
    font-size: clamp(0.875rem, 1rem, 1.25rem);
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }

  #sbs-515 .cs-picture {
    width: 100%;
    /* 244px - 339px, changes clamp at tablet */
    height: clamp(14rem, 62vw, 21.1875rem);
    display: block;
    position: relative;
  }

  #sbs-515 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-515 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: flex-start;
  }

  #sbs-515 .cs-content {
    width: 71%;
    max-width: 33.75rem;
  }

  #sbs-515 .cs-image-group {
    width: 68%;
  }

  #sbs-515 .cs-stat-group {
    justify-content: space-between;
  }

  #sbs-515 .cs-picture {
    /* 340px - 461px */
    height: clamp(21.25rem, 35vw, 28.8125rem);
  }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-515 {
    background-color: rgba(0, 0, 0, 0.2);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1260 {
    padding: var(--sectionPadding);
    /* clips svg graphic from overflowing the section */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  #pricing-1260 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375em;
    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;
  }

  #pricing-1260 .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-1260 .cs-text {
    margin-bottom: 1rem;
  }

  #pricing-1260 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }



  #pricing-1260 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;

  }

  #pricing-1260 .cs-item {


    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 1.5rem 1.5rem;
    background-color: #F3F3F4;
    /* border: 1px solid #dad9e3; */
    border-radius: 0 0 1.5rem 1.5rem;
    /* 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-1260 .cs-item:nth-of-type(2) .cs-option2-text,
  #pricing-1260 .cs-item:nth-of-type(2) .cs-option1-text {
    transition-delay: 0.1s;
  }

  #pricing-1260 .cs-item:nth-of-type(3) .cs-option2-text,
  #pricing-1260 .cs-item:nth-of-type(3) .cs-option1-text {
    transition-delay: 0.2s;
  }

  #pricing-1260 .cs-item.cs-popular {
    background: var(--secondary);
    /* position: relative; */
    border-radius: 1.5rem 1.5rem 0 0;
    /* clips the popular tag */
    overflow: hidden;
    /* send to the top */
    order: -1;
  }

  #pricing-1260 .cs-popular:before {
    /* Most Popular Tag */
    content: "Popular";
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.8125em;
    font-weight: 700;
    width: 10.625rem;
    padding: 0 0.75rem;
    color: var(--bodyTextColorWhite);
    background-color: var(--primary);
    position: absolute;
    display: block;
    top: 1.25rem;
    right: -3.75rem;
    transform: rotate(42deg);
  }

  #pricing-1260 .cs-popular .cs-h3,
  #pricing-1260 .cs-popular .cs-item-text,
  /* #pricing-1260 .cs-popular .cs-price, */
  #pricing-1260 .cs-popular .cs-included,
  #pricing-1260 .cs-popular .cs-li,
  #pricing-1260 .cs-popular .cs-small {
    color: var(--bodyTextColorWhite);
  }

  #pricing-1260 .cs-popular .cs-button-solid {
    background-color: var(--primary);
    /* color: var(--buttonTextColor); */
    transition: color 0.3s;
  }

  #pricing-1260 .cs-popular .cs-button-solid:before {
    background-color: #fff;
  }

  #pricing-1260 .cs-popular .cs-button-solid:hover {
    color: #000;
  }

  #pricing-1260 .cs-popular .cs-li-img {
    /* turns the check mark white */
    filter: brightness(130%);
  }

  #pricing-1260 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.25rem;
    padding: 0;
    color: var(--headerColor);
  }

  #pricing-1260 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    padding: 0;
    color: var(--bodyTextColor);
  }

  #pricing-1260 .cs-option-group {
    position: relative;
  }

  #pricing-1260 .cs-option-group:after {
    /* top right box */
    content: "";
    width: 100%;
    height: 1px;
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
    background: linear-gradient(90deg,
        rgba(232, 232, 232, 0.2) 0%,
        #e8e8e8 53.78%,
        rgba(232, 232, 232, 0.2) 100%);
    opacity: 1;
    position: relative;
    display: block;
  }

  #pricing-1260 .cs-price {
    font-size: 3.0625rem;
    line-height: 1.2em;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--primary);
    /* spans are inline, need to add block for margin to work */
    display: block;
  }

  #pricing-1260 .cs-small {
    font-size: 1rem;
    font-weight: 700;
    color: #4e4b66;
  }

  #pricing-1260 .cs-included {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 24px */
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    color: var(--headerColor);
    display: block;
  }

  #pricing-1260 .cs-ul {
    padding: 0;
    margin: 0;
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
  }

  #pricing-1260 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #pricing-1260 .cs-li:last-of-type {
    margin-bottom: 0;
  }

  #pricing-1260 .cs-disabled {
    /* fades out list items that are disabled from the price tier */
    filter: grayscale(1);
    opacity: 0.3;
  }

  #pricing-1260 .cs-li-img {
    width: 1.25rem;
    height: auto;
    margin-top: 0.1875rem;
    margin-right: 0.5rem;
  }


  #pricing-1260 .cs-button-solid {
    /* cs-button-solid override */
    margin: 0 0 1rem 0;
  }


}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1260 .cs-container {

    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }

  #pricing-1260 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  #pricing-1260 .cs-item {
    width: 100%;
    /* ensures they stay the same height if you add more content */
    align-self: stretch;
    border-radius: 1.5rem 0 0 1.5rem;
  }

  #pricing-1260 .cs-item.cs-popular {
    /* send back to its original order */
    order: unset;
    border-radius: 0 1.5rem 1.5rem 0;
  }

  #pricing-1260 #cs-option2-357:before {
    top: -0.625rem;
  }

  #pricing-1260 #cs-option2-357:after {
    top: -2.1875rem;
    right: -6.25rem;
  }

}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1260 .cs-container {
    max-width: 80rem;
    position: relative;
    z-index: 1;
  }


}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #pricing-1260 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.25rem;
  }

  #pricing-1260 .cs-card-group {
    width: 70%;
    max-width: 55.25rem;
  }


}

/* Dark Mode */
@media only screen and (min-width: 0rem) {

  body.dark-mode #pricing-1260 .cs-title,
  body.dark-mode #pricing-1260 .cs-text,
  body.dark-mode #pricing-1260 .cs-package,
  body.dark-mode #pricing-1260 .cs-li,
  body.dark-mode #pricing-1260 .cs-item-text,
  body.dark-mode #pricing-1260 .cs-price,
  body.dark-mode #pricing-1260 .cs-duration {
    color: var(--bodyTextColorWhite);
  }

  body.dark-mode #pricing-1260 .cs-text,
  body.dark-mode #pricing-1260 .cs-item-text,
  body.dark-mode #pricing-1260 .cs-li {
    opacity: 0.8;
  }

  body.dark-mode #pricing-1260 .cs-item {
    background-color: var(--dark);
    border-color: rgba(255, 255, 255, 0.2);
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular {
    background-color: var(--primary);
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-picture:before {
    background-color: #fff;
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-picture .cs-picture-icon {
    filter: grayscale(1) brightness(1000%);
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-popular-tag {
    color: var(--bodyTextColorWhite);
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-popular-tag:before {
    background-color: #14142b;
    opacity: 1;
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-package,
  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-li,
  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-item-text,
  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-price,
  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-duration {
    color: var(--headerColor);
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-icon {
    filter: grayscale(1) brightness(1000%);
    opacity: 1;
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-button-transparent {
    color: var(--primary);
    background-color: #fff;
  }

  body.dark-mode #pricing-1260 .cs-item.cs-popular .cs-button-transparent:before {
    background-color: #1a1a1a;
  }

  body.dark-mode #pricing-1260 .cs-icon {
    filter: none;
    opacity: 1;
  }

  body.dark-mode #pricing-1260 .cs-button-solid {
    transition: color 0.3s;
  }

  body.dark-mode #pricing-1260 .cs-button-solid:hover {
    color: var(--primary);
  }

  body.dark-mode #pricing-1260 .cs-button-solid:before {
    background-color: #fff;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-708 {
    position: relative;
    overflow: hidden;
    background-color: #F5FCFF;
  }

  #faq-708 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }

  #faq-708 .cs-content {
    text-align: left;
    max-width: 33.8125rem;
    /* move section padding to the cs-content so we can make the cs-picture full width */
    padding: var(--sectionPadding);
    padding-top: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
  }

  #faq-708 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 0 1.5rem 0;
  }

  #faq-708 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  #faq-708 .cs-faq-item {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    transition: border-bottom 0.3s;
  }

  #faq-708 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }

  #faq-708 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }

  #faq-708 .cs-faq-item.active .cs-button:before {
    background-color: var(--primary);
    transform: rotate(315deg);
  }

  #faq-708 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
    transform: rotate(-315deg);
  }

  #faq-708 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    padding: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
    opacity: 1;
  }

  #faq-708 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 24px */
    padding: clamp(1rem, 2.3vw, 1.5rem) 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition:
      background-color 0.3s,
      color 0.3s;
  }

  #faq-708 .cs-button:hover {
    cursor: pointer;
  }

  #faq-708 .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-708 .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-708 .cs-button-text {
    width: 90%;
    display: block;
  }

  #faq-708 .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-708 .cs-graphic {
    width: 22.5625rem;
    height: auto;
    opacity: 0.5;
    display: none;
    position: absolute;
    right: -11.25rem;
    bottom: 1.875rem;
  }

  #faq-708 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    height: 16rem;
    z-index: 1;
  }

  #faq-708 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #faq-708 {
    /* moved seciton padding back to the section */
    padding: var(--sectionPadding);
  }

  #faq-708 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  #faq-708 .cs-picture {
    width: 50%;
    max-width: 40.625rem;
    /* 500px - 750px */
    height: clamp(31.25rem, 68vw, 46.875rem);
  }

  #faq-708 .cs-content {
    width: 55%;
    padding: 0;
  }
}

/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #faq-708 .cs-graphic {
    display: block;
  }
}



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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1013 {
    padding: var(--sectionPadding);
    position: relative;
  }

  #reviews-1013 .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);
  }

  #reviews-1013 .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;
  }

  #reviews-1013 .cs-card-group {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }

  #reviews-1013 .cs-item {
    list-style: none;
    max-width: 39.375rem;
    /* 24px - 64px */
    padding: clamp(1.5rem, 2vw, 4rem);
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid #E7E8EA;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    grid-column: span 12;
    position: relative;
    backdrop-filter: blur(10px);
    border-radius: 1rem;


    /* padding: 48px;
    gap: 48px; */

    /* Card */




  }

  #reviews-1013 .cs-review {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 1.6vw, 1.25rem);
    line-height: 1.5em;
    margin: 0 0 1.5rem 0;
    /* 20px - 44px */
    padding-bottom: clamp(1.25rem, 3vw, 2.75rem);
    color: var(--headerColor);
    border-bottom: 1px solid #b4b2c7;
  }

  #reviews-1013 .cs-flex-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 12px - 20px */
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }

  #reviews-1013 .cs-profile {
    /* 48px - 72px */
    width: clamp(3rem, 6vw, 4.5rem);
    height: clamp(3rem, 6vw, 4.5rem);
    border: 1px solid #b4b2c7;
    /* prevents border from adding to height and width */
    box-sizing: border-box;
    background-color: #b4b2c7;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
  }

  #reviews-1013 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }

  #reviews-1013 .cs-name {
    /* 16px - 25px */
    font-size: clamp(1rem, 2.2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--headerColor);
    display: block;
  }

  #reviews-1013 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    font-weight: 400;
    margin: 0.25rem 0 0 0;
    color: var(--headerColor);
    display: block;
  }

  #reviews-1013 .cs-background {
    width: 100%;
    height: 40%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  #reviews-1013 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #F5FCFF;
    /* opacity: 0.5; */
    top: 0;
    left: 0;
    z-index: 1;
  }


}

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

  #reviews-1013 .cs-item {
    grid-column: span 4;
  }

  #reviews-1013 .cs-background {
    height: 40%;
  }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {

  body.dark-mode #reviews-1013 .cs-title,
  body.dark-mode #reviews-1013 .cs-text,
  body.dark-mode #reviews-1013 .cs-review {
    color: var(--bodyTextColorWhite);
  }

  body.dark-mode #reviews-1013 .cs-item {
    background-color: var(--medium);
  }

  body.dark-mode #reviews-1013 .cs-desc {
    color: var(--bodyTextColorWhite);
    opacity: 0.7;
  }
}

/*-- -------------------------- -->
<---        Recent Posts        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-2rem);
    }

    100% {
      transform: translateY(0);
    }
  }

  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-3rem);
    }

    100% {
      transform: translateY(0);
    }
  }

  #blog-1369 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  #blog-1369 .cs-container {
    width: 100%;
    /* changes to 1280px on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }

  #blog-1369 .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;
  }

  #blog-1369 .cs-title {
    max-width: 20ch;
  }



  #blog-1369 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }

  #blog-1369 .cs-item {
    list-style: none;
    display: flex;
    flex-direction: column;
    grid-column: span 12;
  }

  #blog-1369 .cs-item:hover .cs-h3,
  #blog-1369 .cs-item:hover .cs-date,
  #blog-1369 .cs-item:hover .cs-category {
    color: #fff;
  }

  #blog-1369 .cs-item:hover .cs-item-text {
    background-color: var(--primary);
  }

  #blog-1369 .cs-item:hover .cs-icon-wrapper {
    border-color: #fff;
  }

  #blog-1369 .cs-item:hover .cs-icon,
  #blog-1369 .cs-item:hover .cs-date-icon {
    filter: brightness(1000%) grayscale(1);
  }

  #blog-1369 .cs-item:hover .cs-icon {
    transform: rotate(45deg);
  }

  #blog-1369 .cs-item:hover .cs-category::before {
    background-color: #fff;
    opacity: 0.2;
  }

  #blog-1369 .cs-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    /* if one card has more content then the others, the card will stretch to fill the parent container */
    flex-grow: 1;
    gap: 1rem;
  }

  #blog-1369 .cs-picture {
    width: 100%;
    height: 20rem;
    margin: 0;
    border-radius: 1.5rem;
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  #blog-1369 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  #blog-1369 .cs-item-text {
    padding: 1.25rem;
    background-color: #f7f7f7;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* makes the item text the element that grows to fill the container */
    flex-grow: 1;
    transition: background-color 0.3s;
  }

  #blog-1369 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
    line-height: 1.2em;
    text-align: left;
    margin: 0;
    color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 0.3s;
  }

  #blog-1369 .cs-icon-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid #bababa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents the parent flexbox from shrinking the icon */
    flex-shrink: 0;
    transition: border-color 0.3s;
  }

  #blog-1369 .cs-icon {
    width: auto;
    height: 0.75rem;
    transition:
      filter 0.3s,
      transform 0.3s;
  }

  #blog-1369 .cs-info {
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #blog-1369 .cs-date {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: left;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s;
  }

  #blog-1369 .cs-date-icon {
    width: auto;
    height: 1.5rem;
    transition: filter 0.3s;
  }

  #blog-1369 .cs-category {
    font-size: 0.875rem;
    /* centers the text if the category bullet has to span multiple lines */
    text-align: center;
    padding: 0.25rem 1rem;
    color: #1a1a1a;
    border-radius: 5rem;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }

  #blog-1369 .cs-category::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #e8e8e8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #blog-1369 .cs-bubbles {
    width: 20.0625rem;
    height: 26.4375rem;
    display: none;
    position: absolute;
    top: 8.6875rem;
    right: -8.75rem;
    z-index: -1;
  }

  #blog-1369 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 16.5rem;
    height: 16.5rem;
    background: transparent;
    opacity: 1;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }

  #blog-1369 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 16.5rem;
    height: 16.5rem;
    background: var(--primary);
    opacity: 0.1;
    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-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #blog-1369 .cs-item {
    grid-column: span 6;
  }

  #blog-1369 .cs-bubbles {
    display: block;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #blog-1369 .cs-container {
    max-width: 80rem;
  }

  #blog-1369 .cs-bubbles {
    top: 17.5625rem;
  }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #blog-1369 .cs-container {
    flex-direction: row;
  }

  #blog-1369 .cs-content {
    text-align: left;
    max-width: 19.0625rem;
    align-items: start;
  }

  #blog-1369 .cs-bubbles {
    margin-right: -61.875rem;
    top: -1.25rem;
    right: 50%;
  }
}


/*# sourceMappingURL=local.css.map */