/* PAGE-SPECIFIC STYLES FOR THE HOME PAGE */
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1331 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    position: relative;
    z-index: 1;
  }
  #services-1331 .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);
  }
  #services-1331 .cs-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #services-1331 .cs-flex-group {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1331 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1rem;
  }
  #services-1331 .cs-item {
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    /* 40px - 60px top & bottom,  20px - 48px left & right, */
    padding: clamp(2.5rem, 4.1vw, 3.75rem) clamp(1.25rem, 3.4vw, 3rem);
    background-color: #fff;
    grid-column: span 12;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  #services-1331 .cs-item:hover {
    transform: translateY(-1rem);
    box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
  }
  #services-1331 .cs-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
  }
  #services-1331 .cs-step {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* 48px - 100px */
    margin-bottom: clamp(3rem, 7.8vw, 6.25rem);
    color: var(--primary);
    display: block;
    text-align: inherit;
  }
  #services-1331 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 900;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
    text-align: inherit;
  }
  #services-1331 .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;
    text-align: inherit;
  }
  #services-1331 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -2;
  }
  #services-1331 .cs-background img {
    width: 100%;
    height: 100%;
    opacity: 0.06;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1331 .cs-container {
    max-width: 80rem;
  }
  #services-1331 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    /* 48px - 80px */
    gap: clamp(3rem, 6vw, 5rem);
    text-align: left;
  }
  #services-1331 .cs-title {
    margin: 0;
  }
  #services-1331 .cs-flex-group {
    width: 50%;
  }
  #services-1331 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 1rem;
  }
  #services-1331 .cs-item {
    grid-column: span 4;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1331 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services-1331 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #services-1331 .cs-title,
  body.dark-mode #services-1331 .cs-text,
  body.dark-mode #services-1331 .cs-h3,
  body.dark-mode #services-1331 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1331 .cs-text,
  body.dark-mode #services-1331 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #services-1331 .cs-item {
    background-color: var(--medium);
  }
}
/*-- -------------------------- -->
<---        Side By Side        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1586 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    background-color: #f7f8f8;
  }
  #sbs-1586 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #sbs-1586 .cs-picture {
    width: 100%;
    height: clamp(25rem, 80vw, 47rem);
    display: block;
    position: relative;
    order: 2;
  }
  #sbs-1586 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #sbs-1586 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    justify-content: center;
  }
  #sbs-1586 .cs-title {
    /* 26 characters wide including spaces */
    max-width: 26ch;
    margin: 0;
  }
  #sbs-1586 .cs-card-group {
    width: 100%;
    /* 550px - 630px */
    max-width: clamp(34.375rem, 50vw, 39.375rem);
    padding: 0;
    /* 24px - 40px */
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1.75rem, 4vw, 2.5rem) 0;
    display: grid;
    align-items: center;
    gap: clamp(1rem, 4vw, 2.5rem);
  }
  #sbs-1586 .cs-item {
    list-style: none;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1586 .wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.625rem;
  }
  #sbs-1586 .cs-item-number {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #sbs-1586 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #sbs-1586 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1586 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1586 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbs-1586 .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5em;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    width: auto;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbs-1586 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-1586 .cs-button-solid:hover {
    color: var(--primary);
  }
  #sbs-1586 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1586 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-1586 .cs-content {
    width: 50%;
    max-width: 39.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbs-1586 .cs-card-group {
    grid-template-columns: repeat(12, 1fr);
  }
  #sbs-1586 .cs-item {
    grid-column: span 6;
  }
  #sbs-1586 .cs-picture {
    height: auto;
    min-height: 32.8125rem;
    order: -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1586 .cs-content {
    padding: 5.25rem 0;
    align-self: center;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-1586 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-1586 .cs-topper {
    color: var(--primary);
  }
  body.dark-mode #sbs-1586 .cs-title,
  body.dark-mode #sbs-1586 .cs-li,
  body.dark-mode #sbs-1586 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-1586 .cs-li,
  body.dark-mode #sbs-1586 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-1586 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
}
/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1113 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
  #list-1113 {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  #list-1113 .cs-li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #list-1113 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.75rem;
  }
  #list-1113 .cs-li-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Dark Mode, copy and paste only the styles inside the #list-1113 brackets into your section's dark mode media query */
@media only screen and (min-width: 0rem) {
  body.dark-mode #list-1113 .cs-li-text,
  body.dark-mode #list-1113 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #list-1113 .cs-li-text {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1727 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #services-1727 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1727 .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;
  }
  #services-1727 .cs-title {
    max-width: 25ch;
  }
  #services-1727 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1727 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    /* 240px - 320px */
    height: clamp(15rem, 40vw, 20rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    grid-column: span 12;
    grid-row: span 1;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #services-1727 .cs-item:hover .cs-background:before {
    opacity: 0.8;
  }
  #services-1727 .cs-item:hover .cs-background img {
    transform: scale(1.2);
  }
  #services-1727 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and width of the link */
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  #services-1727 .cs-number {
    font-size: 5.25rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0);
    opacity: 100%;
    position: absolute;
    /* 16px - 32px */
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    transition: opacity 0.3s, top 0.3s;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--bodyTextColorWhite);
  }
  #services-1727 .cs-h3 {
    /* 25px - 31px */
    font-size: clamp(1.5625rem, 2.5vw, 1.9375rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #services-1727 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1727 .cs-background:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: background-color 0.3s, opacity 0.3s;
  }
  #services-1727 .cs-background img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1727 .cs-item {
    grid-column: span 4;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1727 .cs-title,
  body.dark-mode #services-1727 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1727 .cs-text {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-701 {
    padding: var(--sectionPadding);
    background-color: #f7f8f8;
  }
  #pricing-701 .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-701 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #pricing-701 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #pricing-701 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    margin: 0;
    /* 20px - 40px top & bottom */
    /* 16px - 32px left & right */
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem);
    background-color: #fff;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #pricing-701 .cs-item.cs-popular {
    background-color: var(--primary);
  }
  #pricing-701 .cs-item.cs-popular .cs-package {
    color: #f6e5db;
  }
  #pricing-701 .cs-item.cs-popular .cs-price,
  #pricing-701 .cs-item.cs-popular .cs-desc,
  #pricing-701 .cs-item.cs-popular .cs-item-p,
  #pricing-701 .cs-item.cs-popular .cs-li {
    color: var(--bodyTextColorWhite);
  }
  #pricing-701 .cs-item.cs-popular .cs-icon {
    /* if icon is not black, this turns it white */
    filter: grayscale(1) brightness(1000%);
  }
  #pricing-701 .cs-item.cs-popular .cs-button-solid {
    background-color: #f6e5db;
    color: #1a1a1a;
    transition: color 0.3s;
  }
  #pricing-701 .cs-item.cs-popular .cs-button-solid:hover {
    color: #fff;
  }
  #pricing-701 .cs-package {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.4vw, 1rem);
    line-height: 1.2em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #767676;
    display: block;
  }
  #pricing-701 .cs-price {
    /* 31px - 49px */
    font-size: var(--headerFontSize);
    line-height: 1.2em;
    text-align: center;
    font-weight: 900;
    margin: 0;
    color: var(--headerColor);
  }
  #pricing-701 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.2em;
    text-align: center;
    margin: 0 0 0.5rem 0;
    color: var(--bodyTextColor);
    opacity: 0.8;
  }
  #pricing-701 .cs-item-p {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: center;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #pricing-701 .cs-ul {
    margin: 1.5rem 0;
    padding: 1.5rem 0 0 0;
    border-top: 1px solid #eff1f0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #pricing-701 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.2em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: space-between;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 1rem;
  }
  #pricing-701 .cs-li.cs-disabled {
    opacity: 0.5;
  }
  #pricing-701 .cs-icon {
    width: 1.125rem;
    height: auto;
    display: block;
  }
  #pricing-701 .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);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-701 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #pricing-701 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-701 .cs-price-button {
    /* pushes up against the cs-ul so if there's loess li's in the list, the button always pushes itself to the bottom */
    margin-top: auto;
    width: 100%;
    border-radius: 0;
  }
  #pricing-701 .cs-price-button:before {
    border-radius: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-701 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  #pricing-701 .cs-option2 {
    top: auto;
    bottom: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #pricing-701 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #pricing-701 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #pricing-701 .cs-title,
  body.dark-mode #pricing-701 .cs-text,
  body.dark-mode #pricing-701 .cs-item-p,
  body.dark-mode #pricing-701 .cs-package,
  body.dark-mode #pricing-701 .cs-li,
  body.dark-mode #pricing-701 .cs-price,
  body.dark-mode #pricing-701 .cs-desc,
  body.dark-mode #pricing-701 .cs-plan {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-701 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #pricing-701 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #pricing-701 .cs-item.cs-popular {
    background-color: var(--primary);
  }
  body.dark-mode #pricing-701 .cs-icon {
    /* makes icon white (if it wasnt black to start) */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #pricing-701 .cs-price-button {
    background-color: var(--bodyTextColorWhite);
    color: #1a1a1a;
    transition: color 0.3s;
  }
  body.dark-mode #pricing-701 .cs-price-button:hover {
    color: #fff;
  }
}