/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/poppins-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/poppins-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/poppins-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body,
html {
  /* reset margin and padding so there's no gap between the nav and the screen edges */
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

: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: #9d2b10;
  --primaryLight: #fbf1ef;
  /* --secondary: #8fb339; */
  --secondary: #000000;
  --secondaryLight: #f5f5f5;
  --topperTextColor: #a43e2e;
  --topperTextColorAlt: #f5f7fa;
  --headerColor: #292929;
  --headerColorWhite: #fff;
  --footerTextColor: #4e4b66;
  --bodyTextColor: #8f8f8f;
  --bodyTextColorWhite: #fafbfc;
  --listColor: #292929;
  --backgroundDark: #0b0b09;
  --backgroundDarkRed: #100404;
  --borderColor: #ebebeb;
  /* From old template */
  /* --primary: #01072b;
  --secondary: #548cf4;
  --blue: #1337b7; */
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.5vw, 2.25rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(5em, 7.82vw, 6.25em) 1rem;
}

h1,
h2,
h3,
h4,
h5,
li,
label,
button {
  font-family: "Poppins", "Arial", sans-serif;
}

p,
a,
textarea,
input,
span {
  font-family: "Poppins", "Arial", sans-serif;
}

.cs-title {
  max-width: 20ch;
  color: var(--headerColor);
}

.cs-text {
  width: 100%;
  line-height: 1.5em;
  margin-bottom: 1rem;
  color: var(--bodyTextColor);
}

.cs-topper {
  font-family: "Poppins", "Arial", sans-serif;
  color: var(--topperTextColor);
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.25rem;
  display: block;
}

.cs-h3 {
  font-size: 1.25rem, 3vw, 1.5625rem;
  line-height: 1.2em;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--primary);
}

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

.header-border {
  border-left: 6px solid var(--secondary);
  padding-left: 1rem;
}

.header-underline {
  position: relative;
  background-color: var(--secondary);
  height: 6px;
  width: 5rem;
  margin-bottom: 1rem;
}

/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap'); */

@media only screen and (max-width: 63.9375rem) {
  /*-- -------------------------- -->
  <---     Mobile Navigation      -->
  <--- -------------------------- -*/

  body.cs-open {
    overflow: hidden;
  }

  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    top: 0;
    z-index: 10000;
  }
  #cs-navigation:before {
    /* grey blurred overlay */
    content: "";
    width: 0%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -11;
    transition: width 0.5s, opacity 0.3s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active:after {
    width: 100%;
    max-width: 100%;
    background-color: #484848;
  }
  #cs-navigation.cs-active:before {
    width: 100%;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleX(1);
    transition-delay: 0.2s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateX(0);
  }
  #cs-navigation .cs-logo {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    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;
    /* places the image to the left edge of the parent */
    object-position: left;
  }
  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: var(--primary);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #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);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #fff;
    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 {
    height: 100vh;
    background-color: #fff;
    overflow: hidden;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: -1;
    transform: scaleX(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top right;
  }
  #cs-navigation .cs-ul {
    width: auto;
    min-width: 40%;
    height: 65vh;
    margin: 0;
    /* 28px - 40px */
    padding: 3rem clamp(1.75rem, 3vw, 2.5rem) 2rem 4.375rem;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1.25rem;
  }
  #cs-navigation .cs-li {
    text-align: right;
    list-style: none;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateX(-2.5rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 3px;
    background: var(--primary);
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}

@media only screen and (min-width: 0rem) {
  /*-- -------------------------- -->
  <---          Buttons           -->
  <--- -------------------------- -*/
  .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;
    border: none;
    min-width: 14.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;
    transition: color 0.3s;
  }
  .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--secondary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    /* border-radius: 0.25rem; */
    transition: width 0.3s;
  }

  /* .cs-button-solid:hover {
    color: #000;
  } */

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

  .cs-button-transparent {
    font-size: 0.88rem;
    /* 46px - 56px */
    line-height: 3.375rem;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--primary);
    min-width: 9.375rem;
    padding: 0 2rem;
    background-color: transparent;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
    text-transform: uppercase;
  }

  .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--primary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }

  .cs-button-transparent:after {
    /* border */
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: transparent;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    border: 2px solid var(--primary);
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    pointer-events: none;
  }

  .cs-button-transparent:hover {
    color: #fff;
  }

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

  #content .button-group .int-button {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 8vw, 3.5rem);
    text-decoration: none;
    font-weight: 500;
    /* margin: auto; */
    color: #000;
    padding: 0.2rem 1rem;
    background-color: #e8eaee;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: background-color 0.5s;
    width: calc(100% - 2rem);
    height: 3rem;
  }

  #content .button-group .button-active {
    background-color: var(--secondary);
  }
  #content .button-group .int-button:hover {
    background-color: var(--secondary);
  }

  /*-- -------------------------- -->
  <---          Contact           -->
  <--- -------------------------- -*/
  #contact-1392 {
    padding: var(--sectionPadding);
    padding-bottom: 0;
    background-color: #fff;
    position: relative;
    z-index: 10;
  }
  #contact-1392 .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-1392 .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-1392 .cs-title {
    max-width: 23ch;
  }
  #contact-1392 .cs-text {
    margin-bottom: 1rem;
  }
  #contact-1392 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #contact-1392 .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-1392 .cs-li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.25rem;
  }
  #contact-1392 .cs-li:hover .cs-icon-wrapper {
    transform: scale(1.1);
  }
  #contact-1392 .cs-header-contact {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    display: block;
  }
  #contact-1392 .cs-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    color: #767676;
    display: block;
    position: relative;
  }
  #contact-1392 .cs-link:hover {
    text-decoration: underline;
  }
  #contact-1392 .cs-icon-wrapper {
    width: 3.75rem;
    height: 3.75rem;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    transition: transform 0.3s;
  }
  #contact-1392 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #contact-1392 .cs-form {
    width: 100%;
    max-width: 39.375rem;
    margin-bottom: calc(clamp(1.875rem, 7vw, 6.25rem) * -1);
    padding: clamp(1.5rem, 5.18vw, 3rem) clamp(1rem, 4vw, 3rem);
    box-sizing: border-box;
    box-shadow: rgba(149, 157, 165, 0.2) -20px 20px 30px;
    background-color: var(--secondaryLight);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #contact-1392 .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-1392 .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-1392 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    color: var(--headerColor);
    background-color: #fff;
    border: none;
    box-sizing: border-box;
  }
  #contact-1392 .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #contact-1392 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #contact-1392 .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #contact-1392 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #contact-1392 .cs-button-solid:hover {
    color: var(--primary);
  }
  #contact-1392 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-1392 .cs-submit {
    width: 100%;
    min-width: 12.5rem;
    border: none;
  }
  #contact-1392 .cs-submit:hover {
    color: #fff;
    cursor: pointer;
  }

  /*-- -------------------------- -->
  <---          Footer            -->
  <--- -------------------------- -*/
  #footer-1392 {
    padding: var(--sectionPadding);
    /* 80px - 100px */
    padding-top: clamp(5rem, 7vw, 6.25rem);
    background-color: var(--backgroundDark);
    position: relative;
    z-index: 1;
  }
  #footer-1392 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #footer-1392 .cs-top {
    width: 100%;
    margin-bottom: 2.5rem;
    /* 24px - 64px */
    padding-bottom: clamp(1.5rem, 5vw, 4rem);
    border-bottom: 1px solid #484848;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 24px - 40px */
    gap: clamp(1.25rem, 4vw, 2.5rem);
  }
  #footer-1392 .cs-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 0.5rem;
    /* 24px - 36px */
    column-gap: clamp(1.5rem, 4vw, 2.25rem);
  }
  #footer-1392 .cs-li {
    list-style: none;
  }
  #footer-1392 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: #bababa;
    display: block;
    transition: color 0.3s;
  }
  #footer-1392 .cs-link:hover {
    color: var(--primary);
  }
  #footer-1392 .cs-logo {
    width: 100%;
    max-width: 13.0625rem;
    height: auto;
    display: block;
  }
  #footer-1392 .cs-logo-img {
    width: 100%;
    height: auto;
    display: block;
  }
  #footer-1392 .cs-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  #footer-1392 .cs-social {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  #footer-1392 .cs-social-li {
    list-style: none;
  }
  #footer-1392 .cs-social-link {
    width: 2rem;
    height: 2rem;
    background-color: #484848;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #footer-1392 .cs-social-link:hover {
    background-color: var(--primary);
  }
  #footer-1392 .cs-social-link:hover .cs-social-icon {
    filter: grayscale(1) brightness(1000%);
    opacity: 1;
  }
  #footer-1392 .cs-social-icon {
    width: 0.75rem;
    height: auto;
    display: block;
    opacity: 0.6;
    transition: opacity 0.3s;
  }
  #footer-1392 .cs-copyright {
    font-size: 1rem;
    color: #bababa;
    line-height: 1.5em;
    margin: 0;
    display: block;
  }
  #footer-1392 .cs-copyright-link,
  #footer-1392 .cs-separater {
    font-size: 1rem;
    text-decoration: none;
    color: #bababa;
    transition: color 0.3s;
  }
  #footer-1392 .cs-copyright-link:hover,
  #footer-1392 .cs-separater:hover {
    color: var(--primary);
  }
  #footer-1392 .cs-separater {
    margin: 0 1rem;
    display: inline-block;
  }

  /*-- -------------------------- -->
  <---   Interior Service Page    -->
  <--- -------------------------- -*/

  /*-- -------------------------- -->
  <---          Banner            -->
  <--- -------------------------- -*/

  #banner {
    font-family: "Poppins", "Arial", sans-serif;
    padding: clamp(15rem, 24vw, 17.5rem) 1rem 6.25rem;
    position: relative;
    z-index: 1;
  }

  #banner .cs-container {
    text-align: center;
    width: 90%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  #banner .cs-int-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }

  #banner .cs-int-title::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 100%;
    background-color: var(--secondary);
    transform: translateX(-1.5rem);
  }

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

  #banner .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(
      to right,
      rgb(157 43 16 / 60%),
      rgb(0 0 0 / 75%)
    );
    top: 0;
    left: 0;
    z-index: 1;
  }

  #banner .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }

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

  #content {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: "Roboto", "Arial", sans-serif;
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  #content .cs-container {
    width: 100%;
    max-width: 32.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }

  #content .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 46.125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #content .cs-content img {
    width: 100%;
    height: auto;
    margin: 1rem 0;
    display: block;
  }

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

  #content h2,
  #content h3,
  #content h4,
  #content h5,
  #content h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }

  #content h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }

  #content h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }

  #content h4,
  #content h5,
  #content h6 {
    font-size: 1.25rem;
  }

  #content .cs-button-solid {
    margin-bottom: 2rem;
  }

  #content .cs-color {
    color: var(--secondary);
  }

  #content p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }

  #content p:last-of-type {
    margin-bottom: 2rem;
  }

  #content p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
  }

  #content ol,
  #content ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #content ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }

  #content ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }

  #content .cs-image-group {
    /* scales the whole section down and ties the font size to the vw and stops at 70% of the vale of 1em, changes at desktop */
    font-size: min(1vw, 1em);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 100%;
    height: 49.5em;
    /* display: none; */
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    /* flips it horizontally */
    transform: scaleX(-1);
  }

  #content .cs-picture {
    width: 100%;
    height: 49.5em;
    /* border-radius: 17.8125em; */
    /* border: 0.75em solid #ffffff; */
    background-color: #f7f7f7;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    /* clips img tag corners */
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  #content .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    /* flips the image to its original orientation */
    transform: scaleX(-1);
  }

  #content .cs-flower {
    width: 22.625em;
    height: auto;
    display: block;
    position: absolute;
    bottom: -2.375em;
    right: -3em;
    z-index: -1;
    transform: rotate(142deg);
  }

  #content .cs-sense {
    width: 5em;
    height: auto;
    position: absolute;
    top: -0.25em;
    left: 0.625em;
    transform: rotate(90deg);
  }

  #content .cs-background {
    display: none;
  }

  #content .button-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }

  #content .int-button img {
    position: absolute;
    height: 1.5rem;
    width: auto;
    right: 12px;
    top: 15px;
  }

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

  #content .cta-container {
    width: 100%;
    max-width: 32.5rem;
    margin: 5rem auto 0 auto;
    /* 32px - 88px top & bottom */
    /* 24px - 88px left & right */
    padding: clamp(2em, 6.3vw, 5.5em) clamp(1.5em, 5.7vw, 5.5em);
    /* border-radius: 1rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
    /* clips the corners for the border radius to show */
    overflow: hidden;
    z-index: 1;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #content .cta-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1;
  }
  #content .cta-background:before {
    /* black overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.85;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #content .cta-background:after {
    /* brown overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primaryLight);
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 2;
  }
  #content .cta-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #content .cta-top-section {
    max-width: 27.125rem;
  }
  #content .cta-title {
    /* 25px - 49px */
    font-size: clamp(1.5rem, 3.1vw, 2.1rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 50rem;
    /* 20px - 48px */
    margin: 0 auto clamp(1.25rem, 4.7vw, 3rem);
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #content .cta-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: auto;
    color: #fff;
    width: 15rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #content .cta-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--secondary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #content .cta-button-solid:hover:before {
    width: 100%;
  }
  #content .cta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 12px - 20px */
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
    width: 100%;
    text-align: center;
  }
  #content .cta-header {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.4vw, 1.5625rem);
    font-weight: 700;
    color: #fff;
    display: block;
  }
  #content .cta-p {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
}

@media only screen and (min-width: 48rem) {
  /*-- -------------------------- -->
  <---          Contact           -->
  <--- -------------------------- -*/
  #contact-1392 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #contact-1392 .cs-content {
    width: 47%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #contact-1392 .cs-submit {
    width: auto;
  }

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

  #footer-1392 .cs-top {
    align-items: flex-start;
  }
  #footer-1392 .cs-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
  #footer-1392 .cs-flex {
    margin: 0 auto;
  }
  #footer-1392 .cs-social {
    /* sends it to the right in the 3rd position */
    order: 3;
  }

  /*-- -------------------------- -->
  <---   Interior Service Page    -->
  <--- -------------------------- -*/

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

  #content .cs-container {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 80rem;
    height: 85rem;
  }

  #content .cs-image-group {
    display: block;
  }

  #content .cs-background {
    width: 20%;
    height: 100%;
    background-color: #f7f7f7;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  #content .cs-background img {
    width: 100%;
    height: 100%;
    opacity: 0.2;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #content .cs-image-group {
    order: 1;
    width: 60%;
    height: 35em;
  }

  #content .cs-picture {
    height: 35em;
  }

  #content .button-group {
    order: 3;
    width: 33%;
  }

  #content .button-group .int-button {
    line-height: 3rem;
  }

  #content .cs-content {
    order: 2;
    width: 60%;
  }

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

  #content .cta-container {
    max-width: 32rem;
    order: 4;
    width: 33%;
    transform: translateY(-4rem);
  }

  #content .cta-content {
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #content .cta-button-solid {
    font-size: 0.8rem;
    width: 11.8rem;
  }
}

@media only screen and (min-width: 64rem) {
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 23px - 420px */
    padding: 0rem 1rem 0rem clamp(14.6875rem, 23vw, 26.25rem);
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 20rem;
    height: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 32px - 64px */
    padding: 1rem clamp(2rem, 4vw, 4rem);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
  #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-ul {
    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;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li:last-of-type {
    /* pushes the button to the far roght */
    margin-left: auto;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 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: 12.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-nav-button {
    margin: 0 0 0 auto;
  }

  /*-- -------------------------- -->
  <---          Contact           -->
  <--- -------------------------- -*/
  #contact-1392 .cs-form {
    width: 46%;
    max-width: 36.125rem;
  }
  #contact-1392 .cs-submit {
    width: auto;
  }

  /*-- -------------------------- -->
  <---   Interior Service Page    -->
  <--- -------------------------- -*/

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

  #content .cta-container {
    gap: 3rem;
  }

  #content .cta-button-solid {
    font-size: 1rem;
  }

  #content .cta-button-solid {
    width: 14rem;
  }
}

@media only screen and (min-width: 81.25rem) {
  /*-- -------------------------- -->
  <---   Interior Service Page    -->
  <--- -------------------------- -*/

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

  #content .cs-background {
    width: 50%;
    /* with the left edge always positioned at the center line, we push left of the center line by 335px.  This ensures that this element will stay exactly in this position no matter hoe wide the screen gets */
    margin-left: 20.9375rem;
    right: auto;
    /* sets the left edge of the element to be at the center line */
    left: 50%;
  }
}

@media only screen and (min-width: 93.75rem) {
  /*-- -------------------------- -->
  <---          Contact           -->
  <--- -------------------------- -*/
  #contact-1392 .cs-graphic {
    display: block;
  }
}