/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    opacity: 0;
    transform: translate(-50%, -150%);
  }
  #dark-mode-toggle {
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    display: block;
    order: 4;
    position: relative;
    z-index: 1000;
    overflow: hidden;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s;
  }
  #dark-mode-toggle .cs-sun {
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, 100%);
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    margin: 0;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
  }
  #dark-mode-toggle:hover {
    cursor: pointer;
  }
}
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    top: 0;
  }
  body.scroll #cs-navigation:before {
    border-radius: 0;
  }
  body.scroll #cs-navigation .cs-ul-wrapper {
    top: 100%;
  }
  #cs-navigation {
    width: 94%;
    max-width: 80rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem);
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    opacity: 1;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  #cs-navigation.cs-active:before {
    transform: translateX(-50%) scale(1.03);
  }
  #cs-navigation.cs-active .cs-toggle {
    transform: rotate(180deg);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-logo {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 0 auto;
    background-color: #1a1a1a;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: transform 0.6s;
  }
  #cs-navigation .cs-nav {
    /* sends it to the right in the 3rd position */
    order: 3;
  }
  #cs-navigation .cs-contact-group {
    display: none;
    position: relative;
    z-index: 10;
  }
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-social {
    display: none;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #fafbfc;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    border-radius: 0 0 1.5rem 1.5rem;
    position: absolute;
    top: 85%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 4rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-70/16rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-navigation .cs-contact-group {
    display: block;
  }
}
/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #cs-navigation:before {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-toggle {
    background-color: var(--secondary);
  }
  body.dark-mode #cs-navigation .cs-phone {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-phone-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #cs-navigation .cs-drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--primary);
    opacity: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown:hover {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
    opacity: 0;
    border-bottom: 5px solid var(--primary);
    border-radius: 0 0 1.5rem 1.5rem;
    visibility: hidden;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: 100%;
    z-index: -100;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-drop-li {
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: var(--headerColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    color: var(--bodyTextColorWhite);
    background-color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
}
/* Dark Mode - Desktop */
@media only screen and (min-width: 64rem) {
  body.dark-mode #cs-navigation .cs-drop-ul {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0;
  }
  #cs-navigation {
    width: 94%;
    max-width: 90rem;
    height: 6rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem) 0;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: flex;
    align-items: center;
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 2rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: auto;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-contact-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-social {
    height: 2rem;
    opacity: 1;
    display: none;
    visibility: visible;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    width: 2rem;
    height: 2rem;
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #cs-navigation .cs-social-link:hover {
    background-color: var(--primary);
  }
  #cs-navigation .cs-social-link:hover .cs-social-icon {
    opacity: 1;
    filter: grayscale(1) brightness(10000%);
  }
  #cs-navigation .cs-social-icon {
    width: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    /* absolutely positioned to be dead center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .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 2rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #fff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover {
    color: #1a1a1a;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cs-navigation .cs-social {
    display: flex;
  }
}
/* Dark Mode */
@media only screen and (min-width: 64rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-li-link,
  body.dark-mode #cs-navigation .cs-phone {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-phone-icon {
    filter: grayscale(1) brightness(10005);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-active {
    color: var(--secondary);
  }
  body.dark-mode #cs-navigation .cs-li-link:hover {
    color: var(--secondary);
  }
}
                                                                 
/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-2151 {
    /* 160px - 200px - top leaving extra space for the navigation */
    padding: clamp(10rem, 25.95vw, 12.5rem) 0 0 0;
    background-color: #F6EBE3;
    overflow: hidden;
    position: relative;
  }
  #hero-2151 .cs-container {
    width: 100%;
    max-width: 107.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 6vw, 6.25rem);
  }
  #hero-2151 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 16px - 100px left & right */
    padding: 0 clamp(1rem, 2vw, 6.25rem);
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-2151 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    max-width: 30ch;
  }
  #hero-2151 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    max-width: 65ch;
    margin: 0 0 2rem 0;
  }
  #hero-2151 .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: 12.5rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-2151 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #ffffff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-2151 .cs-button-solid:hover {
    color: var(--headerColor);
  }
  #hero-2151 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-2151 .cs-background {
    width: 100%;
    height: 100vw;
    max-height: 29.75rem;
    display: block;
    position: relative;
    z-index: 1;
  }
  #hero-2151 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #hero-2151 .cs-graphic {
    /* 200px - 280px */
    width: clamp(12.5rem, 25vw, 17.5rem);
    height: auto;
    display: none;
    position: absolute;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-2151 .cs-graphic {
    display: block;
    bottom: calc(clamp(3rem, 6vw, 6.25rem)*-1);
    left: 0;
    z-index: 0;
  }
  #hero-2151 .cs-content {
    /* 60px - 100px */
    padding-bottom: clamp(3.75rem, 7.82vw, 6.25rem);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-2151 {
    /* 120px - 250px top */
    /* 60px - 200px  bottom */
    padding: clamp(7.5rem, 23.82vw, 15.625rem) 1rem clamp(3.75rem, 15.82vw, 12.5rem) 1rem;
  }
  #hero-2151 .cs-container {
    flex-direction: row;
  }
  #hero-2151 .cs-content {
    /* removed padding and put it on the section */
    width: 55%;
    /* 16px - 100px */
    padding: 0 clamp(1rem, 2vw, 6.25rem);
  }
  #hero-2151 .cs-background {
    width: 42%;
    height: auto;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }
  #hero-2151 .cs-graphic {
    bottom: calc(clamp(3.75rem, 15.82vw, 12.5rem)*-1);
  }
}
/* Large Desktop - 1440px */
@media only screen and (min-width: 90rem) {
  #hero-2151 .cs-background {
    width: 50%;
  }
  #hero-2151 .cs-content {
    width: 50%;
  }
  #hero-2151 .cs-graphic {
    left: -4.375rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-2151 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #hero-2151 .cs-title,
  body.dark-mode #hero-2151 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-2151 .cs-text {
    opacity: 0.8;
  }
}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-2420 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #sbsr-2420:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbsr-2420 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-2420 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.25rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbsr-2420 .cs-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-2420 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-2420 .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;
    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);
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #sbsr-2420 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--bodyTextColorWhite);
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbsr-2420 .cs-button-solid:hover {
    color: var(--headerColor);
  }
  #sbsr-2420 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-2420 .cs-ul {
    width: 100%;
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbsr-2420 .cs-li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: left;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
  }
  #sbsr-2420 .cs-li-icon {
    width: 1rem;
    height: auto;
    flex: none;
    display: block;
    position: relative;
  }
  #sbsr-2420 .cs-image-group {
    /* scaling entire section down. font-size starts at a min in vw, and stops when that vales equals .74em, resets at desktop */
    font-size: min(2.3vw, .6em);
    width: 39.375em;
    height: 44em;
    position: relative;
  }
  #sbsr-2420 .cs-picture {
    width: 100%;
    height: 44em;
    display: block;
    position: relative;
  }
  #sbsr-2420 .cs-picture img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    position: relative;
    bottom: 0;
    left: 0;
  }
  #sbsr-2420 .cs-circle {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #sbsr-2420 .cs-message {
    font-weight: 700;
    width: 12.3125em;
    padding: 1em 1.5em;
    background-color: #fff;
    border-radius: 2em;
    text-align: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-2420 .cs-message:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    border-radius: 2em;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  #sbsr-2420 .cs-message:after {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0.25em solid var(--primary);
    opacity: 0.2;
    border-radius: 2em;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  #sbsr-2420 .cs-arrow {
    width: 4.4375em;
    height: auto;
    position: absolute;
    top: 6.1875em;
    left: 3.125em;
    transform: rotate(-29deg);
  }
  #sbsr-2420 .cs-wrapper {
    width: 100%;
    max-width: 36.25rem;
    display: flex;
    flex-direction: column;
    /* 16px - 32px */
    gap: clamp(1rem, 1.9vw, 2rem);
  }
  #sbsr-2420 .cs-graphic-group {
    /* 96px - 157px */
    width: clamp(6rem, 10vw, 9.8125rem);
    height: clamp(6rem, 10vw, 9.8125rem);
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #sbsr-2420 .cs-circle-small {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbsr-2420 .cs-graphic {
    /* 55px - 96px */
    width: clamp(3.4375rem, 5vw, 6rem);
    height: auto;
  }
  #sbsr-2420 .cs-header {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.9vw, 1.5625rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: block;
  }
  #sbsr-2420 .cs-graphic-text {
    margin-bottom: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-2420 .cs-wrapper {
    flex-direction: row;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-2420 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: flex-start;
  }
  #sbsr-2420 .cs-image-group {
    /* reset the scale */
    font-size: min(0.95vw, 1rem);
    /* prevent flexbox from squishing it */
    flex: none;
    order: 2;
  }
  #sbsr-2420 .cs-content-wrapper {
    width: 50%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-2420 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbsr-2420 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #sbsr-2420 .cs-title,
  body.dark-mode #sbsr-2420 .cs-text,
  body.dark-mode #sbsr-2420 .cs-li,
  body.dark-mode #sbsr-2420 .cs-message,
  body.dark-mode #sbsr-2420 .cs-header {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-2420 .cs-li,
  body.dark-mode #sbsr-2420 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbsr-2420 .cs-message {
    background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #sbsr-2420 .cs-arrow {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #sbsr-2420 .cs-circle,
  body.dark-mode #sbsr-2420 .cs-circle-small {
    filter: grayscale(1) brightness(100%);
  }
}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-64 {
      /* Centers Button */
      text-align: center;
      padding: var(--sectionPadding);
      background-color: #f1f1f4;
  }
  #reviews-64 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-64 .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-64 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* changes to a clamp at tablet */
      gap: 1.5rem;
  }
  #reviews-64 .cs-item {
      list-style: none;
      width: 100%;
      max-width: 25.8125rem;
      /* padding left & right 16px - 32px */
      padding: 0 clamp(1rem, 2.1vw, 2rem);
      /* 20px - 40px */
      padding-bottom: clamp(1.25rem, 4.7vw, 2.5rem);
      margin: 0;
      background: #fff;
      box-shadow: -1px 21px 39px 0px rgba(0, 0, 0, 0.05);
      /* prevent padding from adding to the height and width */
      box-sizing: border-box;
  }
  #reviews-64 .cs-img {
      /* 116px - 136px */
      width: clamp(7.25rem, 18vw, 8.5rem);
      /* 20px - 24px */
      height: clamp(1.25rem, 3.2vw, 1.5rem);
      margin: 0 auto 1.5rem;
      display: block;
      transform: translateY(-0.8125rem);
  }
  #reviews-64 .cs-name {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-align: center;
      font-weight: 700;
      margin: 0;
      color: var(--headerColor);
      display: block;
  }
  #reviews-64 .cs-desc {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: center;
      margin: 0 0 1rem;
      color: var(--label);
      display: block;
  }
  #reviews-64 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.6vw, 1rem);
      line-height: 1.5em;
      margin: auto;
      color: var(--bodyTextColor);
  }
  #reviews-64 .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: #000;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      color: var(--bodyTextColorWhite); 
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #reviews-64 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: var(--bodyTextColorWhite);
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
      color: var(--headerColor);
      
  }
  #reviews-64 .cs-button-solid:hover {
    color: var(--headerColor);
  }
  #reviews-64 .cs-button-solid:hover:before {
      width: 100%;
      color: var(--headerColor);
      
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-64 .cs-card-group {
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      /* 16px - 20px */
      column-gap: clamp(1rem, 1.5vw, 1.25rem);
      row-gap: 2.875rem;
  }
  #reviews-64 .cs-item {
      /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw to get the desired sizes fit 4 in a row and then stack when you add more*/
      width: clamp(31.5%, 30vw, 32.3%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-64 {
      background: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #reviews-64 .cs-topper {
      color: var(--primaryLight);
  }
  body.dark-mode #reviews-64 .cs-title,
  body.dark-mode #reviews-64 .cs-text,
  body.dark-mode #reviews-64 .cs-name,
  body.dark-mode #reviews-64 .cs-item-text,
  body.dark-mode #reviews-64 .cs-desc {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-64 .cs-item {
      background: var(--accent);
  }
}

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

/* Mobile */
@media only screen and (min-width: 0rem) {
  #gallery-2234 {
    padding: var(--sectionPadding);
    background-color: #fbf5f1;
  }
  #gallery-2234 .cs-container {
    width: 100%;
    max-width: 120rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-2234 .cs-content {
    width: 100%;
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  #gallery-2234 .cs-title {
    margin: 0;
  }
  #gallery-2234 .cs-image-group {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 132px - 280px */
    grid-auto-rows: clamp(8.25rem, 20vw, 17.5rem);
    /* 16px - 20px */
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
  }
  #gallery-2234 .cs-picture {
    display: block;
    position: relative;
  }
  #gallery-2234 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-2234 .cs-picture-1 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-2 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-3 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-4 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-5 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-6 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-7 {
    grid-column: span 12;
    grid-row: span 2;
  }
  #gallery-2234 .cs-picture-8 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-9 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-10 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-11 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-12 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-13 {
    grid-column: span 6;
    grid-row: span 1;
  }
}
/* Tablet */
@media only screen and (min-width: 48rem) {
  #gallery-2234 .cs-container {
    align-items: center;
  }
  #gallery-2234 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #gallery-2234 .cs-text {
    max-width: 28.1875rem;
  }
  #gallery-2234 .cs-flex {
    min-width: 45%;
  }
  #gallery-2234 .cs-picture-1 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-2 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-3 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-4 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-5 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-6 {
    grid-column: span 6;
    grid-row: span 2;
  }
  #gallery-2234 .cs-picture-7 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-8 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-9 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-10 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-11 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-12 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-13 {
    grid-column: span 3;
    grid-row: span 1;
  }
}
/* Dark mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #gallery-2234 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #gallery-2234 .cs-title,
  body.dark-mode #gallery-2234 .cs-text {
    color: var(--bodyTextColorWhite);
  }
}
                                
                                


/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-2198 {
    padding: var(--sectionPadding);
    background-color: #FDFAF8;
    position: relative;
  }
  #services-2198 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-2198 .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-2198 .cs-title {
    margin: 0;
  }
  #services-2198 .cs-card-group {
    width: 100%;
    max-width: 25rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 2rem;
  }
  #services-2198 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-column: span 12;
  }
  #services-2198 .cs-item:hover .cs-picture:before {
    background-color: var(--primary);
  }
  #services-2198 .cs-item:hover .cs-picture img {
    opacity: 0.3;
  }
  #services-2198 .cs-link {
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #services-2198 .cs-picture {
    width: 100%;
    /* 240px - 340px */
    height: clamp(15rem, 30vw, 21.25rem);
    margin-bottom: 2.75rem;
    background-color: #000;
    display: flex;
    justify-content: center;
    position: relative;
  }
  #services-2198 .cs-picture::before {
    content: "";
    width: 100%;
    height: 1.25rem;
    margin: 0 2rem;
    background-color: #E8E8E8;
    display: block;
    position: relative;
    top: 100%;
    bottom: 0;
    z-index: 10;
    transition: background-color 0.3s;
  }
  #services-2198 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services-2198 .cs-flex {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #services-2198 .cs-number {
    /* 49px - 72px */
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--primary);
    opacity: 0.2;
    position: absolute;
    z-index: 0;
  }
  #services-2198 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 1.25rem 0;
    color: var(--headerColor);
    z-index: 1;
  }
  #services-2198 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-2198 .cs-container {
    max-width: 80rem;
  }
  #services-2198 .cs-card-group {
    max-width: none;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #services-2198 .cs-item {
    grid-column: span 4;
  }
  #services-2198 .cs-picture {
    margin-bottom: 3.25rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-2198 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services-2198 .cs-title,
  body.dark-mode #services-2198 .cs-h3,
  body.dark-mode #services-2198 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-2198 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #services-2198 .cs-picture::before {
    background-color: var(--medium);
  }
}
 

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1132 {
      padding: var(--sectionPadding);
      /* chnages at tablet */
      padding-bottom: 20vw;
      background-color: var(--primary);
      overflow: hidden;
      position: relative;
      z-index: 1;
  }
  #cta-1132 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-1132 .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;
  }

  #cta-1132 .cs-title {
      text-transform: capitalize;
      max-width: 24ch;
      /* 28px - 40px */
      margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);

      color: var(--bodyTextColorWhite);
  }
  #cta-1132 .cs-button-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
  }
  #cta-1132 .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: #1a1a1a;
      min-width: 12.5rem;
      padding: 0 1.5rem;
      background-color: var(--secondary);
      border-radius: 0.5rem;
      display: inline-block;
      overflow: hidden;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color 0.3s;
  }
  #cta-1132 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      border-radius: 0.5rem;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #cta-1132 .cs-button-solid:hover {
      color: #fff;
  }
  #cta-1132 .cs-button-solid:hover:before {
      width: 100%;
  }
  #cta-1132 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #cta-1132 .cs-background:before {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: var(--primary);
      opacity: 0.8;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #cta-1132 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
  }
  #cta-1132 .cs-graphic {
      width: 100%;
      height: auto;
      display: flex;
      align-items: flex-end;
      position: absolute;
      bottom: -1px;
      left: 0;
      z-index: 10;
  }
  #cta-1132 .cs-graphic img {
      width: 100%;
      height: auto;
      display: block;
  }
  #cta-1132 .cs-dark {
      display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-1132 {
      /* changes at desktop */
      padding-bottom: 15vw;
  }
}
/* Desktop - 1024pxpx */
@media only screen and (min-width: 64rem) {
  #cta-1132 {
      /* changes at desktop */
      padding-bottom: 10vw;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cta-1132 .cs-dark {
      display: block;
  }
  body.dark-mode #cta-1132 .cs-light {
      display: none;
  }
}

                              
/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-1862 {
    padding: var(--sectionPadding);
    padding-bottom: 2.5rem;
    background-color: #F6EDDF;
  }
  #cs-footer-1862 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #cs-footer-1862 .cs-top {
    width: 100%;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6vw, 4rem);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    /* 64px - 100px */
    column-gap: clamp(4rem, 9vw, 6.25rem);
    row-gap: 2rem;
  }
  #cs-footer-1862 .cs-flex {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 32px - 48px */
    gap: clamp(2rem, 4vw, 3rem);
  }
  #cs-footer-1862 .cs-logo {
    width: 100%;
    max-width: 19.8125rem;
    height: auto;
  }
  #cs-footer-1862 .cs-logo img {
    width: 100%;
    height: auto;
  }
  #cs-footer-1862 .cs-social {
    margin: 0;
    padding: 0;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  #cs-footer-1862 .cs-social-li {
    list-style: none;
  }
  #cs-footer-1862 .cs-social-link {
    width: 2.5rem;
    height: auto;
    padding: 0.75rem;
    background-color: #DED1BD;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #cs-footer-1862 .cs-social-link:hover {
    background-color: var(--primary);
  }
  #cs-footer-1862 .cs-social-link:hover .cs-social-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #cs-footer-1862 .cs-social-icon {
    width: 1rem;
    height: 1rem;
    display: block;
  }
  #cs-footer-1862 .cs-ul {
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #cs-footer-1862 .cs-contact-ul {
    width: 100%;
    max-width: 100%;
    gap: 0.5rem;
  }
  #cs-footer-1862 .cs-li {
    list-style: none;
    margin: 0;
    display: block;
  }
  #cs-footer-1862 .cs-header {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    /* 16px - 24px bottom */
    margin: 0 0 clamp(1rem, 3.5vw, 1.5rem) 0;
    color: var(--headerColor);
    display: block;
  }
  #cs-footer-1862 .cs-link,
  #cs-footer-1862 .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
    z-index: 1;
  }
  #cs-footer-1862 .cs-link:hover:before {
    width: 100%;
  }
  #cs-footer-1862 .cs-link:before {
    /* on hover underline */
    content: "";
    width: 0%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer-1862 .cs-bottom {
    width: 100%;
    margin: 0;
    /* 20px - 40px top */
    padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
    border-top: 1px solid #DED1BD;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-footer-1862 .cs-nav {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 20px - 40px */
    column-gap: clamp(1.25rem, 5.3vw, 2.5rem);
  }
  #cs-footer-1862 .cs-nav-li {
    list-style: none;
  }
  #cs-footer-1862 .cs-nav-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    position: relative;
  }
  #cs-footer-1862 .cs-nav-link:hover {
    color: #8F5B34;
  }
  #cs-footer-1862 .cs-nav-link:hover:before {
    width: 100%;
  }
  #cs-footer-1862 .cs-nav-link:before {
    /* on hover underline */
    content: "";
    width: 0%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer-1862 .cs-copyright {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: center;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #cs-footer-1862 .cs-copyright-link {
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    margin: 0;
    color: inherit;
    display: inline-block;
  }
  #cs-footer-1862 .cs-copyright-link:hover {
    text-decoration: underline;
  }
}

/* Mobile only - center footer content */
@media only screen and (max-width: 48rem) {
  #cs-footer-1862 .cs-top {
    justify-content: center;   /* center logo + contact + hours */
    text-align: center;
  }

  #cs-footer-1862 .cs-flex,
  #cs-footer-1862 .cs-contact-ul,
  #cs-footer-1862 .cs-ul {
    align-items: center;       /* center the items */
    text-align: center;        /* center text inside */
  }
}


/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-1862 .cs-flex {
    width: auto;
    margin-right: auto;
  }
  #cs-footer-1862 .cs-contact-ul {
    /* 152px - 412px */
    width: clamp(9.5rem, 25vw, 25.75rem);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-1862 .cs-bottom {
    flex-direction: row;
  }
  #cs-footer-1862 .cs-copyright {
    text-align: right;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cs-footer-1862 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #cs-footer-1862 .cs-topper {
    color: var(--primary);
  }
  body.dark-mode #cs-footer-1862 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #cs-footer-1862 .cs-header,
  body.dark-mode #cs-footer-1862 .cs-link,
  body.dark-mode #cs-footer-1862 .cs-social-link,
  body.dark-mode #cs-footer-1862 .cs-nav-link,
  body.dark-mode #cs-footer-1862 .cs-copyright,
  body.dark-mode #cs-footer-1862 .cs-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-footer-1862 .cs-social-link {
    border-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-footer-1862 .cs-icon,
  body.dark-mode #cs-footer-1862 .cs-logo {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-footer-1862 .cs-bottom {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
                                

/* Mobile: show only the FIRST <ul> and only its first 3 items */
@media (max-width: 63.9375rem) {
  /* hide every reviews UL after the first one */
  #reviews-64 .cs-card-group:not(:first-of-type) {
    display: none !important;
  }
  /* within the first UL, hide items 4+ */
  #reviews-64 .cs-card-group:first-of-type .cs-item:nth-child(n+4) {
    display: none !important;
  }
}



/* ===== Hero Carousel (scoped to #hero-2151) ===== */
#hero-2151 .hero-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  isolation: isolate;
}

#hero-2151 .hero-slider .slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  min-height: 24rem; /* adjust to your hero height, or remove if your hero already sets height */
}

#hero-2151 .hero-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  /* Make images cover nicely */
  display: grid;
}

#hero-2151 .hero-slider .slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

#hero-2151 .hero-slider picture,
#hero-2151 .hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Controls */
#hero-2151 .hero-slider .nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background: rgba(255,255,255,0.8);
  border: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  z-index: 2;
}

#hero-2151 .hero-slider .nav:hover { background: rgba(255,255,255,1); }
#hero-2151 .hero-slider .prev { left: 0.75rem; }
#hero-2151 .hero-slider .next { right: 0.75rem; }

/* Dots */
#hero-2151 .hero-slider .dots {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  translate: -50% 0;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

#hero-2151 .hero-slider .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.5);
  padding: 0;
  cursor: pointer;
}

#hero-2151 .hero-slider .dot[aria-selected="true"] {
  background: rgba(255,255,255,1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #hero-2151 .hero-slider .slide { transition: none; }
}

/* Small tweak for mobile hit targets */
@media (max-width: 600px) {
  #hero-2151 .hero-slider .nav {
    padding: 0.6rem 0.9rem;
    font-size: 1.25rem;
  }
}


/* Make the slider fill the .cs-background box the same way the <img> did */
#hero-2151 .cs-background { position: relative; } /* already true on mobile; harmless to repeat */

#hero-2151 .cs-background .hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

#hero-2151 .hero-slider .slides {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

#hero-2151 .hero-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  display: grid; /* for the picture to stretch nicely */
}

#hero-2151 .hero-slider .slide.is-active { opacity: 1; pointer-events: auto; }

#hero-2151 .hero-slider picture,
#hero-2151 .hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* preserves proportions */
  display: block;
}

/* Controls + dots (same as before) */
#hero-2151 .hero-slider .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.8); border: 0; padding: .5rem .75rem;
  font-size: 1.5rem; border-radius: 999px; cursor: pointer; z-index: 2;
}
#hero-2151 .hero-slider .nav:hover { background: rgba(255,255,255,1); }
#hero-2151 .hero-slider .prev { left: .75rem; }
#hero-2151 .hero-slider .next { right: .75rem; }

#hero-2151 .hero-slider .dots {
  position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 2;
}
#hero-2151 .hero-slider .dot {
  width: 10px; height: 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.5);
}
#hero-2151 .hero-slider .dot[aria-selected="true"] { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  #hero-2151 .hero-slider .slide { transition: none; }
}


/* Hero slider: make it fill the .cs-background container */
#hero-2151 .cs-background { position: relative; }

#hero-2151 .cs-background .hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Slides fade logic (safe to duplicate if present earlier) */
#hero-2151 .hero-slider .slides {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

#hero-2151 .hero-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  display: grid;
}

#hero-2151 .hero-slider .slide.is-active { opacity: 1; pointer-events: auto; }

/* Maintain proportions like the old <img> */
#hero-2151 .hero-slider picture,
#hero-2151 .hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Controls & dots (same as before) */
#hero-2151 .hero-slider .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.8); border: 0; padding: .5rem .75rem;
  font-size: 1.5rem; border-radius: 999px; cursor: pointer; z-index: 2;
}
#hero-2151 .hero-slider .prev { left: .75rem; }
#hero-2151 .hero-slider .next { right: .75rem; }

#hero-2151 .hero-slider .dots {
  position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 2;
}
#hero-2151 .hero-slider .dot {
  width: 10px; height: 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.5);
}
#hero-2151 .hero-slider .dot[aria-selected="true"] { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  #hero-2151 .hero-slider .slide { transition: none; }
}

/* Make the slider fill the .cs-background box */
#hero-2151 .cs-background { position: relative; }
#hero-2151 .cs-background .hero-slider { position: absolute; inset: 0; overflow: hidden; }

/* Keep hero text above image on desktop */
#hero-2151 .cs-content { position: relative; z-index: 2; }
#hero-2151 .cs-background { z-index: 0; }

/* Dots small fix (alpha values) */
#hero-2151 .hero-slider .dot {
  border: 1px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.5);
}

/* --- HERO FIXES --- */

/* Make sure the hero section is a positioning context */
#hero-2151 { position: relative; }

/* Desktop: ensure the right-side image area actually has height */
@media (min-width: 64rem) {
  #hero-2151 .cs-background {
    position: absolute; /* you already do this, just being explicit */
    inset: 0 0 0 auto;  /* stick to the right */
    width: 42%;         /* your design number */
    min-height: 30rem;  /* <-- critical: gives the slider a real height */
    z-index: 0;         /* stays behind the text */
  }
}

/* Mobile/tablet: keep a reasonable minimum too */
@media (max-width: 63.9375rem) {
  #hero-2151 .cs-background {
    min-height: 24rem; /* safety net so it never collapses */
  }
}

/* The slider should fill its parent box */
#hero-2151 .cs-background .hero-slider {
  position: absolute;
  inset: 0;
}

/* Fallback: if JS doesn’t run, at least show the first slide */
#hero-2151 .hero-slider .slide:first-child { opacity: 1; pointer-events: auto; }

/* If any previous duplicate blocks changed transforms, keep one canonical set */
#hero-2151 .hero-slider .slides {
  height: 100%;
  min-height: 24rem;
}
#hero-2151 .hero-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  display: grid;
}
#hero-2151 .hero-slider .slide.is-active { opacity: 1; }


/* Hero: make the text column wider again on desktop */
@media (min-width: 64rem) {
  #hero-2151 .cs-content { width: 58%; padding-right: clamp(1rem, 1.5vw, 2rem); }
  #hero-2151 .cs-background { width: 42%; }
}

/* Keep the same split even on very large screens (override the 50/50 rule) */
@media (min-width: 90rem) {
  #hero-2151 .cs-content { width: 58%; }
  #hero-2151 .cs-background { width: 42%; }
}


/* --- Hero desktop alignment nudge --- */
@media (min-width: 64rem) {
  /* remove the desktop side padding that pushes both columns inward */
  #hero-2151 { padding-left: 0; padding-right: 0; }

  /* remove container padding so columns meet the edges of the container */
  #hero-2151 .cs-container { padding-left: 0; padding-right: 0; }

  /* make the text column a bit wider and reduce its internal right padding (gutter) */
  #hero-2151 .cs-content {
    width: 56%;                 /* try 56–58 if you want even more text width */
    padding-left: 1rem;
    padding-right: 1rem;        /* this is the gutter next to the image */
  }

  /* make the image column a bit narrower and pull it left */
  #hero-2151 .cs-background {
    width: 44%;                 /* try 44–42 to move image closer to the text */
    right: 0;
    left: auto;                 /* keep it stuck to the right edge */
  }
}

/* keep the same split on very large screens */
@media (min-width: 90rem) {
  #hero-2151 .cs-content { width: 50%; }
  #hero-2151 .cs-background { width: 50%; }
}

/* add to the end of acasa.css */
#hero-2151 .hero-slider .nav { display: none !important; }