/* Font */

@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alex+Brush&display=swap");

:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #db9423;
  --primaryLight: #ffba43;
  --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;
}
::selection {
  color: black;
  background-color: #db9423;
}
body,
html {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: "poppins", sans-serif;
  color: var(--bodyText);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}
.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-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);
}
.skip {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1111111;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0.375em rgba(0, 0, 0, 0.3);
  background-color: #fff;
}
::-webkit-scrollbar-track-piece {
  background-color: #f0f0f0;
}
::-webkit-scrollbar {
  width: 0.75em;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  border-radius: 0.625em;
  background: var(--primary);
}

/* End Core */

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

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #cs-navigation:before {
    height: 100%;
  }
  #cs-navigation {
    width: 100%;
    padding: 1.25rem 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background: rgba(26, 26, 26, 0.08);
    -webkit-backdrop-filter: blur(27px);
    backdrop-filter: blur(27px);
    position: fixed;
    z-index: 10000;
    transition: background-color 0.3s;
  }
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 0%;
    background: #1a1a1a;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    transition: height 0.3s;
  }
  #cs-navigation:after {
    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: 0%;
    right: 0;
    z-index: -1100;
    opacity: 0;
    transition: height 0.5s, opacity 0.5s;
  }
  #cs-navigation.cs-active {
    background-color: #1a1a1a;
  }
  #cs-navigation.cs-active:after {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    transform: translateY(0);
    opacity: 1;
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    width: auto;
    /* 56px - 80px */
    height: clamp(3.5rem, 5vw, 5rem);
    margin: 0 auto 0 0;
    padding: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 0 auto;
    background-color: var(--primary);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s;
    position: relative;
    z-index: 10;
  }
  #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: 1rem;
    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 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.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 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    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: -1;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s, opacity 0.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 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-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}

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

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    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-active .cs-drop-icon {
    transform: translateY(-50%) rotate(180deg);
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
    transition: transform 0.3s;
  }
  #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 0.3s, margin 0.3s, height 0.3s, opacity 0.3s,
      visibility 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown:hover {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul {
    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.9375rem;
    height: auto;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    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: 99.5%;
    z-index: -100;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s, visibility 0.3s, opacity 0.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 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link:hover .cs-drop-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    white-space: nowrap;
    width: 100%;
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    padding: 0.75rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    color: var(--bodyTextColorWhite);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
  }
  #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 {
    /* when the scroll class is on the body, run these styles */
  }
  body.scroll #cs-navigation:before {
    height: 100%;
  }
  #cs-navigation {
    width: 100%;
    padding: 0 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background: rgba(26, 26, 26, 0.08);
    -webkit-backdrop-filter: blur(27px);
    backdrop-filter: blur(27px);
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation:before {
    /* on scroll background */
    content: "";
    width: 100%;
    height: 0%;
    background: #1a1a1a;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    transition: height 0.3s;
  }
  #cs-navigation .cs-container {
    width: 100%;
    /* same height as the cs-ul-wrapper */
    height: 6.25rem;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    position: relative;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: auto;
    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: 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-wrapper {
    /* absolutely positioned to be dead center */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2.5rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 0.6vw, 1rem);
    line-height: 1.5em;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0;
    padding: 0 1rem;
    color: var(--bodyTextColorWhite);
    display: block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link:before {
    /* on scroll background */
    content: "";
    width: 100%;
    height: 2.5rem;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) scale(1.2);
    transition: opacity 0.3s, transform 0.3s;
  }
  #cs-navigation .cs-li-link:hover:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  #cs-navigation .cs-li-link.cs-active:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  #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;
    min-width: 9.375rem;
    padding: 0 2rem;
    background-color: transparent;
    border: 1px solid var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cs-navigation .cs-button-solid: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-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-998 {
    /* min-height: 100vh; */
    /* 144px - 280px */
    padding: clamp(9rem, 25.95vw, 17.5rem) 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    position: relative;
  }
  #hero-998 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
  }
  #hero-998 .cs-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #hero-998 .cs-topper {
    /* 16px - 31px */
    font-size: clamp(1rem, 4.3vw, 1.9375rem);
    white-space: nowrap;
    line-height: 1.2em;
    width: 100%;
    /* 12px - 24px */
    margin: 0 0 clamp(0.75rem, 3vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 1rem;
  }
  #hero-998 .cs-topper:before {
    /* left line */
    content: "";
    width: 100%;
    max-width: 6.25rem;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-998 .cs-topper:after {
    /* right line */
    content: "";
    width: 100%;
    max-width: 6.25rem;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-998 .cs-logo {
    width: 100%;
    max-width: 38.375rem;
    margin: 0 0 1.5rem 0;
    display: block;
  }
  #hero-998 .cs-logo img {
    width: 100%;
    height: auto;
  }
  #hero-998 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    max-width: 32.375rem;
    /* 24px - 48px */
    margin: 0 0 clamp(1.5rem, 3vw, 3rem) 0;
    color: var(--bodyTextColorWhite);
  }
  #hero-998 .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: auto;
    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;
    transition: color 0.3s;
  }
  #hero-998 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-998 .cs-button-solid:hover {
    color: #1a1a1a;
  }
  #hero-998 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-998 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #hero-998 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-998 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Desktop Parallax - 1400px */
@media only screen and (min-width: 87.5rem) {
  #hero-998 .cs-background {
    background: url("/images/background-1.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* makes parallax effect */
    background-attachment: fixed;
  }
  #hero-998 .cs-background img {
    display: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1015 {
    /* prevents the overflowing cs-picture at large desktop from causing overflow issues */
    overflow: hidden;
  }
  #sbs-1015 .cs-container {
    width: 100%;
    max-width: 80rem;
    /* 16px - 20px */
    margin: 0 auto clamp(1rem, 1.5vw, 1.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
    position: relative;
  }
  #sbs-1015 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 33.125rem;
    /* moved section padding to the content area */
    padding: var(--sectionPadding);
    padding-bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #sbs-1015 .cs-title {
    font-family: "Alex Brush";
    font-weight: 500;
  }

  #sbs-1015 .cs-text {
    margin: 0 0 2rem;
  }
  #sbs-1015 .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;
  }
  #sbs-1015 .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;
  }
  #sbs-1015 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-1015 .cs-picture {
    width: 100%;
    height: 30rem;
    display: block;
    position: relative;
  }
  #sbs-1015 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-1015 .cs-image-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #sbs-1015 .cs-image {
    width: 100%;
    /* 170px - 284px */
    height: clamp(10.625rem, 32vw, 17.75rem);
    display: block;
    grid-column: span 6;
    position: relative;
  }
  #sbs-1015 .cs-image:nth-of-type(3),
  #sbs-1015 .cs-image:nth-of-type(4),
  #sbs-1015 .cs-image:nth-of-type(5) {
    display: none;
  }
  #sbs-1015 .cs-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1015 .cs-container {
    /* moved section padding to the container */
    padding: var(--sectionPadding);
    padding-bottom: 0;
    /* remove padding-right so the image touches the right screen edge */
    padding-right: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    flex-direction: row;
    justify-content: space-between;
  }
  #sbs-1015 .cs-content {
    text-align: left;
    padding: 0;
    align-items: flex-start;
  }
  #sbs-1015 .cs-image {
    grid-column: span 4;
  }
  #sbs-1015 .cs-image:nth-of-type(3) {
    display: block;
  }
}
/* Large Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #sbs-1015 {
    /* moved section padding to the section but removed all padding except the padding top.  We're moving the padding top from the container to the section container so we can place the cs-picture easier inside the cs-container. If the [Business Name] below this [Business Name] is on a white background, add padding-bottom:0; to this one so there's not a huge gap between the sections. */
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
  }
  #sbs-1015 .cs-container {
    padding-top: 0;
  }
  #sbs-1015 .cs-content {
    padding: 3.25rem 0;
  }
  #sbs-1015 .cs-picture {
    width: 50vw;
    height: 100%;
    margin: 0 0 0 0.625rem;
    /* absolutely positioned so it can rest on the right edge of the screen, and its height will respond the the changing height of the cs-content when you add or subtract content */
    position: absolute;
    left: 50%;
    top: 0;
  }
  #sbs-1015 .cs-image-group {
    grid-template-columns: repeat(5, 1fr);
  }
  #sbs-1015 .cs-image {
    grid-column: span 1;
  }
  #sbs-1015 .cs-image:nth-of-type(4),
  #sbs-1015 .cs-image:nth-of-type(5) {
    display: block;
  }
}

/*-- -------------------------- -->
<---           Logos            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #logos-1896 {
    /* 60px - 120px top & bottom */
    /* 16px - 40px left & right */
    padding: clamp(3.75rem, 8vw, 7.5rem) clamp(1rem, 2vw, 2.5rem);
    background-color: #f6eddf;
  }
  #logos-1896 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #logos-1896 .cs-title {
    font-size: 1.5625rem;
    font-weight: 700;
    margin: 0;
  }
  #logos-1896 .cs-logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-self: stretch;
  }
  #logos-1896 .cs-logo {
    width: 45%;
    max-width: 12.5rem;
    height: auto;
    margin: 0;
    mix-blend-mode: darken;
    display: block;
    filter: brightness(100%) contrast(100%) saturate(0%) blur(0px)
      hue-rotate(0deg);
  }
  #logos-1896 .cs-logo:hover {
    filter: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #logos-1896 .cs-logo {
    width: 15%;
    /* the max width becomes whatever the actual width of the image is */
    max-width: max-content;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #logos-1896 .cs-logo-wrapper {
    justify-content: space-between;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-66 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #reviews-66 .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-66 .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-66 .cs-title {
    color: var(--bodyTextColorWhite);
    font-family: "Alex Brush";
    font-weight: 500;
  }
  #reviews-66 .cs-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #reviews-66 .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: 2.875rem;
  }
  #reviews-66 .cs-item {
    list-style: none;
    text-align: center;
    width: 100%;
    max-width: 22.125rem;
    padding: 0 1.5rem 1.5rem;
    margin: 0;
    background: #fff;
    /* prevent padding from adding to the height and width */
    box-sizing: border-box;
  }
  #reviews-66 .cs-img {
    margin: 0 auto 1rem;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    display: block;
    transform: translateY(-1.75rem);
  }
  #reviews-66 .cs-name {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #reviews-66 .cs-desc {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: center;
    margin: 0 0 1rem;
    color: #7d799c;
    display: block;
  }
  #reviews-66 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    max-width: 17.5rem;
    margin: auto;
    color: var(--bodyTextColor);
  }
  #reviews-66 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #1a1a1a;
    min-width: 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;
    transition: color 0.3s;
  }
  #reviews-66 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #reviews-66 .cs-button-solid:hover {
    color: #fff;
  }
  #reviews-66 .cs-button-solid:hover:before {
    width: 100%;
  }
  #reviews-66 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #reviews-66 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #reviews-66 .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) {
  #reviews-66 .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-66 .cs-item {
    /* width: clamp(31.5%, 30vw, 32.3%); */
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-399 {
    padding: var(--sectionPadding);
  }
  #reviews-399 .cs-title {
    font-family: "Alex Brush";
    font-weight: 500;
  }
  #reviews-399 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-399 .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-399 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-399 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    /* 20px - 40px top & bottom */
    /* 20px - 40px left & right */
    padding: clamp(1.25rem, 3.15vw, 2.5rem) clamp(1.25rem, 3.15vw, 2.5rem);
    background-color: #f7f7f7;
    border-radius: 1rem;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews-399 .cs-quote {
    width: 2.5rem;
    height: auto;
    margin-bottom: 2rem;
    display: block;
  }
  #reviews-399 .cs-quote-white {
    width: 3.75rem;
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    right: 1.5rem;
  }
  #reviews-399 .cs-review {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 1.6vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    /* 20px - 40px */
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  #reviews-399 .cs-flex-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
  }
  #reviews-399 .cs-profile {
    width: 3.125rem;
    height: 3.125rem;
    border: 4px solid #fff;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #reviews-399 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }
  #reviews-399 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--headerColor);
    display: block;
  }
  #reviews-399 .cs-job {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-399 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #reviews-399 .cs-item {
    /* width: clamp(31.5%, 30vw, 32.3%); */
  }
}

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

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

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #content-1450 {
    padding: var(--sectionPadding);
    position: relative;
    background-image: url("/images/background-1.jpeg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #content-1450:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.72;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #content-1450 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #content-1450 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #content-1450 .cs-title {
    color: #db9423;
    font-weight: 400;
    font-family: "Abril Fatface", display;
  }
  #content-1450 .cs-title,
  #content-1450 .cs-text {
    max-width: 100%;
    z-index: 100;
  }
  #content-1450 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 0 2rem 0;
    color: #fff;
  }
  #content-1450 .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 3rem;
    background-color: var(--primary);
    border-radius: 0.5rem;
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #content-1450 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #content-1450 .cs-button-solid:hover:before {
    width: 100%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-974 {
    padding: var(--sectionPadding);
  }
  #gallery-974 .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;
  }
  #gallery-974 .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;
  }
  #gallery-974 .cs-title {
    margin: 0 0 1.5rem 0;
    font-family: "Alex Brush";
    font-weight: 500;
  }
  #gallery-974 .cs-button-group {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 2rem;
  }
  #gallery-974 .cs-button {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    background-color: transparent;
    border: none;
    transition: color 0.3s;
  }
  #gallery-974 .cs-button:hover {
    color: var(--primary);
    cursor: pointer;
  }
  #gallery-974 .cs-button.cs-active {
    color: var(--primary);
  }
  #gallery-974 .cs-gallery-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  #gallery-974 .cs-gallery {
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s,
      left 0.3s;
    /* makes the transfrom scaling orgin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: left top;
  }
  #gallery-974 .cs-gallery.cs-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the gallery won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-container (left: 0). Same for the top:0 value, the gallery won't go past that posiiton when it animates */
    top: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0) scaleX(0);
  }
  #gallery-974 .cs-gallery.cs-hidden .cs-image {
    /* when gallery is hidden, add these styles to the cs-image to animate from when cs-hidden is removed from the .cs-gallery */
    transform: translateY(2.1875rem);
    opacity: 0;
  }
  #gallery-974 .cs-image {
    width: 50%;
    aspect-ratio: 1;
    /* clips the image corners */
    overflow: hidden;
    display: block;
    position: relative;
    /* when .cs-hidden is removed from the .cs-gallery, reset these values and animate between their hidden styles */
    transform: translateY(0rem);
    opacity: 1;
    transition: opacity 0.6s, transform 0.6s;
  }
  #gallery-974 .cs-image:nth-of-type(1) {
    /* the transition delays change at desktop */
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
  }
  #gallery-974 .cs-image:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #gallery-974 .cs-image:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #gallery-974 .cs-image:nth-of-type(4) {
    transition-delay: 0.6s;
  }
  #gallery-974 .cs-image:nth-of-type(5) {
    transition-delay: 0.75s;
  }
  #gallery-974 .cs-image:nth-of-type(6) {
    transition-delay: 0.9s;
  }
  #gallery-974 .cs-image:nth-of-type(7) {
    transition-delay: 1.05s;
  }
  #gallery-974 .cs-image:nth-of-type(8) {
    transition-delay: 1.2s;
  }
  #gallery-974 .cs-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #gallery-974 .cs-container {
    max-width: 80rem;
  }
  #gallery-974 .cs-image {
    width: 25%;
    height: 25rem;
  }
  #gallery-974 .cs-image:nth-of-type(1) {
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
  }
  #gallery-974 .cs-image:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #gallery-974 .cs-image:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #gallery-974 .cs-image:nth-of-type(4) {
    transition-delay: 0.6s;
  }
  #gallery-974 .cs-image:nth-of-type(5) {
    transition-delay: 0.15s;
  }
  #gallery-974 .cs-image:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #gallery-974 .cs-image:nth-of-type(7) {
    transition-delay: 0.45s;
  }
  #gallery-974 .cs-image:nth-of-type(8) {
    transition-delay: 0.6s;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1750 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #contact-1750 .cs-container {
    width: 100%;
    /* changes to 1024 on desktop */
    max-width: 44rem;
    margin: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    /* 48px - 64px */
    gap: clamp(3rem, 5vw, 4rem);
  }
  #contact-1750 .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #contact-1750 .cs-form-group {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* resets to 0 at tablet */
    margin: auto;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #contact-1750 .cs-title {
    margin: 0 0 1.5rem;
  }
  #contact-1750 .cs-form {
    width: 100%;
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  #contact-1750 .cs-label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: span 12;
    gap: 0.5rem;
  }
  #contact-1750 .cs-input {
    font-size: 1rem;
    width: 100%;
    /* 46px - 56px */
    height: clamp(2.875rem, 4.5vw, 3.5rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    padding: 0;
    padding-left: 1.5rem;
    background-color: #f7f7f7;
    color: var(--headerColor);
    border: none;
  }
  #contact-1750 .cs-input::placeholder {
    color: var(--bodyTextColor);
  }
  #contact-1750 .cs-textarea {
    font-family: inherit;
    min-height: 7.5rem;
    padding-top: 1.5rem;
  }
  #contact-1750 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #1a1a1a;
    border: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #contact-1750 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #contact-1750 .cs-button-solid:hover {
    color: #fff;
  }
  #contact-1750 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-1750 .cs-submit {
    margin: 1rem 0 0;
    color: var(--bodyTextColorWhite);
    grid-column: span 12;
    justify-self: flex-start;
  }
  #contact-1750 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-1750 .cs-info-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  #contact-1750 .cs-detail {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--bodyTextColor);
    display: block;
  }
  #contact-1750 .cs-picture-group {
    width: 110%;
    height: 100vw;
    /* removed at desktop */
    max-height: 31.375rem;
    margin-top: 3rem;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  #contact-1750 .cs-iframe {
    width: 100%;
    height: 100%;
    display: block;
  }
  #contact-1750 .cs-graphic {
    width: 100%;
    min-width: 80rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
  }
  #contact-1750 .cs-top {
    top: 0;
  }
  #contact-1750 .cs-left {
    left: 4%;
    transform: rotate(270deg);
    transform-origin: left;
  }
  #contact-1750 .cs-bottom {
    bottom: 0;
    left: 0;
    transform: rotateX(180deg);
  }
  #contact-1750 .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #contact-1750 {
    /* using flex: 1 on both group elements to ensure they're both the same width */
  }
  #contact-1750 .cs-container {
    flex-direction: row;
    align-items: center;
  }
  #contact-1750 .cs-form-group {
    flex: 1;
  }
  #contact-1750 .cs-info-group {
    flex: 1;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1750 .cs-container {
    width: 65%;
    max-width: 64rem;
    margin: 0 auto 0 0;
    padding: 2.5rem 1.5rem;
  }
  #contact-1750 .cs-picture-group {
    width: 90%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: -1;
    transform: none;
  }
  #contact-1750 .cs-picture-group {
    margin-left: -12.75rem;
    left: 50%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #contact-1750 .cs-label:nth-of-type(2),
  #contact-1750 .cs-label:nth-of-type(3) {
    grid-column: span 6;
  }
}
/* Largest Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #contact-1750 {
    padding-top: 7vw;
    padding-bottom: 9vw;
  }
  #contact-1750 .cs-container {
    margin: 0 auto;
    transform: translateX(-22rem);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  #content-page-1533 {
    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-page-1533 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 4vw, 4rem);
    position: relative;
  }
  #content-page-1533 .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-page-1533 .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-page-1533 h2,
  #content-page-1533 h3,
  #content-page-1533 h4,
  #content-page-1533 h5,
  #content-page-1533 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #content-page-1533 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #content-page-1533 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #content-page-1533 h4,
  #content-page-1533 h5,
  #content-page-1533 h6 {
    font-size: 1.25rem;
  }
  #content-page-1533 .cs-button-solid {
    margin-bottom: 2rem;
  }
  #content-page-1533 .cs-no-margin {
    margin: 0;
  }
  #content-page-1533 .cs-color {
    color: var(--primary);
  }
  #content-page-1533 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  #content-page-1533 p:last-of-type {
    margin-bottom: 2rem;
  }
  #content-page-1533 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    filter: brightness(120%);
  }
  #content-page-1533 ol,
  #content-page-1533 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #content-page-1533 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #content-page-1533 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-page-1533 img {
    width: 100%;
    height: auto;
    display: block;
  }
  #content-page-1533 .cs-image-group {
    width: 32.625em;
    height: 33.75em;
    display: none;
    position: relative;
    z-index: 1;
  }
  #content-page-1533 .cs-background {
    width: 100%;
    height: 100%;
    border-radius: 2.5em;
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #content-page-1533 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #content-page-1533 .cs-flower {
    width: 9.5625em;
    height: auto;
    position: absolute;
    right: -2em;
    top: -2.25em;
    z-index: 10;
  }
  #content-page-1533 .cs-floater {
    width: 44.375em;
    height: auto;
    position: absolute;
    left: 9.375em;
    top: 25em;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #content-page-1533 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #content-page-1533 .cs-content {
    width: 60%;
    max-width: 43.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #content-page-1533 .cs-image-group {
    font-size: min(1.3vw, 1em);
    display: block;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #content-page-1533 .cs-content {
    width: 53%;
  }
}

/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #banner-1031 {
    padding: 0 1rem;
    /* 160px - 245px */
    padding-top: clamp(10rem, 25vw, 15.3125rem);
    padding-bottom: 7.5rem;
    background-color: #000;
    position: relative;
    z-index: 1;
  }
  #banner-1031 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #banner-1031 .cs-picture {
    width: 100%;
    margin: 0 0 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    position: relative;
  }
  #banner-1031 .cs-picture:before {
    /* left line */
    content: "";
    width: 50%;
    max-width: 9.375rem;
    height: 1px;
    background: #b4b2c7;
    opacity: 1;
    position: relative;
    display: block;
  }
  #banner-1031 .cs-picture:after {
    /* right line */
    content: "";
    width: 50%;
    max-width: 9.375rem;
    height: 1px;
    background: #b4b2c7;
    opacity: 1;
    position: relative;
    display: block;
  }
  #banner-1031 .cs-icon {
    width: 40%;
    /* 100px - 180px */
    max-width: clamp(6.25rem, 18vw, 11.25rem);
    height: auto;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #banner-1031 .cs-int-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.5vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #banner-1031 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 47.8125rem;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #banner-1031 .cs-background {
    width: 100%;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1;
  }
  #banner-1031 .cs-background:before {
    /* black overlay box */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.72;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #banner-1031 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/*-- -------------------------- -->
<---           Menu             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  html,
  body {
    /* when you click a menu button and jump to the top of the screen this makes it so it has a smooth transiiton instead of an abrupt movement */
    scroll-behavior: smooth;
    overflow: initial;
  }
  #cs-menu-group-1018 {
    text-align: center;
    height: auto;
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  #cs-menu-group-1018 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    padding: var(--sectionPadding);
    /* 48px - 64px */
    padding-top: clamp(3rem, 5vw, 4rem);
    /* prevents padding and border 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;
  }
  #cs-menu-group-1018 .cs-hidden {
    display: none;
  }
  #cs-menu-group-1018 .cs-button-group {
    width: auto;
    max-width: 62.5rem;
    margin: 0 1rem;
    /* 16px - 28px top & bottom */
    /* 32px - 48px left & right */
    padding: clamp(1rem, 3vw, 1.75rem) clamp(2rem, 4vw, 3rem);
    border-radius: 4.375rem;
    background-color: #f3f3f3;
    border: 1px solid #b4b2c7;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    /* 24px - 36px */
    column-gap: clamp(1.5rem, 2vw, 2.25rem);
    row-gap: 0.75rem;
    position: sticky;
    /* change based on how tall your navigation is above it.  If your navigation is 90px tall, set it to 100px from the top on mobile, and increase the larger value in the clamp to change the desktop value if you need to as well */
    /* 84px - 110px */
    top: clamp(5.25rem, 8vw, 6.875rem);
    z-index: 1000;
  }
  #cs-menu-group-1018 .cs-button {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    padding: 0;
    color: #878787;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: color 0.3s, font-weight 0.3s, color 0.3s;
  }
  #cs-menu-group-1018 .cs-button:hover {
    color: var(--primary);
    cursor: pointer;
  }
  #cs-menu-group-1018 .cs-button:after {
    /* active state icon */
    content: "";
    position: relative;
    display: block;
    width: 0;
    /* 16px - 24px */
    height: clamp(1rem, 3vw, 1.5rem);
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ffancy-icon.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: width 0.3s, opacity 0.3s, margin-left 0.3s;
  }
  #cs-menu-group-1018 .cs-button.cs-active {
    color: var(--headerColor);
    font-weight: 700;
  }
  #cs-menu-group-1018 .cs-button.cs-active:after {
    width: clamp(1.5625rem, 3vw, 2.25rem);
    opacity: 1;
    /* 8px - 16px */
    margin-left: clamp(0.5rem, 0.5vw, 1rem);
  }
  #cs-menu-group-1018 .cs-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 32px - 64px */
    gap: clamp(2rem, 6vw, 4rem);
  }
  #cs-menu-group-1018 .cs-menu.cs-menu-style2 {
    /* changes to desktop at desktop */
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FMISC%2Fwood2-m.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }
  #cs-menu-group-1018 .cs-menu.cs-menu-style2:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cs-menu-group-1018 .cs-menu.cs-menu-style2 .cs-title,
  #cs-menu-group-1018 .cs-menu.cs-menu-style2 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #cs-menu-group-1018 .cs-menu.cs-menu-style2 .cs-name {
    color: var(--bodyTextColorWhite);
  }
  #cs-menu-group-1018 .cs-menu.cs-menu-style2 .cs-menu-p {
    color: #fff;
    opacity: 0.8;
  }
  #cs-menu-group-1018 .cs-menu.cs-menu-style3 {
    background-color: rgba(255, 255, 255, 0.7);
  }
  #cs-menu-group-1018 .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;
    position: relative;
    z-index: 20;
  }
  #cs-menu-group-1018 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #cs-menu-group-1018 .cs-menu-list {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 32px - 60px */
    row-gap: clamp(2rem, 6vw, 3.75rem);
    position: relative;
    z-index: 20;
  }
  #cs-menu-group-1018 .cs-menu-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 32px - 60px */
    row-gap: clamp(2rem, 6vw, 3.75rem);
  }
  #cs-menu-group-1018 .cs-menu-item {
    text-align: left;
    list-style: none;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #cs-menu-group-1018 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
  }
  #cs-menu-group-1018 .cs-h3:after {
    /* divider line */
    content: "";
    width: 50%;
    height: 1px;
    background: #b4b2c7;
    opacity: 1;
    position: relative;
    display: block;
    order: 1;
  }
  #cs-menu-group-1018 .cs-name {
    /* 16px - 25px */
    font-size: clamp(1rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    max-width: 16ch;
    margin-right: auto;
    color: var(--headerColor);
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #cs-menu-group-1018 .cs-price {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    width: auto;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 5rem;
    background-color: #fff;
    border: 1px solid #b4b2c7;
    color: var(--primary);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
    /* forces it into the 3rd position */
    order: 3;
  }
  #cs-menu-group-1018 .cs-menu-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-menu-group-1018 .cs-container {
    max-width: 80rem;
  }
  #cs-menu-group-1018 .cs-menu.cs-menu-style2 {
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FMISC%2Fwood.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  #cs-menu-group-1018 .cs-menu-row {
    width: 100%;
    flex-direction: row;
    justify-content: stretch;
    /* 32px - 80px */
    gap: clamp(2em, 4vw, 5rem);
  }
  #cs-menu-group-1018 .cs-menu-row.cs-3 .cs-h3 {
    gap: 0.5rem;
  }
  #cs-menu-group-1018 .cs-menu-row.cs-3 .cs-h3:after {
    display: none;
  }
  #cs-menu-group-1018 .cs-menu-row.cs-3 .cs-name {
    font-size: clamp(1rem, 2vw, 1.5625rem);
    width: 70%;
    max-width: 20ch;
  }
  #cs-menu-group-1018 .cs-menu-item {
    max-width: 37.5rem;
    margin: 0 auto;
  }
  #cs-menu-group-1018 .cs-name {
    width: fit-content;
    max-width: 70%;
  }
}