/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body {
    position: relative;
    z-index: 1;
  }
  body:before {
    content: "";
    width: 100%;
    height: 0%;
    background: #fff;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: height 0.3s;
  }
  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%;
  }
  body.cs-open {
    overflow: hidden;
  }
  body.cs-open:before {
    height: 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: var(--primary);
    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-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
  }
  #cs-navigation.cs-active .cs-toggle {
    transform: rotate(180deg);
  }
  #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: var(--primary);
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    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: 1;
  }
  #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: var(--gold);
    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: 100vh;
    padding-bottom: 3rem;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    min-width: 100%;
    font-family: var(--font-heading);
    text-transform: uppercase;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
    background-color: var(--primary);
  }
  #cs-navigation .cs-li {
    list-style: none;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    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-link {
    font-size: 1rem;
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link::before {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #C2A766;
  transition: width 0.3s ease;
}

#cs-navigation .cs-li-link:hover::before,
#cs-navigation .cs-li-link.cs-active::before {
  width: 100%;
}

  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-navigation .cs-contact-group {
    display: block;
  }
  #cs-navigation .cs-phone-button {
  font-family: var(--font-heading);
  font-size: 1rem;
  text-decoration: none;
  background-color: transparent;
  color: white;
  border: 1px solid #C2A766;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#cs-navigation .cs-phone-button:hover {
  background-color: white;
  color: var(--primary);
}
}
/*-- -------------------------- -->
<---     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: var(--primary);
    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-button {
  font-family: var(--font-heading);
  font-size: 1rem;
  text-decoration: none;
  background-color: transparent;
  color: white;
  border: 1px solid #C2A766;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#cs-navigation .cs-phone-button:hover {
  background-color: white;
  color: var(--primary);
  border:1px solid white;
}

  #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;
    text-transform: uppercase;
    margin: 0;
    color: var(--bodyTextColorWhite);
    font-family: var(--font-heading);
    display: block;
    position: relative;
    transition: color 0.3s;
  }

  #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%;
  }
  #cs-navigation .cs-li-link::before {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #C2A766;
  transition: width 0.3s ease;
}

#cs-navigation .cs-li-link:hover::before {
  width: 100%;
}
#cs-navigation .cs-li-link.cs-active::before {
  width: 100%;
}
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  }

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1949 {
    padding: var(--sectionPadding);
    /* 160px - 220px - leaving extra space for the navigation */
    padding-top: clamp(10rem, 26.95vw, 13.75rem);
    padding-bottom: 6.25rem;
    position: relative;
    z-index: 1;
}
  }
  #hero-1949 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1949 .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;
  }
  #hero-1949 .cs-title,
  #hero-1949 .cs-text {
    margin-bottom: 1.25rem;
  }
  #hero-1949 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  }
  #hero-1949 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
  }
 .cs-button-solid {
  font-size: 1rem;
  line-height: clamp(2.875rem, 5.5vw, 3.5rem);
  text-decoration: none;
  margin: 0;
  padding: 0 clamp(2rem, 4vw, 3rem);
  background-color: var(--primary);
  border: 1px solid var(--gold);
  color: #fff;
  display: inline-block;
  position: relative;
  border-radius: 0.25rem;
  z-index: 1;
}

.cs-button-solid:before {
  content: '';
  width: 0%;
  height: 100%;
  background: #C2A766;
  opacity: 1;
  display: block;
  position: absolute;
  border: none;
  border-radius: 0.25rem;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width 0.3s;
}

.cs-button-solid:hover:before {
  width: 100%;
}

  #hero-1949 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-1949 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    margin-bottom: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 2rem 0;
    background-color: transparent;
    border-top: var(--headerColor) 1px solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    grid-column: span 12;
    grid-row: span 1;
    position: relative;
    z-index: 1;
    align-self: stretch;
  }
  #hero-1949 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #hero-1949 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #hero-1949 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1949 .cs-background:before {
    /* Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #F7F7F7;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    opacity: 0.65;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1949 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
  }
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1949 .cs-container {
    align-items: flex-start;
  }
  #hero-1949 .cs-content {
    text-align: left;
    margin-left: 0;
    width: 50%;
    align-items: flex-start;
  }
  #hero-1949 .cs-item {
    grid-column: span 3;
  }
  #hero-1949 .cs-background {
    height: 100%;
  }
  #hero-1949 .cs-background:before {
    height: 100%;
    background: linear-gradient(0deg, rgba(247, 247, 247, 0.75) 26%, rgba(247, 247, 247, 0) 70.26%);
    opacity: 1;
  }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1949 .cs-background {
    background: url("images/homepage-hero.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1949 .cs-background img {
    display: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-476 {
        padding: var(--sectionPadding);
        /* 60px - 200px */
        /* padding-top: clamp(3.75em, 11vw, 12.5em); */
        /* clips the cs-background section so it doesn't cause any overflow issues when it breaks the container */
        overflow: hidden;
    }
    #services-476 .cs-container {
        width: 100%;
        max-width: 80em;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #services-476 .cs-right-section {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 88px - 118px */
        gap: clamp(5.5rem, 10vw, 7.375rem);
    }
    #services-476 .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-476 .cs-title {
        max-width: 20ch;
    }
    #services-476 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* resets to a clamp at tablet */
        gap: 3.625rem;
    }
    #services-476 .cs-item {
        list-style: none;
        width: 100%;
        /* 24px - 60px left & right */
        padding: 0 clamp(1.5rem, 2vw, 3.75rem) 2.5rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        border: 1px solid #b4b2c7;
        border-radius: 0.75rem;
        box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        transition: border-color 0.3s;
    }
    #services-476 .cs-item:hover {
        border-color: var(--primaryLight);
    }
    #services-476 .cs-item:hover .cs-picture {
        transform: scale(1.1);
    }
    #services-476 .cs-item:hover:before {
        opacity: 1;
    }
    #services-476 .cs-item:before {
        /* green border box on hover */
        content: "";
        width: 100%;
        height: 100%;
        background: transparent;
        /* prevent border from affecting height and width */
        box-sizing: border-box;
        border: 3px solid var(--primaryLight);
        border-radius: 0.625rem;
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        opacity: 0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        transition: opacity 0.3s;
    }
    #services-476 .cs-picture {
        /* 60px - 110px */
        width: clamp(3.75rem, 7vw, 6.875rem);
        height: clamp(3.75rem, 7vw, 6.875rem);
        /* wrapped in a calc function to multiple the clamp by a negative number to make its value negative, and multiple it by .5 so it pulls itself by half the height of itself. We copy and pasted the same height clamp. These must be equal every time */
        margin-top: calc(clamp(3.75rem, 7vw, 6.875rem) * -0.5);
        /* 30px - 40px */
        margin-bottom: clamp(1.875rem, 5vw, 2.5rem);
        background-color: #fff;
        border: 2px solid var(--primaryLight);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        /* places it above the hover border box */
        z-index: 10;
        transition: transform 0.3s;
    }
    #services-476 .cs-icon {
        /* 32px - 56px */
        width: clamp(2rem, 5vw, 3.5rem);
        height: auto;
        display: block;
    }
    #services-476 .cs-h3 {
        /* 20px - 31px */
        font-size: clamp(1.25rem, 2vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
    }
    #services-476 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        font-weight: 400;
        text-align: center;
        /* 12px - 32px */
        margin: 0 0 clamp(0.75rem, 3vw, 2rem);
        color: var(--bodyTextColor);
    }
    #services-476 .cs-link {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.5em;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        margin: auto 0 0 0;
        color: var(--primary);
        position: relative;
        display: block;
    }
    #services-476 .cs-link:hover:before {
        width: 100%;
    }
    #services-476 .cs-link:before {
        /* green underline on hover */
        content: "";
        width: 0%;
        height: 2px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -2px;
        left: 0;
        transition: width 0.3s;
    }
    #services-476 .cs-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    #services-476 .cs-tag {
        /* 20px - 31px */
        font-size: clamp(1.25rem, 3vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: left;
        margin: 0 0 0.25rem 0;
        color: #fff;
        display: block;
    }
    #services-476 .cs-desc {
        /* 14px - 25px */
        font-size: clamp(0.875rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 400;
        text-align: left;
        margin: 0 0 0.25rem 0;
        color: #fff;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-476 .cs-container {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        /* 60px - 130px */
        gap: clamp(3.75rem, 9vw, 8.125rem);
    }
    #services-476 .cs-right-section {
        max-width: 100%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #services-476 .cs-info {
        /* prevents flex-box from squishing it */
        flex: none;
    }
    #services-476 .cs-card-group {
        flex-direction: row;
        /* 16px - 20px */
        gap: clamp(1rem, 1.3vw, 1.25rem);
    }
}

/*-- -------------------------- -->
<---       Why Choose Us        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1631 {
    padding: var(--sectionPadding);
    background-color: #f8f8f8;
  }
  #why-choose-1631 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #why-choose-1631 .cs-flex {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #why-choose-1631 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 38rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1631 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1631 .cs-text:last-of-type {
    margin-bottom: 0rem;
  }
  #why-choose-1631 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    max-width: 39.375rem;
    border-radius: 0.5rem;
    height: 75vw; /* was 50vw */
    max-height: none; /* was 25rem */
    overflow: hidden;
    order: 2;
}
  #why-choose-1631 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

  #why-choose-1631 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 2rem);
    row-gap: 1.75rem;
  }
  #why-choose-1631 .cs-item {
    list-style: none;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
  }
  #why-choose-1631 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s;
  }
  #why-choose-1631 .cs-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--primaryLight);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #why-choose-1631 .cs-h3-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

  #why-choose-1631 .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,
                opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1631 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1631 .cs-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #why-choose-1631 .cs-content {
    width: 50%;
    /* 32px - 56px top and bottom */
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    align-self: center;
    flex: none;
  }
  #why-choose-1631 .cs-picture {
    width: 47vw;
    min-height: 25rem;
    max-height: 100%;
    height: auto;
    /* sends it to the left in the 1st position */
    order: -1;
    position: relative;
  }
  #why-choose-1631 .cs-item {
    grid-column: span 4;
  }
}
                                           
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1897 {
    padding: var(--sectionPadding);
    background-color:white;
    /* stops the cs-graphics from causing an overflow */
    overflow: hidden;
    position: relative;
}
  #gallery-1897 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #gallery-1897 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
  }
  #gallery-1897 .cs-title {
    max-width: 25ch;
    margin: 0;
  }
  #gallery-1897 .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(--secondary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #gallery-1897 .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;
  }
  #gallery-1897 .cs-button-solid:hover {
    color: #fff;
  }
  #gallery-1897 .cs-button-solid:hover:before {
    width: 100%;
  }
  #gallery-1897 .cs-gallery {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    z-index: 1;
  }
  #gallery-1897 .cs-item {
    width: 100%;
    /* 16px - 32px */
    padding: clamp(1rem, 4vw, 2rem);
    background-color: #faf6f2;
    /* 16px - 32px */
    border-radius: 1rem;
    display: grid;
    /* 8px - 16px */
    column-gap: clamp(0.5rem, 2vw, 1rem);
    row-gap: 1rem;
  }
  #gallery-1897 .cs-item-text {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
    grid-column: span 2;
  }
  #gallery-1897 .cs-picture-group {
    /* 160px - 320px */
    min-height: clamp(10rem, 23vw, 20rem);
    overflow: hidden;
    border-radius: 1rem;
    grid-column: span 1;
    position: relative;
  }
  #gallery-1897 .cs-picture {
    width: 100%;
    height: 100%;
    display: block;
  }
  #gallery-1897 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-1897 .cs-tag {
    font-size: 0.875rem;
    line-height: 1.5em;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.24);
    color: var(--bodyTextColorWhite);
    border: 1px solid var(--bodyTextColorWhite);
    border-radius: 1.875rem;
    position: absolute;
    /* 8px - 16px */
    bottom: clamp(0.5rem, 2vw, 1rem);
    left: clamp(0.5rem, 2vw, 1rem);
    backdrop-filter: blur(8px);
  }
  #gallery-1897 .cs-graphic {
    /* 500px - 835px */
    width: clamp(31.25rem, 60vw, 52.1875rem);
    /* 453px - 757px */
    height: clamp(28.3125rem, 55vw, 47.3125rem);
    object-fit: cover;
    position: absolute;
    z-index: 0;
  }
  #gallery-1897 .cs-graphic-top {
    top: 0;
    right: -8.875rem;
  }
  #gallery-1897 .cs-graphic-bottom {
    bottom: 0;
    left: 0;
  }
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-1897 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #gallery-1897 .cs-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  #gallery-1897 .cs-graphic-top {
    right: -8.375rem;
    transform: initial;
  }
  #gallery-1897 .cs-graphic-bottom {
    left: -7.5rem;
    transform: initial;
  }
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #gallery-1897 .cs-graphic-top {
    margin-left: 15rem;
    left: 50%;
  }
  #gallery-1897 .cs-graphic-bottom {
    margin-right: 16.25rem;
    right: 50%;
    left: initial;
  }
}
                                
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact-1389 {
        padding: var(--sectionPadding);
        background-color: #f7f7f7;
        position: relative;
        z-index: 1;
    }
    #contact-1389 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: column;
        column-gap: auto;
        /* 48px - 64px */
        gap: clamp(2rem, 3vw, 3rem);
        position: relative;
    }
    #contact-1389 .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;
    }

    #contact-1389 .cs-title {
        max-width: 23ch;
    }
    #contact-1389 .cs-text {
        margin-bottom: 1rem;
    }
    #contact-1389 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #contact-1389 .cs-ul {
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        position: relative;
    }
    #contact-1389 .cs-li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.25rem;
    }
    #contact-1389 .cs-li:hover .cs-icon-wrapper {
        transform: scale(1.1);
    }
    #contact-1389 .cs-header {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.75rem;
        color: var(--headerColor);
        display: block;
    }
    #contact-1389 .cs-link {
        font-size: 1rem;
        line-height: 1.5em;
        text-decoration: none;
        color: var(--bodyTextColor);
        display: block;
        position: relative;
    }
    #contact-1389 .cs-link:hover {
        text-decoration: underline;
    }
    #contact-1389 .cs-icon-wrapper {
        width: 3.75rem;
        height: 3.75rem;
        margin: 0;
        border-radius: 50%;
        border: 1px solid #bababa;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        transition: transform 0.3s;
    }
    #contact-1389 .cs-icon {
        width: 1.5rem;
        height: auto;
        display: block;
    }
    #contact-1389 .cs-form {
        width: 100%;
        max-width: 39.375rem;
        /* 24px - 48px top and bottom */
        /* 16px - 48px left and right */
        padding: clamp(1.5rem, 5.18vw, 3rem) clamp(1rem, 4vw, 3rem);
        /* prevents flexbox from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 1rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }
    #contact-1389 .cs-h3 {
        /* 20px - 39px */
        font-size: clamp(1.25rem, 3vw, 2.4375rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.25rem 0;
        color: var(--headerColor);
    }
    #contact-1389 .cs-label {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        width: 100%;
        color: var(--headerColor);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.25rem;
    }
    #contact-1389 .cs-input {
        font-size: 1rem;
        width: 100%;
        height: 3.5rem;
        padding: 0;
        padding-left: 1.5rem;
        color: var(--headerColor);
        background-color: #f7f7f7;
        border-radius: 0.5rem;
        border: none;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #contact-1389 .cs-input::placeholder {
        color: #7d799c;
        opacity: 0.6;
    }
    #contact-1389 .cs-textarea {
        min-height: 7.5rem;
        padding-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-family: inherit;
    }
    #contact-1389 .cs-button-solid {
        font-size: 1rem;
        font-family: 'Open Sans';
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        margin: 0;
        /* 32px - 48px */
        padding: 0 clamp(2rem, 4vw, 3rem);
        background-color: var(--primary);
        border: 1px solid var(--gold);
        color: #fff;
        display: inline-block;
        position: relative;
        border-radius: 0.25rem;
        z-index: 1;
    }
    #contact-1389 .cs-button-solid:before {
        content: '';
        width: 0%;
        height: 100%;
        background: #C2A766;
        opacity: 1;
        display: block;
        position: absolute;
        border: none;
        border-radius: 0.25rem;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
  }
    #contact-1389 .cs-button-solid:hover {
        color: var(--primary);
    }
    #contact-1389 .cs-button-solid:hover:before {
        width: 100%;
    }
    #contact-1389 .cs-submit {
        width: 100%;
        min-width: 12.5rem;
        border: none;
    }
    #contact-1389 .cs-submit:hover {
        color: #fff;
        cursor: pointer;
    }
    #contact-1389 {
    font-family: var(--font-body);
    }
    #contact-1389 {
      font-family: var(--font-body);
    }

    #contact-1389 input,
    #contact-1389 textarea,
    #contact-1389 button {
      font-family: var(--font-body);
    }

    #contact-1389 input::placeholder,
    #contact-1389 textarea::placeholder {
      font-family: var(--font-body);
      font-size: inherit;
      color: inherit;
    }

}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #contact-1389 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
    }
    #contact-1389 .cs-content {
        width: 47%;
        /* prevents flexbox from squishing it */
        flex: none;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #contact-1389 .cs-submit {
        width: auto;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #contact-1389 .cs-form {
        width: 46%;
        max-width: 36.125rem;
    }
    #contact-1389 .cs-submit {
        width: auto;
    }
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
    #contact-1389 .cs-graphic {
        display: block;
    }
}
                                
/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-841 {
    padding: var(--sectionPadding);
    /* 30px - 50px */
    padding-bottom: clamp(1.875rem, 5vw, 3.125rem);
    background-color: var(--primary);
  }
  #cs-footer-841 .cs-container {
    width: 100%;
    /* reset on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 3rem;
    row-gap: 2rem;
  }
  #cs-footer-841 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #cs-footer-841 .cs-logo {
    width: 13.125rem;
    height: auto;
    margin: 0 0 1.5rem 0;
    display: block;
  }
  #cs-footer-841 .cs-logo-img {
    width: 100%;
    height: auto;
  }
  #cs-footer-841 .cs-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.5rem;
    color: var(--bodyTextColorWhite);
  }
  #cs-footer-841 .cs-social {
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.75rem;
  }
  #cs-footer-841 .cs-social-link {
    width: 2rem;
    height: 2rem;
    background-color: var(--bodyTextColorWhite);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s, background-color 0.3s;
  }
  #cs-footer-841 .cs-social-link:hover {
    background-color: var(--primaryLight);
    transform: translateY(-0.1875rem);
  }
  #cs-footer-841 .cs-social-img {
    height: 0.75rem;
    width: auto;
    display: block;
  }
  #cs-footer-841 .cs-header {
    font-size: 1.25rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColorWhite);
    display: block;
    position: relative;
  }
  #cs-footer-841 .cs-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #cs-footer-841 .cs-ul-1 {
    width: 100%;
    max-width: 21.875rem;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 2rem;
  }
  #cs-footer-841 .cs-ul-1 .cs-li {
    width: 44%;
  }
  #cs-footer-841 .cs-li {
    list-style: none;
  }
  #cs-footer-841 .cs-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    text-align: left;
    color: var(--bodyTextColorWhite);
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: color 0.3s;
  }
  #cs-footer-841 .cs-link:hover {
    color: var(--gold);
  }
  #cs-footer-841 .cs-icon {
    width: 1.25rem;
    height: auto;
    margin-right: 0.125rem;
    display: block;
    color: var(--gold);
  }
  #cs-footer-841 .cs-bottom {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    /* 48px - 64px */
    margin: clamp(3rem, 7vw, 4rem) auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gold);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
  #cs-footer-841 .cs-credit,
  #cs-footer-841 .cs-bottom-link,
  #cs-footer-841 .cs-credit-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    width: auto;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    transition: color 0.3s;
  }
  #cs-footer-841 .cs-credit {
    width: 100%;
  }
  #cs-footer-841 .cs-credit-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    width: auto;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
  }
  #cs-footer-841 .cs-credit-link:hover {
    color: var(--primary);
  }
  #cs-footer-841 .cs-bottom-links {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-footer-841 .cs-bottom-link {
    display: flex;
    align-items: center;
  }
  #cs-footer-841 .cs-bottom-link:hover {
    color: var(--primary);
  }
  #cs-footer-841 .cs-bottom-link:last-of-type:before {
    /* separator */
    content: "";
    width: 1px;
    height: 0.875rem;
    margin: 0 0.75rem;
    background: var(--primaryLight);
    opacity: 1;
    display: block;
  }
  .cs-text.footer {
    color: var(--gold);
  }
  .footer-divider {
    color: var(--gold);
  }

}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-841 .cs-container {
    max-width: 80rem;
    /* 48px - 64px */
    row-gap: clamp(3rem, 7vw, 4rem);
  }
  #cs-footer-841 .cs-bottom {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  #cs-footer-841 .cs-credit {
    text-align: left;
  }
  #cs-footer-841 .cs-bottom-links {
    justify-content: flex-end;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-841 .cs-container {
    /* pushes all flex children to the top */
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  #cs-footer-841 .cs-logo-group {
    width: 30%;
    max-width: 25rem;
    /* pushes everything to the right of it as far as possible in a flexbox */
    margin-right: auto;
  }
  #cs-footer-841 .cs-text {
    width: 100%;
  }
  #cs-footer-841 .cs-social {
    flex-direction: row;
    position: relative;
    top: auto;
    right: auto;
  }
}
}

/* HOME PAGE END  */

/* Internal heros  */

@media only screen and (min-width: 0rem) {
  #hero-1957 {
    padding: var(--sectionPadding);
    padding-top: clamp(10rem, 26.95vw, 13.75rem);
    padding-bottom: 6.25rem;
    position: relative;
    z-index: 1;
    min-height: auto;
  }

  #hero-1957 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }

  #hero-1957 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #hero-1957 .cs-title,
  #hero-1957 .cs-text {
    margin-bottom: 1.25rem;
  }

  #hero-1957 .cs-title {
    font-size: clamp(2.25rem, 4.8vw, 3.5rem);
    color: var(--headerColor);
  }

  #hero-1957 .cs-text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--bodyTextColor);
  }

  #hero-1957 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }

  #hero-1957 .cs-background:before {
  content: '';
  width: 100%;
  height: 100%;
  background: #F7F7F7;
  pointer-events: none;
  opacity: 0.65;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

  }

  #hero-1957 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
  }

@media only screen and (min-width: 48rem) {
  #hero-1957 .cs-container {
    align-items: flex-start;
  }

  #hero-1957 .cs-content {
    text-align: left;
    margin-left: 0;
    width: 50%;
    align-items: flex-start;
  }

  #hero-1957 .cs-background:before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0) 70%);
    opacity: 1;
  }
}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-1593,
  #RPsbsr-1593 {
    padding: var(--sectionPadding);
  }
  #RPsbs-1593 .cs-container,
  #RPsbsr-1593 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #RPsbs-1593 .cs-content,
  #RPsbsr-1593 .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;
  }
  #RPsbs-1593 .cs-text,
  #RPsbsr-1593 .cs-text {
    margin-bottom: 1rem;
  }
  #RPsbs-1593 .cs-text:last-of-type,
  #RPsbsr-1593 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #RPsbs-1593 .cs-image-group,
  #RPsbsr-1593 .cs-image-group {
    /* scales the whole group based on the view width size and stop when that vales equals .745em, resets at desktop */
    font-size: min(1.959vw, .745em);
    width: 39.375em;
    /* we set a minimum height so it never gets smaller than this value */
    min-height: 39.25em;
    display: block;
    position: relative;
    z-index: 1;
  }
  #RPsbs-1593 .cs-picture,
  #RPsbsr-1593 .cs-picture {
    position: absolute;
  }
  #RPsbs-1593 .cs-picture img,
  #RPsbsr-1593 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.5rem;
  }
  #RPsbs-1593 .cs-picture1,
  #RPsbsr-1593 .cs-picture1 {
    /* the percentage heights allow them to be responsive to the height of the parent cs-image-group. On desktop, when the felxbox is set to aling-items: stretch, the cs-image group will stretch to fill the height of the parent container. So when you add more content to the cs-content group and make it taller, the cs-image group will get taller with it and every image will stretch with the parent, making this entire group responsive to the changing amounts of content next to it */
    width: 25.8125em;
    height: 79.617834%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #RPsbs-1593 .cs-picture2,
  #RPsbsr-1593 .cs-picture2 {
    width: 25.8125em;
    height: 44.585987%;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbs-1593 .cs-container,
  #RPsbsr-1593 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #RPsbs-1593 .cs-content,
  #RPsbsr-1593 .cs-content {
    /* this padding sets a minimum gap between the top and bottom of the content div and the top and bottom of the cs-image-group */
    padding: 3.75rem 0;
    /* while the cs-image-group will stretch to fill the height of the parent, this property will ensure that the cs-content group aligns itse;f in the center of the parent div instead of stretching */
    align-self: center;
  }
  #RPsbs-1593 .cs-image-group,
  #RPsbsr-1593 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr-1593 {
    background-color: #f7f7f7;
  }
  #RPsbsr-1593 .cs-picture1 {
    left: auto;
    right: 0;
  }
  #RPsbsr-1593 .cs-picture2 {
    right: auto;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbsr-1593 .cs-image-group {
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
        
/*-- -------------------------- -->
<---         CS-Content         -->
<--- -------------------------- -*/

/* you can place this CSS group in your global stylesheet that is loaded on every page of the site so all you need to do is copy and paste the HTML into any section and it will all work. Or piece it inside the media queries in whatever section you want to add it to. You can also remove the cs-topper, cs-title, and cs-text and if they aren't already in your global stylesheet you can paste them outside these media queries so all cs-topper, cs-title, and cs-text on your site will pull from 1 place. */

/* Mobile */
@media only screen and (min-width: 0rem) {
    #cs-content-831 {
        /* 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;
        padding-top: 100px;
        padding-bottom: 100px;
        padding: var(--sectionPadding);
}

    }
    #cs-content-831 .cs-topper {
        font-size: var(--topperFontSize);
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
        display: block;
    }
    #cs-content-831 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 700;
        line-height: 1.2em;
        text-align: inherit;
        max-width: 43.75rem;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #cs-content-831 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
  
    /*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

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

    #faq-326 .cs-title {
        margin: 0;
    }
    #faq-326 .cs-faq-group {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.75rem;
    }
    #faq-326 .cs-faq-item {
        list-style: none;
        width: 100%;
        background-color: #f7f7f7;
        /* clips all corners of the button that overlap the rounded border */
        overflow: hidden;
        border-radius: 0.75rem;
        transition: border-bottom 0.3s;
    }
    #faq-326 .cs-faq-item.active .cs-button {
        background-color: var(--primary);
        color: var(--secondaryLight);
    }
    #faq-326 .cs-faq-item.active .cs-button:before {
        background-color: var(--secondaryLight);
        transform: rotate(315deg);
    }
    #faq-326 .cs-faq-item.active .cs-button:after {
        background-color: var(--secondaryLight);
        transform: rotate(-315deg);
    }
    #faq-326 .cs-faq-item.active .cs-item-p {
        height: auto;
        /* 20px - 24px top & bottom */
        /* 16px - 24px left & right */
        padding: clamp(1.25rem, 1.3vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
        opacity: 1;
    }
    #faq-326 .cs-button {
        font-size: 1rem;
        line-height: 1.2em;
        text-align: left;
        font-weight: bold;
        /* 16px - 20px */
        padding: clamp(1rem, 1.3vw, 1.25rem);
        background-color: #f7f7f7;
        border: none;
        color: var(--headerColor);
        display: block;
        width: 100%;
        position: relative;
        transition:
            background-color 0.3s,
            color 0.3s;
    }
    #faq-326 .cs-button:hover {
        cursor: pointer;
    }
    #faq-326 .cs-button:before {
        /* left line */
        content: "";
        width: 0.5rem;
        height: 0.125rem;
        background-color: var(--headerColor);
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.5rem;
        transform: rotate(45deg);
        /* animate the transform from the left side of the x axis, and the center of the y */
        transform-origin: left center;
        transition: transform 0.5s;
    }
    #faq-326 .cs-button:after {
        /* right line */
        content: "";
        width: 0.5rem;
        height: 0.125rem;
        background-color: var(--headerColor);
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.3125rem;
        transform: rotate(-45deg);
        /* animate the transform from the right side of the x axis, and the center of the y */
        transform-origin: right center;
        transition: transform 0.5s;
    }
    #faq-326 .cs-button-text {
        width: 80%;
        display: block;
    }
    #faq-326 .cs-item-p {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        width: 90%;
        height: 0;
        margin: 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        opacity: 0;
        color: var(--bodyTextColor);
        /* clips the text so it doesn't show up */
        overflow: hidden;
        transition:
            opacity 0.3s,
            padding-bottom 0.3s;
    }
}

/*-- -------------------------- -->
<---          Content           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #content-1450 {
    padding: var(--sectionPadding);
  }
  #content-1450 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #content-1450 .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;
  }
  #content-1450 .cs-title,
  #content-1450 .cs-text {
    max-width: 100%;
  }
  #content-1450 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 0 2rem 0;
  }
  #content-1450 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 3rem;
    background-color: var(--primary);
    border-radius: 0.5rem;
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #content-1450 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--gold);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #content-1450 .cs-button-solid:hover:before {
    width: 100%;
  }
}
                                
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RPsbs-252,
    #RPsbsr-252 {
        /* set padding top to 0 if the section above it is another white background section, same for padding bottom. We added the padding here in case this section gets placed above or below sections with full background colors.  Without this padding, the top of this sections color portion will be touching the neighboring section edge and it looks bad */
        padding: var(--sectionPadding);
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        position: relative;
        z-index: 1;
    }
    #RPsbs-252 .cs-container,
    #RPsbsr-252 .cs-container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        padding: var(--sectionPadding);
        margin: auto;
        background: linear-gradient(
            90deg,
            rgba(241, 241, 244, 0) 0%,
            #f1f1f4 100%
        );
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #RPsbs-252 .cs-container:before,
    #RPsbsr-252 .cs-container:before {
        /* Bottom Line */
        content: "";
        width: 100%;
        height: 1px;
        background: #b4b2c7;
        background: linear-gradient(
            270deg,
            #b4b2c7 0%,
            rgba(250, 251, 252, 0.005) 0%,
            #b4b2c7 100%
        );
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        right: 0;
        /* flips it horizontally */
        transform: scaleX(-1);
    }
    #RPsbs-252 .cs-container:after,
    #RPsbsr-252 .cs-container:after {
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        background: #b4b2c7;
        background: linear-gradient(
            180deg,
            #b4b2c7 0%,
            rgba(250, 251, 252, 0.005) 0%,
            #b4b2c7 100%
        );
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        right: 0;
    }
    #RPsbs-252 .cs-content,
    #RPsbsr-252 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 27.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #RPsbs-252 .cs-text,
    #RPsbsr-252 .cs-text {
        margin-bottom: 1rem;
    }
    #RPsbs-252 .cs-text:last-of-type,
    #RPsbsr-252 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #RPsbs-252 .cs-button-solid,
    #RPsbsr-252 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        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;
    }
    #RPsbs-252 .cs-button-solid:before,
    #RPsbsr-252 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--gold);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #RPsbs-252 .cs-button-solid:hover:before,
    #RPsbsr-252 .cs-button-solid:hover:before {
        width: 100%;
    }
    #RPsbs-252 .cs-picture,
    #RPsbsr-252 .cs-picture {
        width: 100%;
        max-width: 32.625rem;
        margin: 0;
        border: 1px solid var(--primary);
        position: relative;
        display: block;
        /* width divided by height */
        aspect-ratio: 1;
        /* prevents border from adding to height and width */
        box-sizing: border-box;
    }
    #RPsbs-252 .cs-picture img,
    #RPsbsr-252 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #RPsbs-252 .cs-container,
    #RPsbsr-252 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #RPsbs-252 .cs-picture,
    #RPsbsr-252 .cs-picture {
        /* 415px - 522px */
        height: clamp(25.9375rem, 40.5vw, 32.625rem);
        width: 50%;
        flex: none;
    }
    #RPsbs-252 .cs-content,
    #RPsbsr-252 .cs-content {
        max-width: 33rem;
        margin: 0;
        width: 45%;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RPsbsr-252 {
        padding: var(--sectionPadding);
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    #RPsbsr-252 .cs-container {
        background: linear-gradient(
            90deg,
            #f1f1f4 0%,
            rgba(241, 241, 244, 0) 100%
        );
    }
    #RPsbsr-252 .cs-container:before {
        background: #b4b2c7;
        background: linear-gradient(
            270deg,
            #b4b2c7 0%,
            rgba(250, 251, 252, 0.005) 0%,
            #b4b2c7 100%
        );
        transform: scaleX(1);
    }
    #RPsbsr-252 .cs-container:after {
        left: 0;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #RPsbsr-252 .cs-picture {
        margin: 0;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}

/*-- -------------------------- -->
<---       Why Choose Us        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-12 {
        padding: var(--sectionPadding);
    }
    #why-choose-12 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #why-choose-12 .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-12 .cs-topper {
        font-size: var(--topperFontSize);
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
        display: block;
    }
    #why-choose-12 .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;
    }
    #why-choose-12 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose-12 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 3.75rem;
    }
    #why-choose-12 .cs-item {
        text-align: center;
        list-style: none;
        width: 100%;
        max-width: 22.5rem;
        margin: 0;
        padding: 0;
    }
    #why-choose-12 .cs-picture {
        /* 68px - 88px */
        width: clamp(4.25rem, 7vw, 5.5rem);
        height: clamp(4.25rem, 7vw, 5.5rem);
        margin: auto;
        margin-bottom: 2rem;
        border-radius: 50%;
        background-color: var(--primary);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #why-choose-12 .cs-picture img {
        width: auto;
        height: 2.625rem;
        display: block;
    }
    #why-choose-12 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-align: inherit;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
        margin-bottom: 0.5rem;
        color: var(--headerColor);
    }
    #why-choose-12 .cs-item-text {
        font-size: 1rem;
        text-align: inherit;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose-12 .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-12 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--gold);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #why-choose-12 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-12 .cs-card-group {
        flex-direction: row;
        justify-content: space-between;
    }
}

.bck-change {
  background: #f7f7f7;
}