/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

body{
  font-family: 'Roboto', 'Arial', sans-serif;
  
}

.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

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

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

:root {
    /* remove this whole :root and put in your global css file that's shared on all pages, then just remove this section from all other Stitches you add later, only need this once in your global stylesheet */
    --primary: #D90429;
    --primaryLight: #5A766A;
    --secondary: #FFBA43;
    --secondaryLight: #FFBA43;
    --headerColor: #1a1a1a;
    --bodyTextColor: black;
    --bodyTextColorWhite: #FAFBFC;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  }
  
  /*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

/* Mobile - 1023px */
@media only screen and (max-width: 1023px) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #cs-navigation {
    /* 53px, same height as the cs-top-container */
    transform: translateY(-3.3125rem);
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    z-index: 10000;
    transition: transform .3s;
    top: 0;
  }
  #cs-navigation:before {
    content: '';
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    display: block;
    top: 100%;
    right: 0;
    z-index: -1100;
    opacity: 0;
    transition: height .5s, opacity .5s;
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: .15s;
  }
  #cs-navigation.cs-active .cs-li {
    transform: translateY(0);
    opacity: 1;
  }
  #cs-navigation .cs-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-top-container {
    width: 100%;
    padding: 1rem 1.5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  #cs-navigation .cs-top-contact {
    width: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 16px - 24px */
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  #cs-navigation .cs-top-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #cs-navigation .cs-top-link:nth-of-type(2) {
    display: none;
  }
  #cs-navigation .cs-link-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-top-social {
    visibility: visible;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity .3s, visibility .3s, height .3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  #cs-navigation .cs-social-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-container {
    width: 100%;
    padding: 1.25rem 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  #cs-navigation .cs-logo {
    width: auto;
    height: 3.75rem;
    margin: 0 auto 0 0;
    padding: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
    z-index: 10;
  }
  #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-nav {
    order: 2;
  }
  #cs-navigation .cs-toggle {
    width: 2.875rem;
    height: 2.875rem;
    margin: 0 0 0 auto;
    background-color: var(--primary);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .6s;
  }
  #cs-navigation .cs-toggle.cs-active {
    transform: rotate(180deg);
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
  }
  #cs-navigation .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 0.75rem;
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #FAFBFC;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transform-origin: center;
    transition: transform .5s, top .3S, left .3S;
    animation-duration: .7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top .3s, left .3s, transform .5s;
    animation-duration: .7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom .3s, opacity .3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 3rem;
    opacity: 0;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s, opacity .3s;
  }
  #cs-navigation .cs-ul {
    margin: 0;
    padding: 3rem 0 0 0;
    width: 100%;
    height: auto;
    max-height: 65vh;
    overflow: scroll;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  #cs-navigation .cs-li {
    width: 100%;
    text-align: center;
    list-style: none;
    margin-right: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    opacity: 0;
    transition: transform .6s, opacity .9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: .05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: .1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: .15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: .2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: .25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: .3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: .35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: .4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: .45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: .5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: .55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: .6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: .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;
    width: 100%;
  }
  #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-top-link:nth-of-type(2) {
    display: flex;
  }
}

/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/

/* Mobile - 1023px */
@media only screen and (max-width: 1023px) {
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    position: relative;
    color: var(--bodyTextColorWhite);
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    opacity: 1;
    visibility: visible;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity .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);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: padding .3s, margin .3s, height .3s, opacity .3s, visibility .3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
    width: 100%;
  }
  #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 {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-icon {
    width: 0.75rem;
    height: auto;
    margin-left: 0.25rem;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    border-bottom: 5px solid var(--primary);
    /* 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;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s, visibility .3s, opacity .3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
    font-size: 1rem;
    text-decoration: none;
    opacity: 0;
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity .6s, transform .6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: .05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: .1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: .15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: .2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: .25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: .3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: .35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: .4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: .45s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(10) {
    transition-delay: .5s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(11) {
    transition-delay: .55s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(12) {
    transition-delay: .6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(13) {
    transition-delay: .65s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1rem;
    white-space: nowrap;
    line-height: 1.5em;
    text-decoration: none;
    width: 100%;
    padding: 0.75rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    color: var(--primary);
    background-color: #f7f7f7;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  body.scroll #cs-navigation {
    /* 53px, the ssme height as the cs-top-container */
    transform: translateY(-3.3125rem);
  }
  #cs-navigation {
    width: 100%;
    padding: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    z-index: 10000;
    transition: transform .3s;
  }
  #cs-navigation .cs-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-top-container {
    width: 100%;
    max-width: 80rem;
    padding: 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.125rem;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-top-container:before {
    /* grey background */
    content: '';
    width: 100vw;
    height: 100%;
    background: #f7f7f7;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-top-contact {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-top-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #cs-navigation .cs-top-link:hover {
    text-decoration: underline;
  }
  #cs-navigation .cs-link-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-top-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .3s;
  }
  #cs-navigation .cs-social-link:hover {
    transform: scale(1.1);
  }
  #cs-navigation .cs-social-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    padding: 0 1rem;
    /* prevents padding from affectin gheight */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    position: relative;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    /* 40px - 44px */
    height: 3.75rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    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-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 1.9375rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
    transition: color .3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active {
    font-weight: 700;
    color: var(--headerColor);
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    padding: 0 2rem;
    background-color: var(--primary);
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color .3s;
  }
  #cs-navigation .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-nav-button {
    line-height: 2.875rem;
    margin-left: 1.5rem;
  }
}
                                

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-81 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    /* Centers button */
    text-align: center;
    /* 144px - 300px - leaving extra space for the navigation */
    padding: clamp(9rem, 25.95vw, 10.75rem) 1rem 0;
    /* 130px - 450px */
    padding-bottom: clamp(12.125rem, 30.95vw, -10.875rem);
    position: relative;
    z-index: 1;
    /* Prevents white rectangle pseudos from overlapping the sections below */
    overflow: hidden;
  }
  #hero-81:before {
    /* Left side of the triangle */
    content: '';
    width: 31.25rem;
    /* make really long so it covers the whole screen all the way to desktop */
    height: 250rem;
    background: #fff;
    opacity: 1;
    transform: rotate(-67deg);
    transform-origin: center;
    position: absolute;
    display: block;
    bottom: -139.6875rem;
    /* this makes the right edge sit at the 50% line at all times */
    right: 50%;
    z-index: 0;
  }
  #hero-81:after {
    /* Right side of the triangle */
    content: '';
    width: 31.25rem;
    height: 250rem;
    background: #fff;
    opacity: 1;
    transform: rotate(67deg);
    transform-origin: center;
    position: absolute;
    display: block;
    bottom: -139.6875rem;
    /* this makes the left edge sit at the 50% line at all times */
    left: 50%;
    z-index: 0;
  }
  #hero-81 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-81 .cs-background:before {
    /* Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .4;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-81 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #hero-81 .cs-container {
    width: 100%;
    max-width: 67.5rem;
    margin: auto;
  }
  #hero-81 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    /* 16px - 24px */
    margin: 0 auto clamp(1rem, 4vw, 1.5rem);
    color: #fff;
    position: relative;
  }
  #hero-81 .cs-title:after {
    /* Divider Line */
    content: '';
    /* 60px - 100px */
    width: clamp(3.75rem, 9.5vw, 6.25rem);
    /* 4px - 8px */
    height: clamp(0.25rem, 0.8vw, 0.5rem);
    /* 16px - 24px */
    margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
    background: var(--primary);
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-81 .cs-text {
    /* 16px - 25px */
    font-size: clamp(1rem, 1.95vw, 1.5625rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 800px */
    max-width: clamp(29rem, 60vw, 50rem);
    margin: 0 auto;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: #fff;
  }
  #hero-81 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: auto;
    color: #1a1a1a;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color .3s;
  }
  #hero-81 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: white;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
    color: black;
  }
  #hero-81 .cs-button-solid:hover {
    color: #fff;
  }
  #hero-81 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Desktop - 1300px (To make image background parallax) */
@media only screen and (min-width: 81.25rem) {
  #hero-81 {
    background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/kitchen.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* makes the parallax effect */
    background-attachment: fixed;
  }
  #hero-81 .cs-background img {
    display: none;
  }
}

#hero-81 .cs-button-solid:hover {
  color: black;
}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #h-services-81 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    /* 40px - 100px */
    padding: 0 1rem clamp(2.5rem, 7.9vw, 6.25rem) 1rem;
    position: relative;
    /* give a higher z index than the hero so it can sit on top */
    z-index: 10;
  }
  #h-services-81 .cs-card-group {
    width: 100%;

    margin: 0 auto 0;
    /* negative margin pulls it up on top of the hero section */
    /* -46px to -76px - we're calculating whatever clamp is and multiplying by -1
            to make the value negative since clamp doesn't work with negative values */
    /* 40px - 60px top and bottom, 16px - 60px left & right */
    border-radius: 0.3125rem;
    background-color: #fff;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0px;
  }
  #h-services-81 .cs-item {
    list-style: none;
    margin: 0 auto 2.5rem;
    width: 100%;
  }
  #h-services-81 .cs-item:last-of-type {
    margin-bottom: 0;
  }
  #h-services-81 .cs-icon {
    /* 68px - 88px */
    width: clamp(4.25rem, 8.8vw, 5.5rem);
    /* 68px - 88px */
    height: clamp(4.25rem, 8.8vw, 5.5rem);
    margin: auto;
    /* 20px - 24px */
    margin-bottom: clamp(1.25rem, 5vw, 1.5rem);
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #h-services-81 .cs-icon img {
    /* 44px - 52px */
    width: clamp(2.75rem, 5.8vw, 3.25rem);
    height: auto;
  }
  #h-services-81 .cs-title {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto 0.5rem;
    color: var(--headerColor);
  }
  #h-services-81 .cs-text {
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    max-width: 22.5rem;
    margin: 0 auto;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #h-services-81 .cs-card-group {
    max-width: 80rem;
    /* -76px to -320px - we're calculating whatever clamp is and multiplying by -1
               to make the value negative since clamp doesn't work with negative values */
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 2.5rem;
    padding-left: 0px;
    padding-right: 0px;
  }
  #h-services-81 .cs-item {
    /* Reset margin so it doesn't interfere with flexbox */
    margin: 0;
  }
}
                                

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1094 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    padding-bottom: 0px;
  }
  #cta-1094 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    background-color: white;
  }
  #cta-1094 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* changes to 100% at tablet */
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: start;
  }
  #cta-1094 .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;
  }
  #cta-1094 .cs-title {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    width: 100%;
    font-size: 1.9375rem;
    margin: 0 0 1.5rem;
    color: var(--bodyTextColorWhite);
  }
  #cta-1094 .cs-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #cta-1094 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    margin: 0;
    padding: 0;
    padding-left: 1.25rem;
    border: none;
    /* prevents padding from adding to width and height */
    box-sizing: border-box;
    display: block;
    background-color: #332E2C;
    color: white;
  }
  #cta-1094 .cs-input::placeholder {
    color: #767676;
  }
  #cta-1094 .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: black;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    border-radius: .25rem;
  }
  #cta-1094 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #cta-1094 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-1094 .cs-submit {
    width: 100%;
    border: none;
    transition: color .3s;
  }
  #cta-1094 .cs-submit:before {
    background-color: #fff;
  }
  #cta-1094 .cs-submit:hover {
    color: var(--primary);
  }
  #cta-1094 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-1094 .cs-background:before {
    /* black overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    opacity: .88;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-1094 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-1094 .cs-content {
    max-width: 100%;
  }
  #cta-1094 .cs-form {
    flex-direction: row;
  }
  #cta-1094 .cs-input {
    width: 100%;
  }
  #cta-1094 .cs-submit {
    width: auto;
    min-width: 11.875rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cta-1094 .cs-content {
    flex-direction: column;
    justify-content: space-between;
  }
  #cta-1094 .cs-title {
    margin: 0;
  }
  #cta-1094 .cs-form {
    width: 100%;
  }
}
                                
.service-search{
  width: 100%;
  margin: 0 auto 0;
  margin-top: calc(clamp(5rem, 13vw, 4.75rem)*-1);
  padding: clamp(2.5rem, 4.7vw, 3.75rem) clamp(1rem, 4vw, 3.75rem);
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
  border-radius: 0.3125rem;
  border-top: 8px solid var(--primary);
  background-color: #fff;
  box-sizing: border-box;
  margin-top: calc(clamp(4.75rem, 20vw, 20rem)*-1);
  max-width: 80rem;
}

#cta-1094 .cs-button-solid:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  background: black;
  opacity: 1;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 0.25rem;
  transition: width .3s;
}

#cta-1094 .cs-button-solid {
  color: black;
}

#cta-1094 .cs-button-solid:hover {
  color: white;
}

.toggle-button {
  background-color: #332E2C;
  color: #000;
  border: none;
  padding: 10px;
  cursor: pointer;
  outline: none;
  width: 100px;
  color: lightgray;
}

.toggle-button.active {
  background-color: #829E4C;
  color: #fff;
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-877 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
  }
  #services-877 .cs-container {
    width: 100%;
    /* changes to 1280px at Tablet */

    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-877 .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-877 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #services-877 .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;
  }
  #services-877 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #services-877 .cs-title {
    /* max width of 22 characters, includes spaces between words */
    max-width: 39ch;
  }
  #services-877 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    max-width: 66.5rem;
  }
  #services-877 .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: white;
    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;
    border: none;
  }
  #services-877 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: black;
    color: white;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
  #services-877 .cs-button-solid:hover:before {
    width: 100%;
    color: white;
  }

  #services-877 .cs-button-solid:hover {
    color: white;
  }

  #services-877 .cs-sold-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media (max-width: 600px) {
    #services-877 .cs-sold-group {
      flex-direction: column;  /* Stack vertically */
    }
  }


  #services-877 .cs-rented-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    /*grid-template-columns: repeat(3, 1fr);*/
    gap: 1.25rem;
    justify-items: center;
  }

  #services-877 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    max-width: 850px;
    border-radius: 1rem;

    overflow: hidden;
    grid-column: span 3;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
    padding-bottom: 15px;
  }

  #services-877 .cs-item:hover .cs-picture img {
    transform: scale(1.1);
  }

  #services-877 .cs-item:before {
    /* border, done in pseudo so it can sit under the picture */
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border: 1px solid #E8E8E8;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    background: transparent;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-877 .cs-link {
    text-decoration: none;
    padding: 0 0 1.25rem 0;
    display: block;
  }
  #services-877 .cs-picture {
    width: 100%;
    height: 25rem;
    margin-bottom: 1.25rem;

    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }


  @media (max-width: 600px) {
    #services-877 .cs-picture {
      width: 100%;
      height: 10.5rem;
      margin-bottom: 1.25rem;

      /* clips the img tag corners */
      overflow: hidden;
      display: block;
      position: relative;
      z-index: 10;
    }
  }

  #services-877 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #services-877 .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    transition: color .3s;
  }
  #services-877 .cs-item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
    padding: 0 1.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-877 .cs-container {
    max-width: 80rem;
  }
  #services-877 .cs-item {
    grid-column: span 1;
  }
}
                                

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-64 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    /* 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-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #reviews-64 .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;
  }
  #reviews-64 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #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: #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;
  }
  #reviews-64 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
  #reviews-64 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* 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%);
  }
}
                                
#cta-1094 .mail-input {
  font-size: 1rem;
  width: 100%;
  height: clamp(2.875rem, 5.5vw, 3.5rem);
  margin: 0;
  padding: 0;
  padding-left: 1.25rem;
  border: none;
  /* prevents padding from adding to width and height */
  box-sizing: border-box;
  display: block;
  background-color: #332E2C;
  color: white;
}
#cta-1094 .mail-input::placeholder {
  color: #767676;
}

#cta-1094 .mail-input {
  width: 100%;
}

.mailing-h2{
  width: 100%;
}

@media only screen and (min-width: 0rem){
#mail-1094 {
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    padding-bottom: 0px;
}
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer-1154 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #footer-1154 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #footer-1154 .cs-top {
    width: 100%;
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
    padding-bottom: clamp(2rem, 4vw, 2.5rem);
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
  #footer-1154 .cs-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 0.5rem;
    /* 28px - 40px */
    column-gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  #footer-1154 .cs-li {
    list-style: none;
  }
  #footer-1154 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    transition: color .3s;
  }
  #footer-1154 .cs-link:hover {
    color: var(--primary);
  }
  #footer-1154 .cs-logo {
    width: 10.5rem;
    height: auto;
    display: block;
  }
  #footer-1154 .cs-logo-img {
    width: 100%;
    height: auto;
    display: block;
  }
  #footer-1154 .cs-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  #footer-1154 .cs-social {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  #footer-1154 .cs-social-li {
    list-style: none;
  }
  #footer-1154 .cs-social-link {
    width: 2rem;
    height: 2rem;
    background-color: #e8e8e8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #footer-1154 .cs-social-link:hover {
    background-color: var(--primary);
  }
  #footer-1154 .cs-social-link:hover .cs-social-icon {
    filter: grayscale(1) brightness(1000%);
    opacity: 1;
  }
  #footer-1154 .cs-social-icon {
    width: 0.75rem;
    height: auto;
    display: block;
    opacity: .6;
    transition: opacity .3s;
  }
  #footer-1154 .cs-copyright {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #footer-1154 .cs-copyright-link {
    font-size: inherit;
    text-decoration: none;
    color: inherit;
    transition: color .3s;
  }
  #footer-1154 .cs-copyright-link:hover {
    color: var(--primary);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer-1154 .cs-top {
    flex-direction: row;
    justify-content: space-between;
  }
  #footer-1154 .cs-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

input.cs-input::placeholder {
  color: lightgray;  /* Replace   lightgray with the color you want. */
}
                                
#cta-1094 .cs-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: lightgray;
}
#cta-1094 .cs-input::-moz-placeholder { /* Firefox 19+ */
  color: lightgray;
}
#cta-1094 .cs-input:-ms-input-placeholder { /* IE 10+ */
  color: lightgray;
}
#cta-1094 .cs-input:-moz-placeholder { /* Firefox 18- */
  color:lightgray;
}


input.mail-input::placeholder {
  color: lightgray !important;
}

/* Add these for cross-browser compatibility */

input.mail-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: lightgray !important;
}
input.mail-input::-moz-placeholder { /* Firefox 19+ */
color: lightgray !important;
}
input.mail-input:-ms-input-placeholder { /* IE 10+ */
color: lightgray !important;
}
input.mail-input:-moz-placeholder { /* Firefox 18- */
color: lightgray !important;
}


/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1105 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #contact-1105 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    /* 48px - 80px */
    gap: clamp(3rem, 6vw, 5rem);
  }
  #contact-1105 .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-1105 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #contact-1105 .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;
  }
  #contact-1105 .cs-title {
    /* cs-text override.  cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This second cs-text is a section specific override that stays inside this stitch */
    margin: 0 0 2rem 0;
  }
  #contact-1105 .cs-form {
    width: 100%;
    /* 24px - 48px top and bottom */
    /* 20px - 32px left and right */
    padding: clamp(1.5rem, 5.18vw, 5rem) clamp(1.25rem, 5.18vw, 6.25rem);
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    background-color: #F7F8F8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #contact-1105 .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-1105 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    color: var(--headerColor);
    background-color: #fff;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #contact-1105 .cs-input::placeholder {
    color: #7D799C;
    opacity: .6;
  }
  #contact-1105 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #contact-1105 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: black;
    border: none;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem !important;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color .3s;
  }
  #contact-1105 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
  #contact-1105 .cs-button-solid:hover {
    color: #fff;
  }
  #contact-1105 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-1105 .cs-submit {
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    min-width: 9.375rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    overflow: hidden; 
    z-index: 1;
    border: none;
    cursor: not-allowed; /* Add this line */
    color: #999; /* Change text color when disabled */
    background-color: #ccc; /* Change background color when disabled */
  }
  
  #contact-1105 .cs-submit:enabled {
    cursor: pointer;
    color: #f2f2f2; /* Change text color when enabled */
    background-color: var(--primary); /* Change background color when enabled */
  }
  
  #contact-1105 .cs-submit:enabled:hover {
    cursor: pointer;
    color: white;
  }

  #contact-1105 .cs-submit:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: black;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
    border-radius: 0.25rem;
  }

  #contact-1105 .cs-submit:enabled:hover:before {
    width: 100%; /* Add this line */
  }

  #contact-1105 .cs-ul {
    width: auto;
    /* 40px - 92px, marign bottom and left are the same clamp values that the stripes box is absolutely positioned outside the cs-ul box */
    margin-bottom: clamp(2.5rem, 9vw, 5.75rem);
    /* 32px - 80px */
    margin-right: clamp(2rem, 9vw, 5rem);
    /* 40px - 100px top and bottom */
    /* 16px - 80px left and right */
    padding: clamp(2.5rem, 9.18vw, 6.25rem) clamp(1rem, 9.18vw, 5rem);
    box-sizing: border-box;
    background-color: #F7F7F7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 40px - 60px */
    gap: clamp(1.5rem, 6vw, 3.75rem);
    position: relative;
  }
  #contact-1105 .cs-ul:before {
    /* stripes graphic */
    content: '';
    height: 100%;
    width: 100%;
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/stripes-contact.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    display: block;
    position: absolute;
    /* 40px - 92px */
    top: clamp(2.5rem, 9vw, 5.75rem);
    /* 32px - 80px */
    left: clamp(2rem, 9vw, 5rem);
    z-index: -1;
  }
  #contact-1105 .cs-li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    /* 12px - 20px */
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }
  #contact-1105 .cs-li:hover .cs-icon-wrapper {
    transform: scale(1.1);
  }
  #contact-1105 .cs-header {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    display: block;
  }
  #contact-1105 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    color: #767676;
    display: block;
    position: relative;
  }
  #contact-1105 .cs-link:hover {
    text-decoration: underline;
  }
  #contact-1105 .cs-icon-wrapper {
    /* 44px - 80px */
    width: clamp(2.75rem, 8.3vw, 5rem);
    height: clamp(2.75rem, 8.3vw, 5rem);
    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 .3s;
  }
  #contact-1105 .cs-icon {
    /* 20px - 40px */
    width: clamp(1.25rem, 3vw, 2.5rem);
    height: auto;
    display: block;
  }
  #contact-1105 .cs-picture {
    width: 100%;
    border-radius: 0.5rem;
    /* clips image corners */
    overflow: hidden;
    display: block;
    position: relative;
    /* width divided height */
    aspect-ratio: 1.44;
  }
  #contact-1105 .cs-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1105 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-start;
  }
  #contact-1105 .cs-content {
    max-width: 33.875rem;
    /*sends it to the right in the 2nd position */
    order: 2;
  }
  #contact-1105 .cs-ul {
    max-width: 32.0625rem;
  }
}
                                
.call-button, .text-button {
  font-size: 1rem;
  line-height: clamp(2.875em, 5.5vw, 3.5em);
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  margin: 0;
  padding: 0 1rem;
  background-color: var(--primary);
  display: inline-block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  transition: color .3s;
  color: #f2f2f2;
  border-radius: 0.25rem;
  border: none;
  min-width: 100px;
  margin-bottom: 8px;
}

.call-button::before, .text-button::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  background: black;
  opacity: 1;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width .3s;
  border-radius: 0.25rem;
}

.call-button:hover::before, .text-button:hover::before {
  width: 100%;
  background: black;
}

.call-button:hover, .text-button:hover {
  color: white;
}

.contact-paragraph{
  color: #767676;
}

.beds-pets{
  display: flex;
  gap: 8px;
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-867 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
  }
  #sbs-867 .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);
  }
  #sbs-867 .cs-content {
    /* set text aling to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    /* 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;
  }
  #sbs-867 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #sbs-867 .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;
  }
  #sbs-867 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-867 .cs-title {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    /* 17 characters wide including spaces */
    max-width: 17ch;
  }
  #sbs-867 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbs-867 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-867 .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: #f2f2f2;
    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;
  }
  #sbs-867 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
  #sbs-867 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-867 .cs-button-solid:hover {
    color: white;
  }

  #sbs-867 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    max-width: 39.375rem;
    /* 400px - 775px */
    height: clamp(25rem, 70vw, 48.4375rem);
    box-shadow: 0px 2.80579px 42.0868px rgba(0, 0, 0, 0.16);
    /* 100px - 200px */
    border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0 clamp(6.25rem, 17vw, 12.5rem);
    /* clips img tag corners */
    overflow: hidden;
  }
  #sbs-867 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 64rem) {
  #sbs-867 {
    padding: var(--sectionPadding);
  }
  #sbs-867 .cs-container {
    flex-direction: row;
    max-width: 80rem;
    justify-content: space-between;
  }
  #sbs-867 .cs-content {
    width: 53%;
    /* reset the padding, add the section padding back to the section container */
    padding: 0;
  }
  #sbs-867 .cs-picture {
    width: 47vw;
    position: relative;
  }
}
                                
/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {

  #meet-team-1102 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
  }
  #meet-team-1102 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #meet-team-1102 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 40.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #meet-team-1102 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #meet-team-1102 .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;
  }
  #meet-team-1102 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #meet-team-1102 .cs-card-group {
    width: 100%;
    /* changes at tablet */
    max-width: 25.8125rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
    position: relative;
  }


  #meet-team-1102 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    grid-column: span 12;
    position: relative;
  }
  #meet-team-1102 .cs-picture {
    width: 100%;
    min-height: 18.75rem;
    /* removed at tablet */
    aspect-ratio: 1.17142857;
    /* clips img tag from overflowing it on hover */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #meet-team-1102 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform .7s;
  }
  #meet-team-1102 .cs-info {
    text-align: center;
    width: 90%;
    /* negative margin will pull it up and overlap the image, changes to -60px at desktop */
    margin-top: -2.25rem;
    /* 20px - 24px */
    padding: clamp(1.25rem, 2vw, 1.5rem);
    /* prevents padding from affecting the height and width */
    box-sizing: border-box;
    background-color: #F7F7F7;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
  }
  #meet-team-1102 .cs-name {
    text-align: inherit;
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--headerColor);
    display: block;
  }
  #meet-team-1102 .cs-job {
    text-align: inherit;
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: var(--bodyTextColor);
    display: block;
  }
  #meet-team-1102 .cs-social-group {
    width: 100%;
    margin: 0;
    padding: 1rem 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    border-top: 1px solid #E8E8E8;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  #meet-team-1102 .cs-link {
    width: 2rem;
    height: 2rem;
    background-color: #E8E8E8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #meet-team-1102 .cs-link:hover {
    background-color: var(--primary);
  }
  #meet-team-1102 .cs-link:hover .cs-icon {
    filter: grayscale(0) brightness(10000%);
  }
  #meet-team-1102 .cs-icon {
    width: 0.75rem;
    height: auto;
    z-index: 10;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #meet-team-1102 .cs-card-group {
    max-width: 100%;
    align-items: stretch;
  }
  #meet-team-1102 .cs-item {
    max-width: 100%;
    grid-column: span 6;
  }
  #meet-team-1102 .cs-item:hover .cs-picture img {
    transform: scale(1.12);
    opacity: .4;
  }
  #meet-team-1102 .cs-picture {
    height: 100%;
    /* 280px - 350px, resets at desktop */
    min-height: clamp(42.5rem, 33vw, 21.875rem);
    background-color: #000;
    overflow: hidden;
    aspect-ratio: initial;
  }
  #meet-team-1102 .cs-picture img {
    transition: transform .6s, opacity .3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #meet-team-1102 .cs-container {
    max-width: 80rem;
  }
  #meet-team-1102 .cs-item {
    grid-column: span 3;
  }
  #meet-team-1102 .cs-info {
    margin-top: -3.75rem;
  }
  #meet-team-1102 .cs-picture {
    /* 245px - 338px */
    height: clamp(38.3125rem, 27vw, 21.125rem);
    min-height: 15.3125rem;
  }
}
                              
.mortgage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.container {
  display: flex;
  width: 80%;
  max-width: 800px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
}

.inputs {
  flex: 1;
  padding-right: 20px;
  border-right: 1px solid #9e9e9e;
}

.input-field input {
  width: 100%;
  padding: 10px;
  border: 1px solid #9e9e9e;
  border-radius: 4px;
  outline: none;
  font-size: 16px;
  transition: border-color 0.3s;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.input-field input:focus {
  border-color: var(--primary);
}

.btn {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  background-color: var(--primary);
  color: #f2f2f2;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s;
  margin-bottom: 20px;
  box-sizing: border-box;
  font-weight: bold;
  border-radius: .25rem;
  position: relative;
  overflow: hidden;
  z-index: 1; /* Add this line */
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: black;
  transition: left 0.3s;
  z-index: -1; /* Add this line */
}

.btn:hover::before {
  left: 0;
}

.btn:hover {
  color: white;
}


.output {
  flex: 1;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#result {
  font-size: 24px;
  font-weight: bold;
}

/* Add this media query */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .inputs {
    border-right: none;
    border-bottom: 1px solid #9e9e9e;
    padding-right: 0;
    padding-bottom: 20px;
  }
  .output {
    padding-left: 0;
    padding-top: 20px;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1034 {
      padding: var(--sectionPadding);
      /* 160px - 250px */

      position: relative;
      z-index: 1;
  }
  #hero-1034 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #hero-1034 .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;
  }
  #hero-1034 .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(--bodyTextColor);
      margin-bottom: 0.75rem;
      display: flex;
      flex-direction: column;
      /* 8px - 16px */
      gap: clamp(0.5rem, 1.5vw, 1rem);
  }
  #hero-1034 .cs-title {
      font-size: var(--headerFontSize);
      font-weight: 900;
      line-height: 1.2em;
      text-align: inherit;
      max-width: 43.75rem;
      /* 16px - 24px */
      margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
      color: var(--bodyTextColorWhite);
      position: relative;
  }
  #hero-1034 .cs-text {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      max-width: 40.625rem;
      /* 32px - 38px */
      margin: 0 0 clamp(2rem, 3.5vw, 3rem);
      color: var(--bodyTextColorWhite);
  }
  #hero-1034 .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 2rem;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #hero-1034 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #hero-1034 .cs-button-solid:hover:before {
      width: 100%;
  }
  #hero-1034 .cs-spotlight {
      text-align: center;
      /* 40px - 48px */
      margin: clamp(2.5rem, 4vw, 3rem) 0 0 0;
      padding: clamp(2.5rem, 4vw, 3rem) 0 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      /* 24px - 32px */
      gap: clamp(1.5rem, 3vw, 2rem);
  }
  #hero-1034 .cs-spotlight:before {
      /* dashed line */
      content: "";
      width: 100%;
      height: 2px;
      background-image: linear-gradient(
          90deg,
          #bababa,
          #bababa 75%,
          transparent 75%,
          transparent 100%
      );
      background-size: 16px 16px;
      border: none;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
  }
  #hero-1034 .cs-image {
      /* 120px - 156px */
      width: clamp(7.5rem, 12vw, 9.75rem);
      height: auto;
      border: 4px solid var(--primary);
      box-sizing: border-box;
      border-radius: 50%;
      background-color: var(--primary);
  }
  #hero-1034 .cs-name {
      /* 25px - 31px */
      font-size: clamp(1.5625rem, 3vw, 1.9375rem);
      font-weight: 700;
      line-height: 1.2em;
      text-align: inherit;
      margin: 0;
      color: var(--headerColor);
      display: block;
  }
  #hero-1034 .cs-job {
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5em;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      color: var(--primary);
      display: block;
  }
  #hero-1034 .cs-flex-text {
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5em;
      text-align: inherit;
      max-width: 21rem;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
  }
  #hero-1034 .cs-image-group {
      width: 100%;
      /* 16px - 48px */
      padding: clamp(1rem, 4.5vw, 3rem);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      border: 1px solid var(--primary);
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100%; /* Add this to ensure minimum height based on content */
  }
  #hero-1034 .cs-icon {
      /* 100px - 116px */
      width: clamp(6.25rem, 8vw, 7.25rem);
      height: auto;
      margin: 0 0 1.75rem 0;
  }
  #hero-1034 .cs-tagline {
      font-size: 1rem;
      line-height: 1.2em;
      font-weight: 700;
      /* 8px - 32px */
      margin: 0 0 clamp(0.5rem, 2vw, 2rem);
      color: var(--primary);
  }
  #hero-1034 .cs-h2 {
      /* 25px - 31px */
      font-size: clamp(1.5625rem, 3vw, 1.9375rem);
      line-height: 1.2em;
      font-weight: 700;
      text-align: inherit;
      width: 70%;
      max-width: 22.5rem;
      margin: 0 0 0.5rem 0;
      color: var(--headerColor);
  }
  #hero-1034 .cs-desc {
      font-size: 1rem;
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      max-width: 18.75rem;
      /* 40px - 48px */
      margin: 0 0 clamp(2.5rem, 5vw, 3rem);
      color: var(--bodyTextColor);
  }
  #hero-1034 .cs-picture {
     display: block;
      width: 100%;
      /* 340px - 560px */
      height: 54vw;
      max-height: 720px;
      display: block;
      position: relative;
  }

  @media only screen and (max-width: 1024px) {
    #hero-1034 .cs-picture {
      height: 112vw;
      max-height: 1100px;
    }
}

@media only screen and (max-width: 768px) {
  #hero-1034 .cs-picture {
    height: 112vw;
    max-height: 630px;
  }
}

@media only screen and (max-width: 768px) {
  #hero-1034 .cs-h2 {
    width: 100%;
    text-align: center;
  }
  #hero-1034 .cs-desc{
    width: 100%;
    text-align: center;
  }
}


  #hero-1034 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: auto;
      width: 100%;
      max-width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
  }
  #hero-1034 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #hero-1034 .cs-background:before {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #000;
      opacity: 0.4;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #hero-1034 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1034 .cs-container {
      max-width: 80rem;
  }
  #hero-1034 .cs-spotlight {
      text-align: left;
      width: 100%;
      flex-direction: row;
  }
  #hero-1034 .cs-image-group {
      text-align: left;
      align-items: flex-start;
      position: relative;
  }
  #hero-1034 .cs-icon {
      margin: 0;
      position: absolute;
      /* 16px - 48px, same as cs-image-group padding clamp */
      top: clamp(1rem, 4.5vw, 3rem);
      right: clamp(1rem, 4.5vw, 3rem);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-1034 .cs-container {
      flex-direction: row;
      justify-content: space-between;
  }
  #hero-1034 .cs-content {
      max-width: 32.625rem;
      text-align: left;
      align-items: flex-start;
      /* sends it to the right in the 2nd position */
      order: 2;
  }
  #hero-1034 .cs-topper {
      flex-direction: row;
      align-items: center;
  }
  #hero-1034 .cs-image-group {
      max-width: 39.375rem;
  }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
  #hero-1034 {
      background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/kitchen.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
  }
  #hero-1034 .cs-background img {
      display: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1431 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #sbs-1431 .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);
    position: relative;
  }
  #sbs-1431 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-1431 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1431 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1431 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
  }
  #sbs-1431 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #sbs-1431 .cs-li-picture {
    width: 5rem;
    height: 5rem;
    margin: 0;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #sbs-1431 .cs-li-picture:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #sbs-1431 .cs-li-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #sbs-1431 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #sbs-1431 .cs-li-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1431 .cs-image-group {
    /* scale down the whole section */
    font-size: min(1.6vw, .6em);
    /* aligns the .cs-image-group to the right */
    text-align: right;
    /* using ems so we can scale this container with a font size */
    width: auto;
    min-width: 37.5em;
    max-width: 43.875rem;
    /* changes auto at desktop */
    height: 38.625em;
    /* sends it to the right in the 2nd position */
    order: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
  }
  #sbs-1431 .cs-person {
    height: 100%;
    width: auto;
    /* allows text align to move it left or right */
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
  }
  #sbs-1431 .cs-person img {
    width: auto;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: contain;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1431 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
  }
  #sbs-1431 .cs-content {
    width: 50%;
    min-height: 425px;
  }
  #sbs-1431 .cs-image-group {
    font-size: min(1.3vw, 1em);
    flex: none;
    /* sends it to the left in the 1st position */
    order: -1;
    /* pushes person image to the right of the container */
    justify-content: flex-end;
    position: absolute;
    /* changes to 0 at large desktop */
    left: -6.25rem;
    bottom: -6.3125rem;
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #sbs-1431 .cs-image-group {
    font-size: min(1.2vw, 1em);
    height: auto;
    margin-right: 1.875rem;
    /* pushes person image to the right of the container */
    justify-content: flex-end;
    /* pushed person image to the bottom of the container */
    align-items: flex-end;
    position: absolute;
    right: 50%;
    top: 0;
    /* same amount as the padding bottom on the #sbs*/
    bottom: -6.25rem;
  }
  #sbs-1431 .cs-content {
    /* pushes it to the right side of the container */
    margin-left: auto;
  }
}
                                
.cs-button-6 {
  text-align: center;
  font-size: 1rem;
  /* 46px - 56px */
  line-height: clamp(2.875rem, 8vw, 3.5rem);
  text-decoration: none;
  font-weight: 700;
  min-width: 10.875rem;
  color: #1a1a1a;
  padding: 0 1.5rem;
  /* prevents padding and border from affecting height and width */
  box-sizing: border-box;
  background-color: #fff;
  border: 2px solid #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.cs-button-6:before {
  content: "";
  width: 0.375rem;
  height: 100%;
  background: #1a1a1a;
  opacity: 1;
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  transition: width 0.3s;
  z-index: -1;
}
.cs-button-6 .cs-icon {
  width: 1.5rem;
  height: auto;
}
.cs-button-6 .cs-icon path {
  transition: fill 0.3s;
}
.cs-button-6:hover {
  color: #fff;
}
.cs-button-6:hover:before {
  width: 100%;
}
.cs-button-6:hover .cs-icon path {
  fill: #fff;
}

                              


.gallery {
  display: flex;
  flex-direction: column; /* Stack images in a column on mobile and tablet */
  width: 90%; /* Adjusts width to the viewport */
  max-width: 600px; /* Limits max width for large screens */
  gap: 10px;
}

.photo img {
  width: 100%;
  height: auto;
}

@media (min-width: 901px) { /* Desktop and larger devices */
  .gallery {
      flex-direction: row; /* Place images in a row */
      max-width: 1200px; /* Adjust maximum width */
  }

  .photo {
      flex: 1; /* Each photo takes half the width of the gallery */
  }
}