html {
  scroll-behavior: smooth;
}

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

/* Mobile - 1023px */
@media only screen and (max-width: 1023px) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #naviagtion-wrapper {
    /* 53px, same height as the cs-top-container */
    transform: translateY(-3.3125rem);
  }
  #naviagtion-wrapper {
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
    transition: transform 0.3s;
  }
  #naviagtion-wrapper:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    display: block;
    top: 100%;
    right: 0;
    z-index: -1100;
    opacity: 0;
    transition: height 0.5s, opacity 0.5s;
  }
  #naviagtion-wrapper.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #naviagtion-wrapper.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #naviagtion-wrapper.cs-active .cs-li {
    transform: translateY(0);
    opacity: 1;
  }
  #naviagtion-wrapper .cs-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #naviagtion-wrapper .cs-top-container {
    width: 100%;
    padding: 1rem 1.5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  #naviagtion-wrapper .cs-top-contact {
    width: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 16px - 24px */
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  #naviagtion-wrapper .cs-top-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #naviagtion-wrapper .cs-top-link:nth-of-type(2) {
    display: none;
  }
  #naviagtion-wrapper .cs-link-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #naviagtion-wrapper .cs-top-social {
    visibility: visible;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #naviagtion-wrapper .cs-social-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  #naviagtion-wrapper .cs-social-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #naviagtion-wrapper .cs-container {
    width: 100%;
    padding: 1.25rem 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  #naviagtion-wrapper .cs-logo {
    width: auto;
    height: 2.5rem;
    margin: 0 auto 0 0;
    padding: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
    z-index: 10;
  }
  #naviagtion-wrapper .cs-logo img {
    width: auto;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #naviagtion-wrapper .cs-nav {
    order: 2;
  }
  #naviagtion-wrapper .cs-toggle {
    width: 2.875rem;
    height: 2.875rem;
    margin: 0 0 0 auto;
    background-color: var(--primary);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s;
  }
  #naviagtion-wrapper .cs-toggle.cs-active {
    transform: rotate(180deg);
  }
  #naviagtion-wrapper .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #naviagtion-wrapper .cs-active .cs-line2 {
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
  }
  #naviagtion-wrapper .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }
  #naviagtion-wrapper .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 0.75rem;
    position: relative;
  }
  #naviagtion-wrapper .cs-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #fafbfc;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #naviagtion-wrapper .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;
  }
  #naviagtion-wrapper .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;
  }
  #naviagtion-wrapper .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #naviagtion-wrapper .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 3rem;
    opacity: 0;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s, opacity 0.3s;
  }
  #naviagtion-wrapper .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;
  }
  #naviagtion-wrapper .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;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #naviagtion-wrapper .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #naviagtion-wrapper .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #naviagtion-wrapper .cs-li-link.cs-active {
    color: var(--primary);
  }
  #naviagtion-wrapper .cs-li-link:hover {
    color: var(--primary);
  }
  #naviagtion-wrapper .cs-button-solid {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #naviagtion-wrapper .cs-top-link:nth-of-type(2) {
    display: flex;
  }
}

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

/* Mobile - 1023px */
@media only screen and (max-width: 1023px) {
  #naviagtion-wrapper .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #naviagtion-wrapper .cs-dropdown {
    position: relative;
    color: var(--bodyTextColorWhite);
  }
  #naviagtion-wrapper .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    opacity: 1;
    visibility: visible;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
  }
  #naviagtion-wrapper .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #naviagtion-wrapper .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #naviagtion-wrapper .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #naviagtion-wrapper .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;
  }
  #naviagtion-wrapper .cs-drop-li {
    list-style: none;
  }
  #naviagtion-wrapper .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) {
  #naviagtion-wrapper .cs-dropdown {
    position: relative;
  }
  #naviagtion-wrapper .cs-dropdown:hover {
    cursor: pointer;
  }
  #naviagtion-wrapper .cs-dropdown:hover .cs-drop-ul {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
  }
  #naviagtion-wrapper .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #naviagtion-wrapper .cs-drop-icon {
    width: 0.75rem;
    height: auto;
    margin-left: 0.25rem;
    display: inline-block;
  }
  #naviagtion-wrapper .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    border-bottom: 5px solid var(--primary);
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: 100%;
    z-index: -100;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
  }
  #naviagtion-wrapper .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;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #naviagtion-wrapper .cs-drop-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #naviagtion-wrapper .cs-li-link.cs-drop-link {
    font-size: 1rem;
    white-space: nowrap;
    line-height: 1.5em;
    text-decoration: none;
    width: 100%;
    padding: 0.75rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #naviagtion-wrapper .cs-li-link.cs-drop-link:hover {
    color: var(--primary);
    background-color: #f7f7f7;
  }
  #naviagtion-wrapper .cs-li-link.cs-drop-link:before {
    display: none;
  }
}

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

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  body.scroll #naviagtion-wrapper {
    /* 53px, the ssme height as the cs-top-container */
    transform: translateY(-3.3125rem);
  }
  #naviagtion-wrapper {
    width: 100%;
    padding: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
    transition: transform 0.3s;
  }
  #naviagtion-wrapper .cs-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #naviagtion-wrapper .cs-top-container {
    width: 100%;
    max-width: 80rem;
    padding: 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.125rem;
    position: relative;
    z-index: 1;
  }
  #naviagtion-wrapper .cs-top-container:before {
    /* grey background */
    content: "";
    width: 100vw;
    height: 100%;
    background: #f7f7f7;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #naviagtion-wrapper .cs-top-contact {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
  }
  #naviagtion-wrapper .cs-top-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #naviagtion-wrapper .cs-top-link:hover {
    text-decoration: underline;
  }
  #naviagtion-wrapper .cs-link-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #naviagtion-wrapper .cs-top-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  #naviagtion-wrapper .cs-social-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
  }
  #naviagtion-wrapper .cs-social-link:hover {
    transform: scale(1.1);
  }
  #naviagtion-wrapper .cs-social-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #naviagtion-wrapper .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    padding: 0 1rem;
    /* prevents padding from affectin gheight */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    position: relative;
  }
  #naviagtion-wrapper .cs-toggle {
    display: none;
  }
  #naviagtion-wrapper .cs-logo {
    /* 40px - 44px */
    height: clamp(2.5rem, 4vw, 2.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;
  }
  #naviagtion-wrapper .cs-logo img {
    width: 120px;
    height: 55px;
    /* 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;
  }
  #naviagtion-wrapper .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
  }
  #naviagtion-wrapper .cs-li {
    list-style: none;
    padding: 1.9375rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #naviagtion-wrapper .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #naviagtion-wrapper .cs-li-link:hover {
    color: var(--primary);
  }
  #naviagtion-wrapper .cs-li-link.cs-active {
    font-weight: 700;
    color: var(--headerColor);
  }
  #naviagtion-wrapper .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    padding: 0 2rem;
    background-color: var(--primary);
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #naviagtion-wrapper .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #naviagtion-wrapper .cs-button-solid:hover:before {
    width: 100%;
  }
  #naviagtion-wrapper .cs-nav-button {
    line-height: 2.875rem;
    margin-left: 1.5rem;
  }
}
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #home-hero {
    /* Centers button */
    text-align: center;
    /* 200px - 300px - leaving extra space for the navigation */
    padding: clamp(12.5rem, 25.95vw, 18.75em) 1rem;
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #home-hero .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #home-hero .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.48;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #home-hero .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #home-hero .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }
  #home-hero .cs-content {
    width: 100%;
    max-width: 39.375rem;
  }
  #home-hero .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--secondary);
    display: inline-block;
    position: relative;
  }
  #home-hero .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    color: #fff;
    position: relative;
  }
  #home-hero .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 auto 0;
    margin-bottom: 2rem;
    color: #fff;
  }
  #home-hero .cs-button-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #home-hero .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: 12.5rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #home-hero .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;
  }
  #home-hero .cs-button-solid:hover:before {
    width: 100%;
  }
  #home-hero .cs-button1 {
    background-color: var(--secondary);
  }

  #home-hero .cs-text-image {
    margin-top: 2.5rem;
  }

  #home-hero .cs-text-image img {
    width: 300px;
  }
}
@media only screen and (max-width: 800px) {
  #home-hero .cs-text-image img {
    width: 180px;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #home-sbs-1 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #home-sbs-1 .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
  }
  #home-sbs-1 .cs-content {
    text-align: left;
    width: auto;
    max-width: 46.125rem;
    margin: 0 1rem;
    margin-top: -5rem;
    /* 24px - 60px top and bottom */
    /* 24px - 60px left and right */
    padding: clamp(1.5rem, 5vw, 3.75rem);
    background-color: #f9f9f8;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    /* clips the pseudo element */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 10;
  }
  #home-sbs-1 .cs-text {
    margin-bottom: 1rem;
  }
  #home-sbs-1 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #home-sbs-1 .cs-button-transparent {
    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: var(--headerColor);
    border: 1px solid var(--headerColor);
    min-width: 11.25rem;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #home-sbs-1 .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #home-sbs-1 .cs-button-transparent:hover {
    color: var(--bodyTextColorWhite);
  }
  #home-sbs-1 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #home-sbs-1 .cs-button-transparent:hover .cs-button-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #home-sbs-1 .cs-button-transparent .cs-button-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #home-sbs-1 .cs-button-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
  }
  #home-sbs-1 .cs-button-play {
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    color: var(--headerColor);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
  }
  #home-sbs-1 .cs-wrapper {
    /* 46px - 56px */
    width: clamp(2.875rem, 5.5vw, 3.5rem);
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: -1;
  }
  #home-sbs-1 .cs-button-icon {
    width: 0.875rem;
    height: auto;
    display: block;
  }
  #home-sbs-1 .cs-picture {
    width: 100%;
    height: 23.75rem;
    /* clips the img corners */
    overflow: hidden;
    display: block;
    /* sends it to the top */
    order: -1;
    position: relative;
  }
  #home-sbs-1 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #home-sbs-1 .cs-floater {
    /* chnages on tablet */
    width: 12.5rem;
    height: auto;
    position: absolute;
    bottom: -1.25rem;
    right: 1.5rem;
    z-index: 10;
    /* transform: rotate(90deg); */
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #home-sbs-1 .cs-container {
    position: relative;
    align-items: flex-end;
    justify-content: center;
  }
  #home-sbs-1 .cs-content {
    width: 68%;
    margin: 0;
  }
  #home-sbs-1 .cs-button-play {
    padding-right: 1.5rem;
  }
  #home-sbs-1 .cs-button-play:before {
    content: "";
    /* 46px - 56px */
    width: clamp(2.875rem, 5.5vw, 3.5rem);
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    background: var(--primary);
    border-radius: 3.75rem;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -2;
    transition: width 0.3s;
  }
  #home-sbs-1 .cs-button-play:hover {
    color: var(--bodyTextColorWhite);
  }
  #home-sbs-1 .cs-button-play:hover:before {
    width: 100%;
  }
  #home-sbs-1 .cs-picture {
    /* 404px - 742px */
    width: clamp(25.25rem, 53vw, 46.375rem);
    height: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 3.75rem;
  }
  #home-sbs-1 .cs-floater {
    width: 30%;
    max-width: 18.875rem;
    bottom: 0;
    right: 0;
    transform: none;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #home-sbs-1 .cs-content {
    margin-bottom: 10.625rem;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #home-sbsr {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 4rem;
  }
  #home-sbsr .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 53.125rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    /* 48px - 108px */
    gap: clamp(3rem, 5vw, 6.75rem);
  }
  #home-sbsr .cs-content {
    margin-top: 7rem;
    /* 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;
    /* sends it to the bottom in the 2nd position */
    order: 2;
  }

  #home-sbsr .cs-title {
    max-width: 20ch;
  }
  #home-sbsr .cs-text {
    margin-bottom: 1rem;
  }
  #home-sbsr .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #home-sbsr .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: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #home-sbsr .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;
  }
  #home-sbsr .cs-button-solid:hover {
    color: #fff;
  }
  #home-sbsr .cs-button-solid:hover:before {
    width: 100%;
  }
  #home-sbsr .cs-picture {
    width: 100%;
    /* 456px - 598px */
    height: clamp(23.5rem, 46vw, 34.375rem);
    border-radius: 1.25rem;
    overflow: hidden;
    display: block;
    /* sends it to the bottom in the 2nd position */
    order: 2;
    position: relative;
    z-index: 1;
  }
  #home-sbsr .cs-picture:before {
    /* black overlay */
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #home-sbsr .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #home-sbsr .cs-background {
    width: 100%;
    height: 50%;
    background-color: #1a1a1a;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #home-sbsr .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #home-sbsr .cs-content {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 2rem;
  }
  #home-sbsr .cs-flex {
    width: 45%;
  }
  #home-sbsr .cs-title {
    margin: 0;
  }
  #home-sbsr .cs-text {
    width: 50%;
  }
  #home-sbsr .cs-button-solid {
    margin-right: auto;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #home-sbsr {
    /* moved padding back to the section container */
    padding: var(--sectionPadding);
    margin: 4rem;
  }
  #home-sbsr .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #home-sbsr .cs-content {
    width: 100%;
    max-width: 27.0625rem;
    margin: 0;
    flex-direction: column;
    row-gap: 0;
    order: 1;
  }
  #home-sbsr .cs-flex {
    width: 100%;
  }
  #home-sbsr .cs-title {
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #home-sbsr .cs-text {
    width: 100%;
  }
  #home-sbsr .cs-picture {
    max-width: 46.125rem;
  }
  #home-sbsr .cs-background {
    width: 60vw;
    height: 100%;
    /* 172px - 336px */
    margin-left: clamp(11.125rem, 30vw, 21rem);
    left: 50%;
    top: 0;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer {
    padding: var(--sectionPadding);
    padding-bottom: 3.125rem;
    background-color: var(--primary);
    position: relative;
    z-index: 1;
  }
  #footer .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #footer .cs-logo-wrapper {
    width: 100%;
  }
  #footer .cs-logo {
    width: 100%;
    max-width: 13.125rem;
    height: auto;
    margin-right: auto;
    display: block;
  }
  #footer .cs-logo img {
    width: 100%;
    height: auto;
  }
  #footer .cs-top {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* 64px - 100px */
    column-gap: clamp(4rem, 9vw, 6.25rem);
    row-gap: 2rem;
  }
  #footer .cs-ul {
    margin: 0;
    padding: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    flex: none;
  }
  #footer .cs-contact-ul {
    /* we remove the :before animated underline from the contact list and replace it with an underline.  The animated line doesn't work well on this section */
    width: 100%;
    max-width: 100%;
    gap: 0.75rem;
  }
  #footer .cs-contact-ul .cs-link:hover {
    text-decoration: underline;
  }
  #footer .cs-contact-ul .cs-link:before {
    display: none;
  }
  #footer .cs-li {
    list-style: none;
    margin: 0;
    display: block;
  }
  #footer .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    color: #fff;
    display: block;
  }
  #footer .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
  }
  #footer .cs-link:hover:before {
    width: 100%;
  }
  #footer .cs-link:before {
    /* on hover underline */
    content: "";
    width: 0%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  #footer .cs-block {
    display: block;
  }
  #footer .cs-icon {
    width: 1.5rem;
    height: auto;
    margin: -0.0625rem 0.75rem 0 0;
  }
  #footer .cs-middle {
    width: 100%;
    /* changes at tablet */
    max-width: 28.125rem;
    /* 60px - 100px */
    margin: clamp(3.75rem, 8vw, 6.25rem) 0 0 0;
    /* 24px - 40px */
    padding-bottom: clamp(1.25rem, 5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  #footer .cs-nav {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2.5rem;
    row-gap: 0.5rem;
  }
  #footer .cs-nav-li {
    list-style: none;
  }
  #footer .cs-nav-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #footer .cs-nav-link:hover:before {
    width: 100%;
  }
  #footer .cs-nav-link:before {
    /* on hover underline */
    content: "";
    width: 0%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  #footer .cs-social {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  #footer .cs-social-li {
    list-style: none;
  }
  #footer .cs-social-link {
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    border: 1px solid #f6e5db;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #footer .cs-social-link:hover {
    background-color: #f6e5db;
  }
  #footer .cs-social-link:hover .cs-default {
    display: none;
  }
  #footer .cs-social-link:hover .cs-hover {
    display: block;
  }
  #footer .cs-social-icon {
    width: 0.75rem;
    height: auto;
    display: block;
  }
  #footer .cs-hover {
    display: none;
  }
  #footer .cs-bottom {
    width: 100%;
    margin: 0;
    /* 24px - 40px, matches the cs-middle padding bottom */
    padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
    border-top: 1px solid rgba(186, 186, 186, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footer .cs-copyright {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: center;
    width: 70%;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #footer .cs-copyright-link {
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    margin: 0;
    color: inherit;
    display: inline-block;
  }
  #footer .cs-copyright-link:hover {
    text-decoration: underline;
  }
  #footer .cs-graphic {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* makes it act like a background image */
    object-fit: cover;
    position: absolute;
    z-index: -1;
  }
}

@media only screen and (max-width: 860px) {
  #footer .cs-logo img {
    width: 60%;
    height: auto;
  }
}
/* inbetween - 600px */
@media only screen and (min-width: 37.5rem) {
  #footer .cs-top {
    justify-content: flex-end;
  }
  #footer .cs-ul {
    width: auto;
  }
  #footer .cs-contact-ul {
    width: 15rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer .cs-top {
    flex-wrap: nowrap;
  }
  #footer .cs-logo-wrapper {
    width: auto;
    margin-right: auto;
  }
  #footer .cs-middle {
    max-width: 100%;
  }
}
/* Small Desktop 1024px */
@media only screen and (min-width: 64rem) {
  #footer .cs-middle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #about-hero {
    /* Centers button */
    text-align: left;
    /* 144px - 300px - leaving extra space for the navigation */
    padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
    /* 130px - 200px */
    padding-bottom: clamp(8.125rem, 12.5vw, 25rem);
    position: relative;
    z-index: 1;
  }
  #about-hero .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #about-hero .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #about-hero .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #about-hero .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    margin-top: 6rem;
  }
  #about-hero .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: left;
    max-width: 51.8125rem;
    /* 16px - 24px */
    margin: 0 auto clamp(1rem, 4vw, 1.5rem) 0;
    color: #fff;
    position: relative;
  }
  #about-hero .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: left;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 auto 0 0;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: #fff;
  }
  #about-hero .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    margin: auto;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #about-hero .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #about-hero .cs-button-solid:hover:before {
    width: 100%;
  }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #about-us-accordion {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
  }
  #about-us-accordion .cs-container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 39.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 108px */
    gap: clamp(3rem, 8vw, 6.75rem);
  }
  #about-us-accordion .cs-content {
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
  }
  #about-us-accordion .cs-title {
    margin: 0 0 2rem;
    /* 20 characters wide including spaces */
    max-width: 20ch;
  }
  #about-us-accordion .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
  }
  #about-us-accordion .cs-faq-item {
    list-style: none;
    width: 100%;
    /* 20px - 24px */
    padding: clamp(1.25rem, 2vw, 1.5rem) 0;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
    border-bottom: 1px solid #e8e8e8;
  }
  #about-us-accordion .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #about-us-accordion .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #about-us-accordion .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #about-us-accordion .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #about-us-accordion .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #about-us-accordion .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #about-us-accordion .cs-button:hover {
    cursor: pointer;
  }
  #about-us-accordion .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #about-us-accordion .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #about-us-accordion .cs-button-text {
    width: 90%;
    display: block;
    font-family: var(--headerFont);
  }
  #about-us-accordion .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #about-us-accordion .cs-picture {
    width: 100%;
    /* 300px - 498px */
    height: clamp(18.75rem, 65vw, 31.125rem);
    display: block;
    position: relative;
  }
  #about-us-accordion .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #about-us-accordion .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #about-us-accordion .cs-content {
    width: 45vw;
    /* prevents flexbox from squsihing it */
    flex: none;
    align-self: center;
  }
  #about-us-accordion .cs-picture {
    height: auto;
    min-height: 42.375rem;
    order: 1;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #catering-items {
    padding: var(--sectionPadding);
  }
  #catering-items .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(2.5rem, 4vw, 4rem);
  }
  #catering-items .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;
  }
  #catering-items .cs-title {
    max-width: none;
  }
  #catering-items .cs-text {
    max-width: 60ch;
  }
  #catering-items .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #catering-items .cs-item {
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    /* resets at tablet */
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 24px - 40px */
    gap: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    z-index: 1;
  }
  #catering-items .cs-item:last-of-type:before {
    display: none;
  }
  #catering-items .cs-item:before {
    /* gradient line divider */
    content: "";
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #bababa 50%,
      rgba(255, 255, 255, 0) 100%
    );
    opacity: 0.6;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
  }
  #catering-items .cs-item:first-of-type {
    padding-top: 0;
  }
  #catering-items .cs-item:last-of-type {
    padding-bottom: 0;
    border: none;
  }
  #catering-items .cs-image-group {
    position: relative;
  }
  #catering-items .cs-icon {
    width: 3rem;
    height: auto;
  }
  #catering-items .cs-h2 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #catering-items .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #catering-items .cs-container {
    max-width: 120rem;
  }
  #catering-items .cs-card-group {
    flex-direction: row;
    justify-content: center;
  }
  #catering-items .cs-item {
    /* 24px - 60px */
    padding: 0rem clamp(1.5rem, 3vw, 3.75rem);
  }
  #catering-items .cs-item:before {
    width: 1px;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      #bababa 50%,
      rgba(255, 255, 255, 0) 100%
    );
    left: auto;
    right: 0;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #catering-gallery {
    padding: var(--sectionPadding);
  }
  #catering-gallery .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #catering-gallery .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;
  }

  #catering-gallery .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, 1.6vw, 1.25rem);
  }
  #catering-gallery .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    border-radius: 0.5rem;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #catering-gallery .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: translateY(-0.4375rem);
  }
  #catering-gallery .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.1);
  }
  #catering-gallery .cs-item:hover .cs-h3 {
    color: var(--primaryLight);
  }
  #catering-gallery .cs-item:before {
    /* border, done in pseudo so it can sit under the picture */
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    border: 1px solid #e8e8e8;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    background: transparent;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #catering-gallery .cs-link {
    text-decoration: none;
    /* 16px - 24px */
    padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
    display: block;
  }
  #catering-gallery .cs-picture {
    width: 100%;
    height: 15rem;
    /* 16px - 24px */
    margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--primaryLight);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }
  #catering-gallery .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
  #catering-gallery .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    transition: color 0.3s;
  }
  #catering-gallery .cs-item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2.2vw, 1.5rem);
  }

  #catering-gallery .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    margin: auto;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #catering-gallery .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #catering-gallery .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #catering-gallery .cs-card-group {
    flex-direction: row;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #catering-contact {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #catering-contact .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3.25rem;
  }
  #catering-contact .cs-picture {
    width: 100%;
    max-width: 40.625rem;
    height: auto;
    /* reset at desktop */
    aspect-ratio: 1.00516351;
    position: relative;
  }
  #catering-contact .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.8rem;
  }
  #catering-contact .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #catering-contact .cs-text {
    margin: 0 0 2rem 0;
  }
  #catering-contact .cs-form {
    /* 24px - 48px top and bottom */
    /* 20px - 32px left and right */
    padding: clamp(1.25rem, 4.18vw, 3rem) clamp(1.25rem, 4.18vw, 2rem);
    background-color: #f7f8f8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #catering-contact .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;
  }
  #catering-contact .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    color: var(--headerColor);
    background-color: #fff;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #catering-contact .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #catering-contact .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #catering-contact .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: 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;
  }
  #catering-contact .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;
  }
  #catering-contact .cs-button-solid:hover {
    color: #fff;
  }
  #catering-contact .cs-button-solid:hover:before {
    width: 100%;
  }
  #catering-contact .cs-submit {
    min-width: 17.6875rem;
    border-radius: 0;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #catering-contact .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #catering-contact .cs-picture {
    height: 51.875rem;
    aspect-ratio: initial;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #main-contact {
    padding: clamp(2.75rem, 8.82vw, 3.25rem) 1rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #main-contact .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);
  }
  #main-contact .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;
  }
  #main-contact .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;
  }
  #main-contact .cs-title {
    margin: 0 0 1.5rem;
  }
  #main-contact .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;
  }
  #main-contact .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;
  }
  #main-contact .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;
  }
  #main-contact .cs-input::placeholder {
    color: var(--bodyTextColor);
  }
  #main-contact .cs-textarea {
    font-family: inherit;
    min-height: 7.5rem;
    padding-top: 1.5rem;
  }
  #main-contact .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;
  }
  #main-contact .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;
  }
  #main-contact .cs-button-solid:hover {
    color: #fff;
  }
  #main-contact .cs-button-solid:hover:before {
    width: 100%;
  }
  #main-contact .cs-submit {
    margin: 1rem 0 0;
    color: var(--bodyTextColorWhite);
    grid-column: span 12;
    justify-self: flex-start;
  }
  #main-contact .cs-submit:hover {
    cursor: pointer;
  }
  #main-contact .cs-info-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  #main-contact .cs-detail {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--bodyTextColor);
    display: block;
  }
  #main-contact .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%);
  }
  #main-contact .cs-iframe {
    width: 100%;
    height: 100%;
    display: block;
  }
  #main-contact .cs-graphic {
    width: 100%;
    min-width: 80rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
  }
  #main-contact .cs-top {
    top: 0;
  }
  #main-contact .cs-left {
    left: 4%;
    transform: rotate(270deg);
    transform-origin: left;
  }
  #main-contact .cs-bottom {
    bottom: 0;
    left: 0;
    transform: rotateX(180deg);
  }
  #main-contact .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #main-contact {
    /* using flex: 1 on both group elements to ensure they're both the same width */
  }
  #main-contact .cs-container {
    flex-direction: row;
    align-items: center;
  }
  #main-contact .cs-form-group {
    flex: 1;
  }
  #main-contact .cs-info-group {
    flex: 1;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #main-contact {
    margin: 5rem;
  }
  #main-contact .cs-container {
    width: 65%;
    max-width: 64rem;
    margin: 0 auto 0 0;
    padding: 2.5rem 1.5rem;
  }
  #main-contact .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;
  }
  #main-contact .cs-picture-group {
    margin-left: -12.75rem;
    left: 50%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #main-contact .cs-label:nth-of-type(2),
  #main-contact .cs-label:nth-of-type(3) {
    grid-column: span 6;
  }
}
/* Largest Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #main-contact {
    padding-top: 7vw;
    padding-bottom: 9vw;
  }
  #main-contact .cs-container {
    margin: 0 auto;
    transform: translateX(-22rem);
  }
}

#menu-images {
  padding: 3rem 1rem;
}

#menu-images .cs-button-solid {
  text-align: center;
  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: 9.375rem;
  padding: 0 1.5rem;
  background-color: var(--primary);
  border-radius: 0.25rem;
  overflow: hidden;
  display: inline-block;
  position: relative;
  z-index: 1;
  /* prevents padding from adding to the width */
  box-sizing: border-box;
  transition: color 0.3s;
}
#menu-images .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;
}
#menu-images .cs-button-solid:hover {
  color: #fff;
}
#menu-images .cs-button-solid:hover:before {
  width: 100%;
}

#menu-images .cs-menu-title {
  text-align: center;
  font-family: var(--headerFont);
  /* 39px - 61px - responsive font size */
  font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
  font-weight: 700;
  line-height: 1.2em;
  margin: 0 auto 2rem auto;
  color: var(--headerColor);
}

/* Mobile view adjustments */
@media only screen and (max-width: 48rem) {
  #menu-images .cs-menu-title {
    margin-bottom: 1.5rem;
  }
}

.cs-menu-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1150px;
  margin: 0 auto;
}

.cs-menu-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  #menu-images {
    padding: 2rem 1rem;
  }

  .cs-menu-grid {
    gap: 1.5rem;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #menu-sbs {
    background-color: var(--primary);
    margin-top: 5rem;
    border-radius: 1rem;
  }
  #menu-sbs .cs-container {
    background-image: url("../assets/banner/5.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #menu-sbs .cs-content {
    /* set text aling to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    /* moved section padding to the .cs-content so we can have the cs-picture be full width on mobile without the padding preventing it from doing so */
    padding: var(--sectionPadding);
    padding-top: 0;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #menu-sbs .cs-quote {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2em;
  }

  #menu-sbs .cs-topper,
  #menu-sbs .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #menu-sbs .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #menu-sbs .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #menu-sbs .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(--bodyTextColorWhite);
    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;
  }
  #menu-sbs .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;
  }
  #menu-sbs .cs-button-solid:hover {
    color: #fff;
  }
  #menu-sbs .cs-button-solid:hover:before {
    width: 100%;
  }
  #menu-sbs .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    height: 18.75rem;
    border-radius: 1rem;
  }
  #menu-sbs .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #menu-sbs {
    /* we use margin here instead of padding because we want to create the space OUTSIDE the section.  The overflow on the section clips the boxes we made to make the slanted designs, so we need to push from the outside of the section with margin to create space between it and the next section.  If the section above this Stitch has a white background, add margin-top: 0. If it has a white section below it, add margin-bottom: 0. This will allow more proper spacing and not have too much empty space.  If both sections above and below this Stitch have white backgrounds, you can just remove this margin all together */
    margin: var(--sectionPadding);
    margin-left: 0;
    margin-right: 0;
    padding: var(--sectionPadding);
    background-color: transparent;
    /* clips the red box from overflowing the section */
    overflow: hidden;
  }
  #menu-sbs .cs-container {
    flex-direction: row;
    position: relative;
    z-index: 1;
  }
  #menu-sbs .cs-container:before {
    /* red box */
    content: "";
    width: 100vw;
    margin-left: -38%;
    background-image: url("../assets/banner/5.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    display: block;
    position: absolute;
    top: -9.375rem;
    bottom: -9.375rem;
    left: 50%;
    z-index: -1;
  }
  #menu-sbs .cs-content {
    width: 51%;
    /* reset the padding, add the section padding back to the section container */
    padding: 0;
  }
  #menu-sbs .cs-picture {
    width: 47vw;
    max-width: 38.625rem;
    height: 33.5rem;
    /* 24px - 32px, added margin top and bottom to cs-picture so it pushes away by the same amount the yellow box element overlaps it top and bottom. This maintains consistent spacing top and bottom */
    margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2rem)
      clamp(1.5rem, 3vw, 2rem);
    position: relative;
  }
  #menu-sbs .cs-picture:before {
    /* yellow box */
    content: "";
    width: 50%;
    /* background: var(--secondary); */
    opacity: 1;
    display: block;
    position: absolute;
    /*24px - 32px, wrapped in calc function to multiple by negative 1 and get a negative clamp value */
    top: calc(clamp(1.5rem, 3vw, 2rem) * -1);
    bottom: calc(clamp(1.5rem, 3vw, 2rem) * -1);
    left: calc(clamp(1.5rem, 3vw, 2rem) * -1);
  }
}

/*********************************  privacy policy and terms of use styles *********************************/

.privacy-policy-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 1rem;
  margin: 2rem auto;
  max-width: 1200px;
}

.privacy-header-image {
  border-radius: 2rem;
}

.header__image .privacy__image {
  border-radius: 2rem;
  border: 2px solid #ffe8e8;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.privacy-main-desc {
  text-align: justify;
  font-weight: 100;
  color: #666666;
}

.privacy-content-lists {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.privacy-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.privacy-title {
  font-size: 2rem;
  font-weight: 600;
}

.privacy-desc {
  text-align: justify;
  font-weight: 400;
  color: #5a5a5a;
}

@media screen and (max-width: 768px) {
  .privacy-policy-content {
    padding: 1rem 2rem 4rem 2rem;
  }

  .privacy-title {
    font-size: 1.2rem;
  }

  .header__terms {
    padding: 5.5rem 1rem 1rem 1rem;
  }
}

/****************************  privacy policy and terms of use styles ******************************/

/****************************  announcement modal styles ******************************/

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal-content {
  background-color: var(--primary);
  margin: 22% auto;
  padding: 2rem;
  width: 90%;
  max-width: 500px;
  border-radius: 15px;
  position: relative;
  animation: modalSlideDown 0.3s ease-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-text {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.modal-text h2 {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-family: var(--headerFont);
}

.modal-text p {
  color: #e8e8e8;
  font-size: 1.1rem;
}

.close-button {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}

.close-button:hover {
  color: #333;
}

@media screen and (max-width: 768px) {
  .modal-content {
    margin-top: 50%;
  }
}

@keyframes modalSlideDown {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}