@charset "UTF-8";
:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #dd2967;
  --primaryLight: #ffba43;
  --secondary: #ffba43;
  --secondaryLight: #ffba43;
  --buttonPrimary: #ffa41c;
  --headerColor: #dd2967;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

.cs-topper {
  font-size: 24px;
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #24b893;
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

.main-button {
  padding: 17px 40px;
  border-radius: 50px;
  color: #ffffff !important;
  cursor: pointer;
  border: 0;
  background-color: var(--buttonPrimary);
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 8px;
  text-transform: uppercase;
  font-size: 15px;
  transition: all 0.5s ease;
}
.main-button:hover {
  background-color: hsl(38, 93%, 47%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(251, 177, 5) 0px 7px 29px 0px;
}
.main-button:active {
  background-color: hsl(38, 93%, 47%);
  color: hsl(0, 0%, 100%);
  box-shadow: 251, 177, 5 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}

/*-- -------------------------- -->
<---          Hero V3           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1895 {
    width: 100%;
    padding: var(--sectionPadding);
    background-color: #eff5ff;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1895:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #eff5ff;
    opacity: 0.84;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1895 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 80px */
    gap: clamp(3rem, 6vw, 5rem);
  }
  #hero-1895 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }
  #hero-1895 .cs-topper {
    color: var(--secondary);
  }
  #hero-1895 .cs-text {
    margin-bottom: 0.75rem;
  }
  #hero-1895 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #hero-1895 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 6.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-1895 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1895 .cs-button-solid:hover {
    color: #fff;
  }
  #hero-1895 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1895 .cs-info {
    width: 100%;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
  }
  #hero-1895 .cs-info .cs-text {
    margin: 0;
    padding: 0;
    color: #333333;
    font-style: italic;
  }
  #hero-1895 .cs-info-pic {
    width: 6.9375em;
    height: 4.8125em;
    border-radius: 1rem;
    position: relative;
  }
  #hero-1895 .cs-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  #hero-1895 .cs-address {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
    display: block;
  }
  #hero-1895 .cs-icon {
    width: 1.5rem;
    height: auto;
    margin-right: 0.25rem;
  }
  #hero-1895 .cs-slogan {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    display: block;
  }
  #hero-1895 .cs-image-group {
    max-width: 670px;
    height: auto;
    display: block;
    z-index: 2;
  }
  #hero-1895 .cs-picture img {
    width: 100%;
    height: auto;
  }
  #hero-1895 .cs-graphic {
    height: auto;
    position: absolute;
  }
  #hero-1895 .cs-peach {
    width: 5.375em;
    height: auto;
    top: 0.375em;
    right: 5.6875em;
  }
  #hero-1895 .cs-swirl {
    width: 9.8125em;
    height: auto;
    top: 1.5625em;
    right: 0;
    z-index: 0;
  }
  #hero-1895 .cs-dots {
    width: 15.375em;
    height: auto;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #hero-1895 .cs-leaf {
    width: 13.4375em;
    height: auto;
    right: 0;
    bottom: 0;
  }
  #hero-1895 .cs-button {
    width: 10em;
    height: auto;
    top: 25.5em;
    left: 0;
  }
  #hero-1895 .cs-info-text {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 3.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.6em;
    text-align: center;
    max-width: 13.9375em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #hero-1895 .cs-brown-lines {
    width: 46.625em;
    height: auto;
    left: 20.6875em;
    top: 24.6875em;
    z-index: -10;
    transform: rotate(36deg);
  }
  #hero-1895 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #hero-1895 .cs-background img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #hero-1895 .hero-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-1895 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #hero-1895 .cs-content {
    /* 48px - 64px */
    padding: clamp(3rem, 5vw, 4rem) 0;
  }
  #hero-1895 .cs-image-group {
    font-size: min(1.27vw, 1rem);
    height: auto;
    min-height: 42.5em;
    /* sends it to the right in the 2nd position */
    order: 2;
    flex: none;
  }
  #hero-1895 .cs-picture {
    height: 100%;
  }
}
/* Large Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #hero-1895 .cs-background {
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/dermatology-banner.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  #hero-1895 .cs-background img {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-1895 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #hero-1895:before {
    background-color: var(--dark);
  }
  body.dark-mode #hero-1895 .cs-bold,
  body.dark-mode #hero-1895 .cs-text-large,
  body.dark-mode #hero-1895 .cs-title,
  body.dark-mode #hero-1895 .cs-address,
  body.dark-mode #hero-1895 .cs-slogan {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-1895 .cs-text,
  body.dark-mode #hero-1895 .cs-info-text,
  body.dark-mode #hero-1895 .cs-slogan {
    opacity: 0.8;
  }
  body.dark-mode #hero-1895 .cs-picture {
    border-color: var(--accent);
  }
  body.dark-mode #hero-1895 .cs-background {
    opacity: 0.4;
  }
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-points__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #333333;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.hero-points__icon {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: #e8f7f1;
  color: #08775b;
  font-size: 0.75rem;
  font-weight: 800;
}

.hero-points__item strong {
  color: #08775b;
  font-size: 20px;
}

@media (max-width: 30rem) {
  .hero-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  .hero-points__item:first-child {
    grid-column: 1/-1;
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1387 {
    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-1387 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 3vw, 4rem);
    position: relative;
  }
  #pricing-1387 .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-1387 .cs-title {
    max-width: 20ch;
  }
  #pricing-1387 .cs-text {
    margin-bottom: 1rem;
  }
  #pricing-1387 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #pricing-1387 .cs-toggle-group {
    width: 100%;
    max-width: 25.875rem;
    margin: 0;
    padding: 0.75rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #f1f1f4;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #pricing-1387 .cs-plan {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing-1387 .cs-plan:hover {
    cursor: pointer;
  }
  #pricing-1387 .cs-toggle {
    width: 3.25rem;
    height: 2rem;
    border-radius: 2.5rem;
    background-color: var(--primaryLight);
    margin: 0 1.5rem;
    position: relative;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #pricing-1387 .cs-toggle:hover {
    cursor: pointer;
  }
  #pricing-1387 .cs-toggle.active:before {
    opacity: 1;
  }
  #pricing-1387 .cs-toggle.active .cs-toggle-switch {
    left: 1.4375rem;
  }
  #pricing-1387 .cs-toggle:before {
    /* top right box */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    border-radius: 2.5rem;
    transition: opacity 0.3s;
  }
  #pricing-1387 .cs-toggle-switch {
    width: 1.625rem;
    height: 1.625rem;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.1875rem;
    transition: left 0.3s;
    background: #fff;
  }
  #pricing-1387 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option1 {
    /* when the active class is on the cs-card-group, run these styles */
    transform: scale(0);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option1 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s, transform 0.6s;
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option2 {
    /* when the active class is on the cs-card-group, run these styles */
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    position: relative;
    left: auto;
    bottom: auto;
    transform: scale(1);
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option2 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
  }
  #pricing-1387 .cs-option1 {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    visibility: visible;
    left: 0;
    bottom: auto;
    transform: scale(1);
    transform-origin: top;
    transition: transform 0.6s, opacity 0.3s, visibility 0.3s;
  }
  #pricing-1387 .cs-option1 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
    transition: opacity 0.3s, transform 0.6s;
  }
  #pricing-1387 .cs-option1 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-1387 .cs-option1 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-1387 .cs-option2 {
    /* default styles when there is no active class on the cs-card-group */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scale(0);
    transform-origin: top;
    transition: transform 0.6s, opacity 0.3s, visibility 0.3s;
  }
  #pricing-1387 .cs-option2 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s, transform 0.6s;
  }
  #pricing-1387 .cs-option2 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-1387 .cs-option2 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-1387 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
  }
  #pricing-1387 .cs-item.cs-popular .cs-flex {
    background-color: var(--primary);
  }
  #pricing-1387 .cs-item.cs-popular .cs-tag {
    display: flex;
  }
  #pricing-1387 .cs-item.cs-popular .cs-package,
  #pricing-1387 .cs-item.cs-popular .cs-price,
  #pricing-1387 .cs-item.cs-popular .cs-duration {
    color: var(--bodyTextColorWhite);
  }
  #pricing-1387 .cs-item.cs-popular .cs-duration {
    opacity: 0.8;
  }
  #pricing-1387 .cs-item.cs-popular .cs-button-transparent {
    background-color: var(--buttonPrimary);
    color: #fff;
    transition: color 0.3s, border-color 0.6s, background-color 0.3s;
  }
  #pricing-1387 .cs-flex {
    /* 196px - 250px */
    width: clamp(12.25rem, 25vw, 15.625rem);
    height: clamp(12.25rem, 25vw, 15.625rem);
    margin-bottom: -6.25rem;
    border-radius: 50%;
    background-color: #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #pricing-1387 .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-1387 .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-1387 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: flex;
  }
  #pricing-1387 .cs-package {
    /* 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-1387 .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(--headerColor);
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #pricing-1387 .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-1387 .cs-info {
    width: 100%;
    padding: 5.375rem 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-1387 .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-1387 .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;
  }
  #pricing-1387 .cs-li.cs-disabled {
    opacity: 0.5;
    font-weight: 400 !important;
  }
  #pricing-1387 .cs-button-transparent {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: var(--buttonPrimary);
    background-color: #ffffff;
    padding: 0 3rem;
    border-radius: 1.875rem;
    border: 1px solid var(--buttonPrimary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #pricing-1387 .cs-button-transparent:hover {
    background-color: hsl(38, 93%, 47%);
    color: hsl(0, 0%, 100%);
    box-shadow: rgb(251, 177, 5) 0px 7px 29px 0px;
  }
  #pricing-1387 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #pricing-1387 .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-1387 .cs-container {
    max-width: 80rem;
  }
  #pricing-1387 .cs-container .cs-card-group {
    flex-direction: row;
    align-items: stretch;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1387 .cs-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #pricing-1387 .cs-content {
    text-align: left;
    width: 47%;
    align-items: flex-start;
  }
  #pricing-1387 .cs-info {
    min-height: 27rem;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2218 {
    padding: var(--sectionPadding);
    background-color: #f8f9fd;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-2218 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-2218 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-2218 .cs-text {
    margin-bottom: 1.5rem;
  }
  #sbs-2218 .cs-list {
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 24px - 32px */
    gap: clamp(1.5rem, 3vw, 2rem);
  }
  #sbs-2218 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
  }
  #sbs-2218 .cs-icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  #sbs-2218 .cs-icon {
    width: 5rem;
    height: auto;
    display: block;
  }
  #sbs-2218 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #sbs-2218 .cs-li-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.8vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-2218 .cs-image-group {
    /* scales the whole group based on the view width size and stop when that vales equals .74em, resets at desktop */
    font-size: min(2.32vw, 0.74em);
    width: 39.375em;
    height: 40.9375em;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbs-2218 .cs-image-group::before {
    content: "";
    width: 22.375em;
    height: auto;
    background: var(--secondary);
    opacity: 0.2;
    display: block;
    position: absolute;
    top: 9em;
    bottom: 11.125em;
    left: 5.5em;
  }
  #sbs-2218 .cs-picture {
    position: absolute;
  }
  #sbs-2218 .cs-picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-2218 .cs-picture1 {
    width: 19.0625em;
    height: auto;
    border: 4px solid #ffffff;
    top: 0;
    bottom: 17.5625em;
    left: 0;
  }
  #sbs-2218 .cs-picture2 {
    width: 25.8125em;
    height: auto;
    top: 10%;
    right: 25%;
    bottom: 35px;
    overflow: visible;
  }
  #sbs-2218 img {
    overflow: visible;
  }
  #sbs-2218 .cs-picture3 {
    width: 13.625em;
    height: 9.6875em;
    top: 5.25em;
    right: 4.6875em;
  }
  #sbs-2218 .cs-graphic {
    /* 131px - 255px */
    width: clamp(5.8175rem, 15vw, 15.9375rem);
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
  #sbs-2218 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--buttonPrimary);
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #sbs-2218 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-2218 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-2218 .cs-container {
    max-width: 80rem;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: stretch;
  }
  #sbs-2218 .cs-content {
    width: 47%;
    align-self: center;
  }
  #sbs-2218 .cs-li {
    align-items: center;
  }
  #sbs-2218 .cs-image-group {
    font-size: min(1.2vw, 1em);
    height: auto;
    flex: none;
  }
}
/*-- -------------------------- -->
<---          Synergy           -->
<--- -------------------------- */
/* Mobile - 360px */
#synergy-1388 {
  padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  background-color: #efefee;
}
#synergy-1388 .cs-container {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
}
#synergy-1388 .cs-content {
  text-align: center;
  width: 100%;
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#synergy-1388 .cs-topper {
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  background-color: #e63946;
  padding: 0.375rem 1rem;
  border-radius: 3rem;
  display: inline-block;
  margin-bottom: 0.75rem;
}
#synergy-1388 .cs-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1.3em;
  margin: 0;
  color: #1a1a1a;
}
#synergy-1388 {
  /* Cards Group */
}
#synergy-1388 .cs-card-group {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  list-style: none;
}
#synergy-1388 .cs-item {
  grid-column: span 12;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid #e8ecf2;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
  /* Tablet - 768px */
}
@media only screen and (min-width: 48rem) {
  #synergy-1388 .cs-item {
    grid-column: span 6;
  }
  #synergy-1388 .cs-item.cs-item-wide {
    grid-column: span 12;
  }
}
#synergy-1388 .cs-number {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0056b3;
  background-color: #eef5ff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
#synergy-1388 .cs-h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3em;
  margin: 0 0 0.75rem 0;
  color: #1a1a1a;
}
#synergy-1388 .cs-item-text {
  font-size: 0.9375rem;
  line-height: 1.6em;
  margin: 0;
  color: #555555;
}
#synergy-1388 .cs-item-text + .cs-item-text {
  margin-top: 0.75rem;
}
#synergy-1388 {
  /* Price Table Box */
}
#synergy-1388 .cs-price-box {
  width: 100%;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #e8ecf2;
  text-align: center;
}
#synergy-1388 .cs-price-title {
  font-size: 1.375rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 1.25rem 0;
}
#synergy-1388 .cs-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
#synergy-1388 .cs-price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 32rem;
}
#synergy-1388 .cs-price-table th,
#synergy-1388 .cs-price-table td {
  padding: 0.875rem 1rem;
  border: 1px solid #e8ecf2;
  font-size: 0.9375rem;
}
#synergy-1388 .cs-price-table th {
  background-color: #f1f5f9;
  font-weight: 700;
  color: #1a1a1a;
}
#synergy-1388 .cs-plan-name {
  font-weight: 700;
  background-color: #fafbfc;
}
#synergy-1388 .cs-highlight {
  background-color: #eef5ff;
  color: #0056b3;
  font-weight: 700;
}

/*-- -------------------------- -->
<---         Why Choose         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-892 {
    /* Centers Button */
    text-align: center;
    padding: var(--sectionPadding);
    /* prevents the arrow from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #why-choose-892 .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);
    position: relative;
  }
  #why-choose-892 .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;
  }
  #why-choose-892 .title-box {
    position: relative;
  }
  #why-choose-892 .cs-text {
    max-width: 62.5rem;
  }
  #why-choose-892 .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;
  }
  #why-choose-892 .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;
  }
  #why-choose-892 .cs-button-solid:hover:before {
    width: 100%;
  }
  #why-choose-892 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #why-choose-892 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    /* 20px - 32px */
    padding: clamp(1.25rem, 2.3vw, 2rem);
    background-color: #f4f6fe;
    border-radius: 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column: span 6;
    position: relative;
    z-index: 1;
  }
  #why-choose-892 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.25rem 0;
    display: block;
  }
  #why-choose-892 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #why-choose-892 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
  #why-choose-892 .cs-floater {
    width: 8.9375rem;
    height: auto;
    display: none;
    position: absolute;
    top: -38px;
    left: -17%;
    transform: rotate(-16deg);
    z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-892 .cs-container {
    max-width: 80rem;
  }
  #why-choose-892 .cs-item {
    grid-column: span 2;
  }
  #why-choose-892 .cs-floater {
    display: block;
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1260 {
    padding: var(--sectionPadding);
    padding-top: 0;
    /* 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-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    overflow: hidden;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-1260 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #pricing-1260 .cs-button-solid:hover:before {
    width: 100%;
  }
  #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: #fff;
    border: 1px solid #dad9e3;
    border-radius: 1.5rem 0 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    z-index: 1;
  }
  #pricing-1260 .cs-item.cs-popular {
    background-color: #24b893;
    border-radius: 0 0 1.5rem 0;
    border: none;
  }
  #pricing-1260 .cs-item.cs-popular .cs-popular-tag {
    display: inline-flex;
  }
  #pricing-1260 .cs-item.cs-popular .cs-package,
  #pricing-1260 .cs-item.cs-popular .cs-price,
  #pricing-1260 .cs-item.cs-popular .cs-duration,
  #pricing-1260 .cs-item.cs-popular .cs-item-text,
  #pricing-1260 .cs-item.cs-popular .cs-li {
    color: #001b36;
  }
  #pricing-1260 .cs-item.cs-popular .cs-item-text,
  #pricing-1260 .cs-item.cs-popular .cs-icon {
    filter: none;
    opacity: 1;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border: none;
    transition: color 0.3s;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent:before {
    background-color: #fff;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent:hover {
    color: var(--primary);
  }
  #pricing-1260 .cs-popular-tag {
    font-size: 0.875rem;
    line-height: 1.2em;
    text-align: center;
    width: auto;
    margin: 0;
    padding: 0.25rem 0.75rem;
    box-sizing: border-box;
    color: #ff9b7d;
    overflow: hidden;
    border-radius: 0.25rem;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* same as cs-item padding top */
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
  }
  #pricing-1260 .cs-popular-tag:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.16;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #pricing-1260 .cs-picture {
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #pricing-1260 .cs-picture:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #pricing-1260 .cs-package {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
  #pricing-1260 .cs-price {
    font-size: 1.5rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 900;
    margin: 0 0 0.75rem;
    color: #333333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-duration {
    font-size: 0.875rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--headerColor);
  }
  #pricing-1260 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 2rem;
    color: var(--bodyTextColor);
  }
  #pricing-1260 .cs-ul {
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-li.cs-disabled {
    opacity: 0.5;
  }
  #pricing-1260 .cs-li.cs-disabled .cs-icon {
    filter: grayscale(1) brightness(300%);
  }
  #pricing-1260 .cs-icon {
    width: 1.5rem;
    height: auto;
    filter: grayscale(1);
    opacity: 0.5;
    display: block;
  }
  #pricing-1260 .button-solid {
    width: 100%;
  }
  #pricing-1260 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--primary);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  }
  #pricing-1260 .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #pricing-1260 .cs-button-transparent:hover {
    color: #fff;
    border-color: #000;
    background-color: #000;
  }
  #pricing-1260 .cs-button-transparent:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1260 .cs-container {
    max-width: 80rem;
    /* remove the position so the svg waves wrapper can be positioned relative to the section container for tablet so it hugs the right edge of the screen. We set it back to relative at 1024px so it can then be positioned relative to the container again so it hugs the right edge of the container with the pricing cards */
    position: initial;
  }
  #pricing-1260 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  #pricing-1260 .cs-item {
    width: 50%;
    border-radius: 1.5rem 0 0 1.5rem;
  }
  #pricing-1260 .cs-item.cs-popular {
    border-radius: 0 1.5rem 1.5rem 0;
  }
  #pricing-1260 .cs-waves-wrapper {
    /* changes to 740px at large desktop */
    width: 55vw;
    height: 100%;
    left: auto;
    right: 0;
    bottom: auto;
    top: 0;
    transform: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1260 .cs-container {
    max-width: 80rem;
    position: relative;
    z-index: 1;
  }
  #pricing-1260 .cs-waves-wrapper {
    height: 140%;
    top: 50%;
    transform: translateY(-50%);
  }
}
/* 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: 62%;
    max-width: 46.25rem;
  }
  #pricing-1260 .cs-waves-wrapper {
    max-width: 46.25rem;
    width: 100%;
  }
}
/*-- -------------------------- -->
<---          Features          -->
<--- -------------------------- */
/* Mobile - 360px */
#features-1389 {
  padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  background-color: #ffffff;
}
#features-1389 .cs-container {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
}
#features-1389 .cs-content {
  text-align: center;
  width: 100%;
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#features-1389 .cs-topper {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0056b3;
  background-color: #eef5ff;
  padding: 0.375rem 1rem;
  border-radius: 3rem;
  display: inline-block;
  margin-bottom: 0.75rem;
}
#features-1389 .cs-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1.3em;
  margin: 0;
  color: #1a1a1a;
}
#features-1389 {
  /* Sub-category Wrapper */
}
#features-1389 .cs-category {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
#features-1389 .cs-category-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 800;
  color: #1a1a1a;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #0056b3;
  margin: 0;
}
#features-1389 {
  /* Card Grid */
}
#features-1389 .cs-card-group {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  list-style: none;
}
#features-1389 .cs-item {
  grid-column: span 12;
  background-color: #f7f9fc;
  border: 1px solid #e8ecf2;
  border-radius: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  /* Tablet - 768px */
}
@media only screen and (min-width: 48rem) {
  #features-1389 .cs-item {
    grid-column: span 6;
  }
}
#features-1389 .cs-flex {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#features-1389 .cs-h4 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4em;
  margin: 0;
  color: #1a1a1a;
}
#features-1389 .cs-item-text {
  font-size: 0.9375rem;
  line-height: 1.6em;
  margin: 0;
  color: #555555;
}
#features-1389 .cs-image-box {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
#features-1389 .cs-image-box img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/*-- -------------------------- -->
<---         Why Choose         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-890 {
    background-color: #f8f9fd;
    /* Centers Button */
    text-align: center;
    padding: var(--sectionPadding);
    /* prevents the arrow from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #why-choose-890:before {
    /* background color, done in a pseudo so it pulls from the variable color */
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.03;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #why-choose-890 .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);
    position: relative;
  }
  #why-choose-890 .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;
  }
  #why-choose-890 .cs-text {
    max-width: 62.5rem;
  }
  #why-choose-890 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #why-choose-890 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    /* 20px - 32px */
    padding: clamp(1.25rem, 2.3vw, 2rem);
    background-color: #fff;
    border-radius: 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column: span 2;
    position: relative;
    z-index: 1;
  }
  #why-choose-890 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.25rem 0;
    display: block;
  }
  #why-choose-890 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #why-choose-890 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
  #why-choose-890 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--buttonPrimary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #why-choose-890 .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;
  }
  #why-choose-890 .cs-button-solid:hover:before {
    width: 100%;
  }
  #why-choose-890 .cs-floater {
    width: 21.9375rem;
    height: auto;
    display: none;
    position: absolute;
    top: -13.75rem;
    right: -3.75rem;
    transform: rotate(-66deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-890 .cs-container {
    max-width: 80rem;
  }
  #why-choose-890 .cs-item {
    grid-column: span 1;
    flex-direction: row;
    gap: 24px;
  }
  #why-choose-890 .cs-floater {
    display: block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-890:before {
    opacity: 0.2;
    background-color: #000;
  }
  body.dark-mode #why-choose-890 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #why-choose-890 .cs-title,
  body.dark-mode #why-choose-890 .cs-text,
  body.dark-mode #why-choose-890 .cs-heading3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-890 .cs-item {
    background-color: var(--accent);
  }
  body.dark-mode #why-choose-890 .cs-h3,
  body.dark-mode #why-choose-890 .cs-item-text,
  body.dark-mode #why-choose-890 .cs-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-890 .cs-floater {
    opacity: 0.5;
  }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-2289 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #sbsr-2289 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
  }
  #sbsr-2289 .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;
    position: relative;
    z-index: 10;
  }
  #sbsr-2289 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-2289 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-2289 .cs-features {
    width: 100%;
    margin: 0 0 2rem;
    /* 24px - 32px */
    padding: clamp(1.5rem, 4vw, 2rem);
    background-color: #fef5f4;
    border-left: 0.25rem solid var(--secondary);
  }
  #sbsr-2289 .cs-h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
  }
  #sbsr-2289 .cs-ul {
    font-size: 0.75rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #sbsr-2289 .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    list-style: none;
    /* 20px - 24px */
    padding-left: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--bodyTextColor);
    position: relative;
  }
  #sbsr-2289 .cs-li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background-color: var(--secondary);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
  }
  #sbsr-2289 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--buttonPrimary);
    color: #1a1a1a;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbsr-2289 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbsr-2289 .cs-button-solid:hover {
    color: #fff;
  }
  #sbsr-2289 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-2289 .cs-image-group {
    width: 100%;
    height: 126vw;
    max-height: 39.125rem;
    display: block;
    order: -1;
    position: relative;
    z-index: 1;
  }
  #sbsr-2289 .cs-picture {
    /* big background image */
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 5.9375rem;
    left: 0;
  }
  #sbsr-2289 .cs-picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-2289 .cs-box {
    text-align: left;
    width: 91%;
    max-width: 28.125rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fffcf3;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    row-gap: 0.5rem;
    position: absolute;
    right: 50%;
    bottom: 0;
    z-index: 10;
    transform: translate(50%);
  }
  #sbsr-2289 .cs-number {
    /* 31px - 49px */
    font-size: clamp(1.9375rem, 4vw, 3.0625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    margin: 0;
    color: var(--General-Secondary, #ffc219);
  }
  #sbsr-2289 .cs-heading {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.5rem;
    color: var(--headerColor);
  }
  #sbsr-2289 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
  #sbsr-2289 .cs-graphic {
    width: 150%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-2289 .cs-box {
    flex-direction: row;
    align-items: center;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-2289 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: stretch;
    gap: 1.25rem;
  }
  #sbsr-2289 .cs-content {
    padding-right: 3.25rem;
    padding-bottom: 6.75rem;
  }
  #sbsr-2289 .cs-image-group {
    height: auto;
    min-height: 40.125rem;
    max-height: 100%;
    order: initial;
  }
  #sbsr-2289 .cs-picture {
    bottom: 4rem;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2180 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-2180 .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
  }
  #sbs-2180 .cs-content {
    text-align: left;
    width: auto;
    max-width: 46.125rem;
    margin: 0 1rem;
    margin-top: -5rem;
    /* 24px - 60px top and bottom */
    /* 24px - 60px left and right */
    padding: clamp(1.5rem, 5vw, 3.75rem);
    background-color: #f0faff;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    /* clips the pseudo element */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 10;
  }
  #sbs-2180 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-2180 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-2180 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--headerColor);
    border: 1px solid var(--headerColor);
    min-width: 11.25rem;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #sbs-2180 .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-2180 .cs-button-transparent:hover {
    color: var(--bodyTextColorWhite);
  }
  #sbs-2180 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #sbs-2180 .cs-button-transparent:hover .cs-button-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #sbs-2180 .cs-button-transparent .cs-button-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #sbs-2180 .cs-button-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
  }
  #sbs-2180 .cs-button-play {
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    color: var(--headerColor);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
  }
  #sbs-2180 .cs-wrapper {
    /* 46px - 56px */
    width: clamp(2.875rem, 5.5vw, 3.5rem);
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: -1;
  }
  #sbs-2180 .cs-button-icon {
    width: 0.875rem;
    height: auto;
    display: block;
  }
  #sbs-2180 .cs-picture {
    width: 100%;
    height: 23.75rem;
    /* clips the img corners */
    overflow: hidden;
    display: block;
    /* sends it to the top */
    order: -1;
    position: relative;
  }
  #sbs-2180 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #sbs-2180 .cs-floater {
    /* chnages on tablet */
    width: 12.5rem;
    height: auto;
    position: absolute;
    bottom: -1.25rem;
    right: -2.5rem;
    z-index: 10;
    transform: rotate(90deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-2180 .cs-container {
    position: relative;
    align-items: flex-end;
    justify-content: center;
  }
  #sbs-2180 .cs-content {
    width: 68%;
    margin: 0;
  }
  #sbs-2180 .cs-button-play {
    padding-right: 1.5rem;
  }
  #sbs-2180 .cs-button-play:before {
    content: "";
    /* 46px - 56px */
    width: clamp(2.875rem, 5.5vw, 3.5rem);
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    background: var(--primary);
    border-radius: 3.75rem;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -2;
    transition: width 0.3s;
  }
  #sbs-2180 .cs-button-play:hover {
    color: var(--bodyTextColorWhite);
  }
  #sbs-2180 .cs-button-play:hover:before {
    width: 100%;
  }
  #sbs-2180 .cs-picture {
    /* 404px - 742px */
    width: clamp(25.25rem, 53vw, 46.375rem);
    height: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 3.75rem;
  }
  #sbs-2180 .cs-floater {
    width: 30%;
    max-width: 18.875rem;
    bottom: 0;
    right: 0;
    transform: none;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #sbs-2180 .cs-content {
    margin-bottom: 10.625rem;
  }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-2181 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbsr-2181 .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
  }
  #sbsr-2181 .cs-content {
    text-align: left;
    width: auto;
    max-width: 46.125rem;
    margin: 0 1rem;
    margin-top: -5rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    /* 24px - 60px top and bottom */
    /* 24px - 60px left and right */
    padding: clamp(1.5rem, 5vw, 3.75rem);
    background-color: #f9f9f8;
    /* clips the pseudo element */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 10;
  }
  #sbsr-2181 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-2181 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-2181 .cs-button-transparent {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 11.25rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: var(--headerColor);
    border: 1px solid var(--headerColor);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbsr-2181 .cs-button-transparent:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbsr-2181 .cs-button-transparent:hover {
    color: var(--bodyTextColorWhite);
  }
  #sbsr-2181 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #sbsr-2181 .cs-button-transparent .cs-button-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #sbsr-2181 .cs-button-box {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
  }
  #sbsr-2181 .cs-button-play {
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.625rem;
    position: relative;
    transition: color 0.3s;
  }
  #sbsr-2181 .cs-wrapper {
    /* 46px - 56px */
    width: clamp(2.875rem, 5.5vw, 3.5rem);
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: -1;
  }
  #sbsr-2181 .cs-button-icon {
    width: 0.875rem;
    height: auto;
    display: block;
  }
  #sbsr-2181 .cs-picture {
    width: 100%;
    height: 23.75rem;
    /* clips the img corners */
    overflow: hidden;
    display: block;
    /* sends it to the top */
    order: -1;
    position: relative;
  }
  #sbsr-2181 .cs-picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-2181 .cs-floater {
    /* chnages on tablet */
    width: 12.5rem;
    height: auto;
    position: absolute;
    right: -2.5rem;
    bottom: -1.25rem;
    z-index: 10;
    transform: rotate(90deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-2181 .cs-container {
    justify-content: center;
    align-items: flex-start;
    position: relative;
  }
  #sbsr-2181 .cs-content {
    width: 68%;
    margin: 0;
  }
  #sbsr-2181 .cs-button-play {
    padding-right: 1.5rem;
  }
  #sbsr-2181 .cs-button-play:before {
    content: "";
    /* 46px - 56px */
    width: clamp(2.875rem, 5.5vw, 3.5rem);
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    background: var(--primary);
    opacity: 1;
    border-radius: 3.75rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    transition: width 0.3s;
  }
  #sbsr-2181 .cs-button-play:hover {
    color: var(--bodyTextColorWhite);
  }
  #sbsr-2181 .cs-button-play:hover:before {
    width: 100%;
  }
  #sbsr-2181 .cs-picture {
    /* 404px - 742px */
    width: clamp(25.25rem, 53vw, 46.375rem);
    height: auto;
    position: absolute;
    top: 3.75rem;
    right: 0;
    bottom: 0;
  }
  #sbsr-2181 .cs-floater {
    width: 30%;
    max-width: 18.875rem;
    right: 0;
    bottom: 0;
    transform: none;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #sbsr-2181 .cs-content {
    margin-bottom: 10.625rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-2181 .cs-content {
    background-color: var(--dark);
    position: relative;
    z-index: 1;
  }
  body.dark-mode #sbsr-2181 .cs-content:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  body.dark-mode #sbsr-2181 .cs-title,
  body.dark-mode #sbsr-2181 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-2181 .cs-text {
    opacity: 0.7;
  }
  body.dark-mode #sbsr-2181 .cs-button-transparent {
    color: var(--bodyTextColorWhite);
    border-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-2181 .cs-button-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #sbsr-2181 .cs-button-play {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1263 {
    padding: var(--sectionPadding);
    background-color: #efefee;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #faq-1263 .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-1263 .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-1263 .cs-title {
    margin: 0;
    color: var(--bodyTextColor);
  }
  #faq-1263 .cs-faq-group {
    width: 100%;
    max-width: 52.875rem;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.4vw, 1.25rem);
  }
  #faq-1263 .cs-faq-item {
    list-style: none;
    width: 100%;
    background-color: #fcfcfc;
    border-radius: 0.5rem;
    padding: 0;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
  }
  #faq-1263 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1263 .cs-faq-item.active .cs-button:before {
    background-color: var(--primary);
    transform: rotate(315deg);
  }
  #faq-1263 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
    transform: rotate(-315deg);
  }
  #faq-1263 .cs-faq-item.active .cs-item-p {
    height: auto;
    margin-top: 0.75rem;
    /* 16px - 24px */
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
    color: var(--bodyTextColor);
    opacity: 0.8;
  }
  #faq-1263 .cs-faq-item.active .cs-item-p:before {
    /* border top */
    content: "";
    height: 1px;
    background: #7d799c;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
  }
  #faq-1263 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    width: 100%;
    padding: 1.5rem 1.5rem 0;
    border: none;
    background: transparent;
    color: var(--bodyTextColor);
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    /* 16px - 24px */
    gap: clamp(1rem, 2.5vw, 1.5rem);
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1263 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1263 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--bodyTextColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 67%;
    right: 1.1875rem;
    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-1263 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--bodyTextColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 67%;
    right: 1rem;
    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-1263 .cs-button-text {
    width: 90%;
    padding: 0;
    display: block;
  }
  #faq-1263 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 100%;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 1.5rem 1.5rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    position: relative;
    transition: opacity 0.3s, padding-bottom 0.3s, padding-top 0.3s;
  }
  #faq-1263 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #faq-1263 .cs-background img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
body#anpi-lp h3 {
  color: #1a1a1a;
  font-size: clamp(1.5rem, 0.9901rem + 2.2663vw, 2.5rem);
  margin: 16px 0 24px;
}

.highlight {
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

.wbr {
  word-break: keep-all;
}/*# sourceMappingURL=anpi.css.map */