: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: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --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;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}

.pg-top {
    padding-top: 3em;
}

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

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

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

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    body.cs-open {
      overflow: hidden;
    }
    body.scroll #cs-navigation {
      width: 100%;
      max-width: 100%;
      top: 0;
    }
    body.scroll #cs-navigation:before {
      border-radius: 0;
    }
    body.scroll #cs-navigation .cs-ul-wrapper {
      border-radius: 0 0 0 1.5rem;
      top: 100%;
    }
    #cs-navigation {
      width: 94%;
      max-width: 80rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      /* 12px - 24px */
      padding: clamp(0.75rem, 2vw, 1.5rem);
      /* 12px - 24px */
      border-radius: clamp(0.75rem, 2vw, 1.5rem);
      position: fixed;
      top: 2rem;
      left: 50%;
      z-index: 10000;
      transform: translateX(-50%);
      transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
    }
    #cs-navigation:before {
      /* background color */
      content: "";
      width: 100%;
      height: 100%;
      background: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      opacity: 1;
      /* 12px - 24px */
      border-radius: clamp(0.75rem, 2vw, 1.5rem);
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: transform 0.2s, border-radius 0.3s ease-in-out;
    }
    #cs-navigation.cs-active .cs-toggle {
      transform: rotate(180deg);
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
      width: 60%;
      top: 85%;
      overflow: auto;
      transform: scaleY(1);
    }
    #cs-navigation.cs-active .cs-li {
      opacity: 1;
      overflow: visible;
      transform: translateX(0);
    }
    #cs-navigation .cs-container {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-logo {
      width: auto;
      max-width: 12.5rem;
      height: 100%;
      margin: 0 auto 0 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      z-index: 10;
    }
    #cs-navigation .cs-logo img {
      width: 100%;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
    }
    #cs-navigation .cs-toggle {
      width: 3.5rem;
      height: 3.5rem;
      margin: 0 0 0 auto;
      background-color: #1a1a1a;
      border: none;
      border-radius: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 10;
      transition: transform 0.6s;
    }
    #cs-navigation .cs-nav {
      /* sends it to the right in the 3rd position */
      order: 3;
    }
    #cs-navigation .cs-contact-group {
      display: none;
      position: relative;
      z-index: 1;
    }
    #cs-navigation .cs-phone {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      transition: opacity 0.3s, color 0.3s;
    }
    #cs-navigation .cs-phone-icon {
      width: 1.5rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-social {
      display: none;
    }
    #cs-navigation .cs-active .cs-line1 {
      top: 50%;
      transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
      top: 50%;
      transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
      transform-origin: center;
    }
    #cs-navigation .cs-active .cs-line3 {
      opacity: 0;
      bottom: 100%;
    }
    #cs-navigation .cs-box {
      /* 24px - 28px */
      width: clamp(1.5rem, 2vw, 1.75rem);
      height: 1rem;
      position: relative;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      background-color: #fafbfc;
      border-radius: 2px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
      top: 0;
      transition: transform 0.5s, top 0.3s, left 0.3s;
      animation-duration: 0.7s;
      animation-timing-function: ease;
      animation-direction: normal;
      animation-fill-mode: forwards;
      transform-origin: center;
    }
    #cs-navigation .cs-line2 {
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      transition: top 0.3s, left 0.3s, transform 0.5s;
      animation-duration: 0.7s;
      animation-timing-function: ease;
      animation-direction: normal;
      animation-fill-mode: forwards;
    }
    #cs-navigation .cs-line3 {
      bottom: 0;
      transition: bottom 0.3s, opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
      width: 20%;
      height: auto;
      max-height: 70vh;
      background-color: #fff;
      border-radius: 0 0 1.5rem 1.5rem;
      position: absolute;
      top: 20%;
      right: 0;
      left: auto;
      z-index: -1;
      overflow: hidden;
      transform: scaleY(0);
      transition: transform 0.3s, width 0.5s, top 0.3s;
      transition-delay: width 0.3s;
      transform-origin: top right;
    }
    #cs-navigation .cs-ul {
      width: auto;
      min-width: 40%;
      height: auto;
      margin: 0;
      /* 32px - 40px */
      padding: 4rem clamp(2rem, 3vw, 2.5rem) 4rem 2rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 1.25rem;
      overflow: hidden;
    }
    #cs-navigation .cs-li {
      text-align: right;
      list-style: none;
      width: 100%;
      margin-right: 0;
      opacity: 0;
      /* transition from these values */
      transform: translateX(-2.5rem);
      transition: transform 0.6s, opacity 0.9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
      transition-delay: 0.05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
      transition-delay: 0.1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
      transition-delay: 0.15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
      transition-delay: 0.2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
      transition-delay: 0.25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
      transition-delay: 0.3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
      transition-delay: 0.35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
      transition-delay: 0.4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
      transition-delay: 0.45s;
    }
    #cs-navigation .cs-li-link {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: inline-block;
      position: relative;
    }
    #cs-navigation .cs-li-link:before {
      /* active state underline */
      content: "";
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: 1;
      display: none;
      position: absolute;
      bottom: -0.125rem;
      left: 0;
    }
    #cs-navigation .cs-li-link.cs-active:before {
      display: block;
    }
    #cs-navigation .cs-button-solid {
      display: none;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #cs-navigation .cs-contact-group {
      display: block;
    }
  }
  /*-- -------------------------- -->
  <---     Navigation Dropdown    -->
  <--- -------------------------- -*/
  /* Mobile - 1023px */
  @media only screen and (max-width: 63.9375rem) {
    #cs-navigation .cs-dropdown {
      color: var(--bodyTextColorWhite);
      position: relative;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
      height: auto;
      margin: 0.75rem 0 0 auto;
      padding: 1.5rem;
      opacity: 1;
      visibility: visible;
      transform: scale(1);
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
      opacity: 1;
    }
    #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%);
    }
    #cs-navigation .cs-drop-ul {
      width: 100%;
      max-width: 15.625rem;
      height: 0;
      margin: 0 0 0 auto;
      box-sizing: border-box;
      padding: 0 1.5rem 0 1.5rem;
      background-color: var(--primary);
      opacity: 0;
      border-radius: 1rem;
      display: flex;
      visibility: hidden;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 0.75rem;
      overflow: hidden;
      transform: scale(0);
      transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, transform 0.3s, visibility 0.3s;
      transform-origin: top right;
    }
    #cs-navigation .cs-drop-li {
      text-align: inherit;
      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 {
      opacity: 1;
      visibility: visible;
      transform: scaleY(1);
    }
    #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: #fff;
      box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
      opacity: 0;
      border-bottom: 5px solid var(--primary);
      border-radius: 0 0 1.5rem 1.5rem;
      visibility: hidden;
      /* 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;
      overflow: hidden;
      transform: scaleY(0);
      transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
      transform-origin: top;
    }
    #cs-navigation .cs-drop-li {
      font-size: 1rem;
      text-decoration: none;
      list-style: none;
      width: 100%;
      height: auto;
      opacity: 0;
      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.cs-drop-link {
      font-size: 1rem;
      line-height: 1.5em;
      text-transform: capitalize;
      text-decoration: none;
      white-space: nowrap;
      width: 100%;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      padding: 0.75rem;
      color: var(--headerColor);
      display: block;
      transition: color 0.3s, background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--bodyTextColorWhite);
      background-color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    body.scroll #cs-navigation {
      width: 100%;
      max-width: 100%;
      border-radius: 0;
      top: 0;
    }
    #cs-navigation {
      width: 94%;
      max-width: 90rem;
      height: 6rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      /* 12px - 24px */
      padding: clamp(0.75rem, 2vw, 1.5rem) 0;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      /* 12px - 24px */
      border-radius: clamp(0.75rem, 2vw, 1.5rem);
      display: flex;
      align-items: center;
      position: fixed;
      top: 2rem;
      left: 50%;
      z-index: 10000;
      transform: translateX(-50%);
      transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 90rem;
      margin: auto;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      width: 18.4%;
      max-width: 21.875rem;
      height: 2rem;
      /* margin-right auto pushes everything away from it to the right */
      margin: 0 auto 0 0;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      z-index: 100;
    }
    #cs-navigation .cs-logo img {
      width: 100%;
      height: auto;
      max-height: 200%;
      /* 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;
      overflow: hidden;
    }
    #cs-navigation .cs-contact-group {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-phone {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      transition: opacity 0.3s, color 0.3s;
    }
    #cs-navigation .cs-phone-icon {
      width: 1.5rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-social {
      height: 2rem;
      opacity: 1;
      display: none;
      visibility: visible;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      transition: opacity 0.3s, visibility 0.3s, height 0.3s;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      width: 2rem;
      height: 2rem;
      background-color: #f7f7f7;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
    }
    #cs-navigation .cs-social-link:hover {
      background-color: var(--primary);
    }
    #cs-navigation .cs-social-link:hover .cs-social-icon {
      opacity: 1;
      filter: grayscale(1) brightness(10000%);
    }
    #cs-navigation .cs-social-icon {
      width: 0.75rem;
      height: auto;
      opacity: 0.6;
      display: block;
      transition: opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      /* absolutely positioned to be dead center */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    #cs-navigation .cs-ul {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      /* 20px - 36px */
      gap: clamp(1.25rem, 2.6vw, 2.25rem);
    }
    #cs-navigation .cs-li {
      list-style: none;
      height: 100%;
      padding: 0;
      display: flex;
      align-items: center;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: block;
      position: relative;
      transition: color 0.3s;
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active {
      color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 2rem;
      color: #fff;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
    }
    #cs-navigation .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #fff;
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid:hover {
      color: #1a1a1a;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
  }
  /* Large Desktop - 1300px */
  @media only screen and (min-width: 81.25rem) {
    #cs-navigation .cs-social {
      display: flex;
    }
  }
 
  /*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1946 {
      padding: var(--sectionPadding);
      /* 160px - 200px */
      padding-top: clamp(10rem, 20vw, 12.5rem);
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #hero-1946 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    #hero-1946 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      /* 40px - 52px */
      margin-bottom: clamp(2.5rem, 5vw, 3.25rem);
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
      position: relative;
      z-index: 1;
    }
    #hero-1946 .cs-flex {
      /* prevents flexbox from squishing it */
      flex: none;
    }
    #hero-1946 .cs-title {
      /* 39px - 61px */
      font-size: clamp(2.438rem, 5vw, 3.813rem);
    }
    #hero-1946 .cs-text {
      margin-bottom: 1.25rem;
    }
    #hero-1946 .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      /* 32px - 48px */
      padding: 0 clamp(2rem, 4vw, 3rem);
      background-color: var(--primary);
      color: var(--bodyTextColorWhite);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
      transition: background-color 0.3s;
    }
    #hero-1946 .cs-button-solid:hover {
      background-color: #000;
      color: #fff;
    }
    #hero-1946 .cs-picture {
      width: 100%;
      /* 280px - 510px */
      height: clamp(17.5rem, 58.6vw, 31.875rem);
      /* 16px - 20px */
      margin-bottom: clamp(1rem, 2vw, 1.25rem);
      display: block;
      position: relative;
    }
    #hero-1946 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 2.5rem;
      position: absolute;
    }
    #hero-1946 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      justify-content: center;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 2vw, 1.25rem);
    }
    #hero-1946 .cs-item {
      text-align: center;
      list-style: none;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
      /* 24px - 32px */
      padding: clamp(1.5rem, 3vw, 2rem);
      background-color: #F7F7F7;
      border-radius: 1.25rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      grid-column: span 12;
      position: relative;
      z-index: 1;
      transition: border-color 0.3s;
    }
    #hero-1946 .cs-item:hover {
      border-color: var(--primary);
    }
    #hero-1946 .cs-item:hover .cs-h3 {
      color: var(--primary);
    }
    #hero-1946 .cs-item:hover .cs-icon {
      transform: rotateY(360deg);
    }
    #hero-1946 .cs-icon-picture {
      margin-bottom: 1.25rem;
      perspective: 700px;
      transform-style: preserve-3d;
    }
    #hero-1946 .cs-icon {
      width: 2.5rem;
      height: auto;
      display: block;
      transition: transform 0.5s;
    }
    #hero-1946 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.5em;
      text-align: inherit;
      margin: 0;
      margin-bottom: 0.75rem;
      color: var(--headerColor);
      transition: color 0.3s;
    }
    #hero-1946 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0;
      color: var(--bodyTextColor);
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #hero-1946 .cs-text {
      font-size: 1.25rem;
    }
    #hero-1946 .cs-item {
      text-align: left;
      margin: 0;
      align-items: flex-start;
      grid-column: span 6;
    }
  }
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #hero-1946 .cs-content {
      display: flex;
      flex-direction: column;
    }
    #hero-1946 .cs-title {
      max-width: 46.875rem;
    }
    #hero-1946 .cs-item {
      grid-column: span 3;
    }
  }
  /* Large Desktop 1300px */
  @media only screen and (min-width: 81.25rem) {
    #hero-1946 .cs-title {
      margin: 0;
    }
    #hero-1946 .cs-container {
      flex-direction: column;
    }
    #hero-1946 .cs-content {
      text-align: left;
      max-width: 80rem;
      gap: 1.25rem;
      flex-direction: row;
      align-items: flex-start;
    }
    #hero-1946 .cs-flex {
      width: 50%;
      max-width: 39.375rem;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #hero-1946 {
      background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #hero-1946 .cs-title,
    body.dark-mode #hero-1946 .cs-text,
    body.dark-mode #hero-1946 .cs-h3,
    body.dark-mode #hero-1946 .cs-item-text {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #hero-1946 .cs-text,
    body.dark-mode #hero-1946 .cs-item-text {
      opacity: 0.8;
    }
    body.dark-mode #hero-1946 .cs-item {
      background-color: var(--medium);
    }
    body.dark-mode #hero-1946 .cs-icon {
      filter: invert(1) brightness(1000%);
    }
  }
/*-- -------------------------- -->
<---         Collection 1552    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #collection-1552 {
      padding: var(--sectionPadding);
    }
    #collection-1552 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #collection-1552 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    }
    #collection-1552 .cs-item {
      max-width: 100%;
      height: 43vw;
      /* removed at tablet */
      max-height: 15.625rem;
      /* 56px - 84px */
      padding: clamp(3.5rem, 7vw, 5.25rem) 1.5rem;
      box-sizing: border-box;
      display: flex;
      grid-column: span 12;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    #collection-1552 .cs-item:hover .cs-background img {
      opacity: .5;
      transform: scale(1.4);
    }
    #collection-1552 .cs-item-offer {
      max-height: 100%;
      height: auto;
      /* 40px - 80px top & bottom, 24px - 40px sides*/
      padding: clamp(2.5rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
      align-items: flex-end;
    }
    #collection-1552 .cs-item-offer:hover .cs-background img {
      opacity: 1;
      transform: scale(1);
    }
    #collection-1552 .cs-offer-tag {
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1.2em;
      text-transform: uppercase;
      width: fit-content;
      margin-bottom: 0.5rem;
      padding: 0.25rem 0.5rem;
      color: #f7f7f7;
      background-color: var(--secondary);
      display: block;
    }
    #collection-1552 .cs-text-wrapper {
      /* 150px - 265px */
      max-width: clamp(9.375rem, 20vw, 16.5625rem);
    }
    #collection-1552 .cs-h3 {
      font-size: var(--headerFontSize);
      font-weight: 300;
      line-height: 1.2em;
      max-width: 20ch;
      margin: 0 0 0.25rem;
      color: var(--headerColor);
    }
    #collection-1552 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      color: var(--bodyTextColor);
      display: block;
    }
    #collection-1552 .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 1rem 0 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      color: #fff;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #collection-1552 .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;
    }
    #collection-1552 .cs-button-solid:hover:before {
      width: 100%;
    }
    #collection-1552 .cs-background {
      width: 100%;
      height: 100%;
      background-color: #000;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      /* set to -2 so the gradient overlay (z-index: -1) appears in front of the images, but behind the text */
      z-index: -2;
    }
    #collection-1552 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity .3s, transform .6s;
    }
    #collection-1552 .cs-category {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2em;
      text-align: center;
      text-decoration: none;
      width: fit-content;
      /* 12px - 20px top & bottom, 16px - 24px sides*/
      padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
      color: var(--bodyTextColorWhite);
      position: relative;
      transition: background-color 0.3s, color 0.3s;
      /* blurred background - done as a pseudo element so backdrop-filter won't distort the text */
    }
    #collection-1552 .cs-category:hover {
      background-color: #ffffff;
      color: var(--headerColor);
    }
    #collection-1552 .cs-category::before {
      content: "";
      width: 100%;
      height: 100%;
      backdrop-filter: blur(8px);
      --webkit-backdrop-filter: blur(8px);
      background-color: rgba(255, 255, 255, 0.2);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #collection-1552 .cs-container {
      max-width: 80rem;
    }
    #collection-1552 .cs-item {
      /* 188px - 348px */
      min-height: clamp(11.75rem, 27vw, 21.75rem);
      grid-column: span 3;
    }
    #collection-1552 .cs-item-offer {
      grid-column: span 6;
      grid-row: span 2;
    }
  }
                                  

  /*-- -------------------------- -->
<---         Collection         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #collection-1577 {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
    }
    #collection-1577 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #collection-1577 .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;
    }
    #collection-1577 .cs-title {
      margin: 0;
    }
    #collection-1577 .cs-topper {
      color: var(--secondary);
    }
    #collection-1577 .cs-card-group {
      list-style: none;
      width: 100%;
      /* changes to 1280px on tablet */
      max-width: 34.375rem;
      margin: auto;
      padding: 0;
      display: grid;
      grid-template-rows: repeat(12, 1fr);
      grid-auto-flow: row;
    }
    #collection-1577 .cs-item {
      max-width: 100%;
      grid-column: span 12;
      position: relative;
    }
    #collection-1577 .cs-item:hover .cs-background img {
      opacity: .5;
      transform: scale(1.4);
    }
    #collection-1577 .cs-link {
      text-decoration: none;
      /* changes at tablet */
      height: 60vw;
      max-height: 21.75rem;
      padding: 2.5rem 1.5rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #collection-1577 .cs-background {
      width: 100%;
      height: 100%;
      background-color: #000;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      /* set to -2 so the gradient overlay (z-index: -1) appears in front of the images, but behind the text */
      z-index: -2;
    }
    #collection-1577 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s, opacity .3s;
    }
    #collection-1577 .cs-category {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2em;
      text-align: center;
      text-decoration: none;
      width: fit-content;
      /* 12px - 20px top & bottom, 16px - 24px sides*/
      padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
      color: var(--main-white, #ffffff);
      position: relative;
      transition: color .3s;
      /* blurred background - done as a pseudo element so backdrop-filter won't distort the text */
    }
    #collection-1577 .cs-category:hover {
      color: var(--headerColor);
    }
    #collection-1577 .cs-category:hover:before {
      background-color: #ffffff;
    }
    #collection-1577 .cs-category:before {
      content: "";
      width: 100%;
      height: 100%;
      backdrop-filter: blur(8px);
      --webkit-backdrop-filter: blur(8px);
      background-color: rgba(255, 255, 255, 0.2);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: background-color 0.3s;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #collection-1577 .cs-card-group {
      max-width: 80rem;
      grid-template-columns: repeat(12, 1fr);
    }
    #collection-1577 .cs-item {
      /* 180px - 348px */
      height: clamp(11.75rem, 25vw, 21.75rem);
      grid-column: span 3;
    }
  }
                                  
                                  
  /*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-1088 {
      padding: var(--sectionPadding);
      background-color: #f7f7f7;
    }
    #reviews-1088 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #reviews-1088 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 39.375rem;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
    }
    #reviews-1088 .cs-title {
      max-width: 25ch;
      margin: 0;
    }
    #reviews-1088 .cs-card-group {
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      align-items: stretch;
      /* 16px - 20px */
      gap: clamp(1rem, 2vw, 1.25rem);
    }
    #reviews-1088 .cs-item {
      list-style: none;
      padding: 0;
      /* 46px - 56px, pushes up by the same amount the cs-image margin-top pulld it up for proper spacing */
      margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      grid-column: span 12;
      position: relative;
    }
    #reviews-1088 .cs-item:hover .cs-flex {
      background-color: var(--primary);
    }
    #reviews-1088 .cs-icon {
      width: 3.25rem;
      height: auto;
      display: block;
      position: absolute;
      /* 24px - 36px, same values as the padding on cs-item-text */
      top: clamp(1.5rem, 3vw, 2.25rem);
      right: clamp(1.5rem, 3vw, 2.25rem);
    }
    #reviews-1088 .cs-image {
      /* 80px - 112px */
      width: clamp(5rem, 10vw, 7rem);
      height: auto;
      /* 40px - 56px, same growth rate as the cs-image */
      /* 24px - 36px marign left, same value as the padding on cs-item-text */
      margin: calc(clamp(2.5rem, 5vw, 3.5rem)*-1) 0 2.25rem clamp(1.25rem, 3vw, 2.25rem);
      border-radius: 50%;
      display: block;
    }
    #reviews-1088 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: left;
      margin: 0;
      /* 24px - 36px */
      padding: 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      color: var(--bodyTextColor);
    }
    #reviews-1088 .cs-flex {
      text-align: center;
      padding: 1.5rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      width: 100%;
      /* pushes up against the cs-item-text so if there's a different amount of content from the other cards, it will push down and stretch the card to fill the container vertically. This makes all the cards the same height no matter how much content each one has */
      margin-top: auto;
      background-color: #1a1a1a;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      transition: background-color 0.3s;
    }
    #reviews-1088 .cs-name {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.2em;
      text-align: inherit;
      margin: 0;
      font-weight: 700;
      padding: 0;
      color: var(--bodyTextColorWhite);
    }
    #reviews-1088 .cs-desc {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2.5vw, 1rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColorWhite);
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #reviews-1088 .cs-container {
      max-width: 80rem;
    }
    #reviews-1088 .cs-item {
      grid-column: span 4;
    }
  }
/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-footer-269 {
        /* 60px - 100px top and bottom */
        padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
        background-color: #1a1a1a;
        /* Navigation Links */
        /* Contact Links */
    }
    #cs-footer-269 .cs-container {
        width: 100%;
        /* reset on tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        /* 68px - 100px */
        column-gap: clamp(4.25rem, calc(10%), 6.25rem);
    }
    #cs-footer-269 .cs-logo-group {
        /* takes up all the space, lets the other ul's wrap below it */
        width: 100%;
        position: relative;
    }
    #cs-footer-269 .cs-logo {
        /* 210px - 240px */
        width: clamp(13.125rem, 8vw, 15rem);
        height: auto;
        display: block;
        /* 28px - 44px */
        margin-bottom: clamp(1.75rem, 4.17vw, 2.75rem);
    }
    #cs-footer-269 .cs-logo-img {
        width: 100%;
        height: auto;
    }
    #cs-footer-269 .cs-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 2.5vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        margin-bottom: 2rem;
        /* changes to 305px at desktop */
        max-width: 33.75rem;
        color: var(--bodyTextColorWhite);
    }
    #cs-footer-269 .cs-nav {
        padding: 0;
        margin: 0;
    }
    #cs-footer-269 .cs-nav-li {
        list-style: none;
        line-height: 1.5em;
        margin-bottom: 0.5rem;
    }
    #cs-footer-269 .cs-nav-li:last-of-type {
        margin-bottom: 0;
    }
    #cs-footer-269 .cs-header {
        font-size: 1rem;
        line-height: 1.5em;
        font-weight: 700;
        margin-bottom: 0.875rem;
        color: var(--bodyTextColorWhite);
        position: relative;
        display: block;
    }
    #cs-footer-269 .cs-nav-link {
        font-size: 1rem;
        text-decoration: none;
        line-height: 1.5em;
        color: var(--bodyTextColorWhite);
        position: relative;
    }
    #cs-footer-269 .cs-nav-link:before {
        /* underline */
        content: "";
        width: 0%;
        height: 0.125rem;
        /* current color of the parent */
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.125rem;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-269 .cs-nav-link:hover:before {
        width: 100%;
    }
    #cs-footer-269 .cs-contact {
        margin: 0;
        padding: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        align-self: stretch;
    }
    #cs-footer-269 .cs-contact-li {
        list-style: none;
        margin-bottom: 0rem;
    }
    #cs-footer-269 .cs-contact-li:last-of-type {
        margin-bottom: 0;
    }
    #cs-footer-269 .cs-contact-link {
        font-size: 1rem;
        text-decoration: none;
        line-height: 1.5em;
        text-align: left;
        color: var(--bodyTextColorWhite);
        display: inline-block;
    }
    #cs-footer-269 .cs-contact-link:hover {
        text-decoration: underline;
    }
    #cs-footer-269 .cs-address {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
    #cs-footer-269 .cs-social-group {
        /* pushes away from the other flex items */
        margin-top: auto;
        margin-left: auto;
    }
    #cs-footer-269 .cs-social {
        display: inline-flex;
        justify-content: flex-start;
        gap: 0.75rem;
    }
    #cs-footer-269 .cs-social-link {
        width: 1.5rem;
        height: 1.5rem;
        background-color: #4e4b66;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        transition:
            transform 0.3s,
            background-color 0.3s;
    }
    #cs-footer-269 .cs-social-link:hover {
        background-color: var(--primary);
        transform: translateY(-0.1875rem);
    }
    #cs-footer-269 .cs-social-img {
        height: 0.8125rem;
        width: auto;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-footer-269 .cs-container {
        max-width: 80rem;
        row-gap: 0;
    }
    #cs-footer-269 .cs-logo-group {
        width: auto;
        /* pushes everything to the right of it as far as possible in a flexbox */
        margin-right: auto;
    }
    #cs-footer-269 .cs-text {
        width: 80%;
        max-width: 19.0625rem;
        margin: 0;
    }
    #cs-footer-269 .cs-nav,
    #cs-footer-269 .cs-contact {
        /* 8px - 12px */
        margin-top: clamp(0.5rem, 1.2vw, 0.75rem);
    }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-contact-242 {
        padding: var(--sectionPadding);
    }
    #cs-contact-242 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #cs-contact-242 .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;
    }
    #cs-contact-242 .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-contact-242 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        max-width: 32.625rem;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #cs-contact-242 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 32.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #cs-contact-242 #cs-form-242 {
        width: 100%;
        /* 32px - 40px */
        margin-bottom: clamp(2rem, 5.3vw, 2.5rem);
        /* 20px - 40px */
        padding: clamp(1.25rem, 4.5vw, 2.5rem);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        border: 1px solid #dad9e3;
        border-radius: 1rem;
    }
    #cs-contact-242 .cs-label {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.3vw, 1rem);
        line-height: 1.5em;
        font-weight: 700;
        /* 16px - 20px */
        margin-bottom: clamp(1rem, 1em, 1.25rem);
        color: var(--headerColor);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    #cs-contact-242 .cs-label-message {
        /* 32px - 40px */
        margin-bottom: clamp(2rem, 4.5vw, 2.5rem);
    }
    #cs-contact-242 .cs-input,
    #cs-contact-242 .cs-textarea {
        font-size: 1rem;
        width: 100%;
        height: 4rem;
        margin-top: 0.25rem;
        padding-left: 1.25rem;
        /* set transparent border so on hover border doesn't make it glitch */
        border: 1px solid transparent;
        border-bottom: 1px solid #b4b2c7;
        /* prevents border & padding from affecting height */
        box-sizing: border-box;
        transition: border 0.3s;
    }
    #cs-contact-242 .cs-input:hover,
    #cs-contact-242 .cs-textarea:hover {
        border: 1px solid var(--primary);
    }
    #cs-contact-242 .cs-input::placeholder,
    #cs-contact-242 .cs-textarea::placeholder {
        color: #7d799c;
    }
    #cs-contact-242 .cs-textarea {
        font-family: inherit;
        margin: 0;
        padding-top: 1.25rem;
        min-height: 7.5rem;
    }
    #cs-contact-242 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #cs-contact-242 .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;
    }
    #cs-contact-242 .cs-button-solid:hover:before {
        width: 100%;
    }
    #cs-contact-242 .cs-submit {
        width: 100%;
        border: none;
        border-radius: 0.5rem;
    }
    #cs-contact-242 .cs-submit:hover {
        cursor: pointer;
    }
    #cs-contact-242 .cs-right-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        /* 28px - 40px */
        gap: clamp(1.75rem, 4vw, 2.5rem);
        position: relative;
    }
    #cs-contact-242 .cs-ul {
        padding: 0;
        /* 16px - 32px */
        padding-left: clamp(1rem, 3vw, 2rem);
        margin: 0;
        width: 100%;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    #cs-contact-242 .cs-li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #cs-contact-242 .cs-li:hover .cs-icon-wrapper {
        transform: scale(1.2);
    }
    #cs-contact-242 .cs-li:nth-of-type(2) {
        padding-bottom: 1.25rem;
        border-bottom: 1px solid #dad9e3;
    }
    #cs-contact-242 .cs-header {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.5rem;
        color: var(--headerColor);
        display: block;
    }
    #cs-contact-242 .cs-link {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.2em;
        text-decoration: none;
        color: var(--bodyTextColor);
        position: relative;
    }
    #cs-contact-242 .cs-link:hover:before {
        width: 100%;
    }
    #cs-contact-242 .cs-link:before {
        /* top right box */
        content: "";
        width: 0%;
        height: 2px;
        /* current color of parent */
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: width 0.3s;
    }
    #cs-contact-242 .cs-block {
        /* drop the address to two lines */
        display: block;
    }
    #cs-contact-242 .cs-icon-wrapper {
        /* 32px - 36px */
        margin-right: clamp(2rem, 2.5vw, 2.25rem);
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        transition: transform 0.3s;
    }
    #cs-contact-242 .cs-icon {
        /* 32px -36px */
        width: clamp(2rem, 3vw, 2.25rem);
        height: auto;
        display: block;
    }
    #cs-contact-242 .cs-picture {
        width: 100%;
        border-radius: clamp(1rem, 1.5vw, 1.25rem);
        /* clips image corners */
        overflow: hidden;
        display: block;
        position: relative;
        /* width divided height */
        aspect-ratio: 1.44;
    }
    #cs-contact-242 .cs-img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
    #cs-contact-242 #cs-form-242 {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #cs-contact-242 .cs-label {
        width: 48%;
    }
    #cs-contact-242 .cs-label-message {
        width: 100%;
    }
    #cs-contact-242 .cs-button-solid {
        margin-left: 0;
    }
    #cs-contact-242 .cs-right-section {
        flex-direction: row;
        align-items: center;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-contact-242 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        column-gap: 1.25em;
        row-gap: 4rem;
    }
    #cs-contact-242 #cs-form-242 {
        width: 50%;
        max-width: 40.625rem;
    }
    #cs-contact-242 .cs-label {
        width: 100%;
    }
    #cs-contact-242 .cs-right-section {
        width: 45%;
        max-width: 33.875rem;
        /* prevents flexbox from squishing it */
        flex: none;
        flex-direction: column;
    }
    #cs-contact-242 .cs-block {
        /* sets address stay in one line */
        display: inline-block;
    }
    #cs-contact-242 .cs-picture {
        width: 100%;
        max-width: 100%;
        height: 27.375rem;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1716 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #gallery-1716 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-1716 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #gallery-1716 .cs-text {
    margin-bottom: 1rem;
  }
  #gallery-1716 .cs-text:last-of-type {
    /* 32px - 64px */
    margin-bottom: clamp(2rem, 7vw, 4rem);
  }
  #gallery-1716 .cs-text:last-of-type:before {
    /* colored overlay rectangle - positioned absolute to the section tag because it is the nearest parent with a decalred position relative */
    content: '';
    width: 100%;
    height: 80%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #gallery-1716 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #gallery-1716 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #gallery-1716 .cs-button-solid:hover:before {
    width: 100%;
  }
  #gallery-1716 .cs-gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* sends it to the top in the 1st position */
    order: -1;
  }
  #gallery-1716 .cs-picture {
    width: 100%;
    /* changes at tablet */
    height: 100vw;
    max-height: 25rem;
    display: block;
    position: relative;
    z-index: 1;
    grid-column: span 4;
  }
  #gallery-1716 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-1716 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #gallery-1716 .cs-content {
    max-width: 19rem;
    /* 32px - 64px, ensures theres always a gap at the bottom to space out the content from the bottom of the container and let the colored rectangle shape be a little bigger and take up more space */
    padding-bottom: clamp(2rem, 7vw, 4rem);
  }
  #gallery-1716 .cs-text:last-of-type {
    /* add position relative so the colored rectangle is now absolutely positioned to the cs-text parent. We also only want these styles on the last paragraph tag */
    position: relative;
    z-index: 1;
  }
  #gallery-1716 .cs-text:last-of-type:before {
    width: 250vw;
    height: 100vw;
    top: calc(100% + 1.8rem);
    left: 50%;
    transform: translateX(-50%);
  }
  #gallery-1716 .cs-gallery {
    height: auto;
  }
  #gallery-1716 .cs-picture {
    height: 100%;
    max-height: 100%;
    /* 280px - 420px */
    min-height: clamp(17.5rem, 37vw, 26.25rem);
  }
}
                                
/*-- -------------------------- -->
<---        Collection          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #collection-1602 {
      padding: var(--sectionPadding);
    }
    #collection-1602 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
      z-index: 1;
    }
    #collection-1602 .cs-content {
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }
    #collection-1602 .cs-title {
      margin: 0;
    }
    #collection-1602 .cs-button-group {
      margin: 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      /* 16px - 32px */
      gap: clamp(1rem, 4vw, 2rem);
    }
    #collection-1602 .cs-button {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2em;
      text-transform: uppercase;
      padding: 0;
      color: var(--bodyTextColor);
      background-color: transparent;
      border: none;
      position: relative;
      transition: color 0.3s;
    }
    #collection-1602 .cs-button:before {
      content: "";
      width: 0;
      height: 1px;
      background: var(--primary);
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: width 0.3s;
    }
    #collection-1602 .cs-button:hover {
      color: var(--primary);
      cursor: pointer;
    }
    #collection-1602 .cs-button:hover:before {
      width: 100%;
    }
    #collection-1602 .cs-button.cs-active {
      color: var(--primary);
    }
    #collection-1602 .cs-button.cs-active:before {
      width: 100%;
    }
    #collection-1602 .cs-listing-wrapper {
      width: 100%;
      position: relative;
      z-index: 1;
    }
    #collection-1602 .cs-listing {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      justify-items: center;
      grid-auto-flow: row;
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
      position: relative;
      transform-style: preserve-3d;
      perspective: 700px;
      transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
      /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
      transform-origin: left top;
    }
    #collection-1602 .cs-listing.cs-hidden {
      /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
      opacity: 0;
      /* 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!important;
      position: absolute;
      /* 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 position when it animates */
      top: 0;
      left: 0;
      /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
      transform: scaleY(0) scaleX(0);
      /* prevents the mouse from interacting with it */
      pointer-events: none;
    }
    #collection-1602 .cs-listing.cs-hidden .cs-image {
      opacity: 0;
      /* 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) rotateX(90deg);
    }
    #collection-1602 .cs-listing.cs-hidden .cs-item {
      transform: rotateY(180deg);
      opacity: 0;
    }
    #collection-1602 .cs-item {
      width: 100%;
      max-width: 23.4375rem;
      /* overwrites the default 'min-width: auto' value, keeping all grid items the same width no matter what*/
      min-width: 0;
      opacity: 1;
      padding: 1rem;
      border: 1px solid #e8e8e8;
      transform: rotateY(0);
      transition: transform 0.7s, opacity 0.3s;
    }
    #collection-1602 .cs-item:nth-of-type(1) {
      transition-delay: 0.1s;
    }
    #collection-1602 .cs-item:nth-of-type(2) {
      transition-delay: 0.2s;
    }
    #collection-1602 .cs-item:nth-of-type(3) {
      transition-delay: 0.3s;
    }
    #collection-1602 .cs-item:nth-of-type(4) {
      transition-delay: 0.4s;
    }
    #collection-1602 .cs-item:nth-of-type(5) {
      transition-delay: 0.5s;
    }
    #collection-1602 .cs-item:nth-of-type(6) {
      transition-delay: 0.6s;
    }
    #collection-1602 .cs-item:nth-of-type(7) {
      transition-delay: 0.7s;
    }
    #collection-1602 .cs-item:nth-of-type(8) {
      transition-delay: 0.8s;
    }
    #collection-1602 .cs-item:nth-of-type(9) {
      transition-delay: 0.1s;
    }
    #collection-1602 .cs-item:nth-of-type(10) {
      transition-delay: 0.1s;
    }
    #collection-1602 .cs-item:nth-of-type(11) {
      transition-delay: 0.1s;
    }
    #collection-1602 .cs-item:nth-of-type(12) {
      transition-delay: 0.1s;
    }
    #collection-1602 .cs-link {
      text-decoration: none;
    }
    #collection-1602 .cs-link:hover .cs-picture img {
      transform: scale(1.1);
    }
    #collection-1602 .cs-picture-group {
      width: auto;
      height: 18.75rem;
      margin-bottom: 1.25rem;
      position: relative;
    }
    #collection-1602 .cs-picture {
      width: 100%;
      height: 100%;
      background-color: #f6f6f6;
      overflow: hidden;
      display: block;
    }
    #collection-1602 .cs-picture img {
      width: 100%;
      height: 100%;
      /* using object-fit contain to keep the entirety of the product image in the frame */
      /* feel free to change this to 'cover', or adjust the background-color above if you have consistent backgrounds on your products */
      object-fit: contain;
      transition: transform 0.6s;
    }
    #collection-1602 .cs-offer {
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1.2em;
      text-transform: uppercase;
      letter-spacing: 1.3px;
      padding: 0.375rem;
      color: #fff;
      background: #ff4747;
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
    }
    #collection-1602 .cs-category {
      font-size: 1rem;
      line-height: 1.5em;
      color: #767676;
    }
    #collection-1602 .cs-name {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 1vw, 1.5625rem);
      font-weight: 700;
      line-height: 1.2em;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      margin: 0;
      color: var(--headerColor);
      overflow: hidden;
    }
    #collection-1602 .cs-actions {
      margin-top: 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    #collection-1602 .cs-price {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2em;
      color: var(--secondary);
    }
    #collection-1602 .cs-was-price {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2em;
      text-decoration: line-through;
      color: #767676;
    }
    #collection-1602 .cs-stars {
      margin-top: 0.25rem;
      display: flex;
    }
    #collection-1602 .cs-star {
      width: 1.25rem;
      height: 1.25rem;
    }
    #collection-1602 .cs-buy {
      max-height: 2.5rem;
      padding: 0.5rem;
      background: none;
      border: 2px solid var(--primary);
      border-radius: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #collection-1602 .cs-basket {
      width: 1.5rem;
      height: auto;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #collection-1602 .cs-content {
      flex-direction: row;
      justify-content: space-between;
    }
    #collection-1602 .cs-listing {
      grid-template-columns: repeat(3, 1fr);
    }
    #collection-1602 .cs-item {
      max-width: none;
    }
    #collection-1602 .cs-picture-group {
      /* 200px - 320px */
      height: clamp(12.5rem, 23vw, 20rem);
    }
  }
  /*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-404 {
      padding: var(--sectionPadding);
      overflow: hidden;
      position: relative;
    }
    #gallery-404 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
      padding-top: clamp(3rem, 10vw, 5rem);
    }
    #gallery-404 .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-404 .cs-title {
      max-width: 20ch;
    }
    #gallery-404 .cs-button-group {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      row-gap: 0.5rem;
      column-gap: 2rem;
    }
    #gallery-404 .cs-button {
      font-size: 1rem;
      line-height: 1.5em;
      color: var(--bodyTextColor);
      background-color: transparent;
      border: none;
      transition: color 0.3s;
    }
    #gallery-404 .cs-button:hover {
      color: var(--primary);
      cursor: pointer;
    }
    #gallery-404 .cs-button.cs-active {
      color: var(--primary);
    }
    #gallery-404 .cs-gallery-wrapper {
      width: 100%;
      position: relative;
      z-index: 1;
    }
    #gallery-404 .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;
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
      transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
      /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
      transform-origin: left top;
    }
    #gallery-404 .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 !important;
      /* 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 position 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-404 .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-404 .cs-image {
      border-radius: 1.25rem;
      width: 47%;
      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-404 .cs-image:nth-of-type(1) {
      /* changes transition delays 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-404 .cs-image:nth-of-type(2) {
      transition-delay: 0.3s;
    }
    #gallery-404 .cs-image:nth-of-type(3) {
      transition-delay: 0.45s;
    }
    #gallery-404 .cs-image:nth-of-type(4) {
      transition-delay: 0.6s;
    }
    #gallery-404 .cs-image:nth-of-type(5) {
      transition-delay: 0.75s;
    }
    #gallery-404 .cs-image:nth-of-type(6) {
      transition-delay: 0.9s;
    }
    #gallery-404 .cs-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it act like a background image */
      object-fit: cover;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #gallery-404 .cs-container {
      max-width: 80rem;
    }
    #gallery-404 .cs-content {
      text-align: left;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
    #gallery-404 .cs-title {
      margin: 0;
    }
    #gallery-404 .cs-image {
      width: 31.8%;
      aspect-ratio: 1;
    }
  }
  /* Desktop - 1300px */
  @media only screen and (min-width: 81.25rem) {
    #gallery-404 .cs-flex {
      max-width: 34.375rem;
    }
    #gallery-404 .cs-gallery {
      align-items: stretch;
      justify-content: center;
    }
    #gallery-404 .cs-image {
      width: 39.375rem;
      max-width: 100%;
      height: 25rem;
    }
    #gallery-404 .cs-image:nth-of-type(2),
    #gallery-404 .cs-image:nth-of-type(3),
    #gallery-404 .cs-image:nth-of-type(4),
    #gallery-404 .cs-image:nth-of-type(5) {
      width: 19.0625rem;
    }
    #gallery-404 .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-404 .cs-image:nth-of-type(2) {
      transition-delay: 0.3s;
    }
    #gallery-404 .cs-image:nth-of-type(3) {
      transition-delay: 0.45s;
    }
    #gallery-404 .cs-image:nth-of-type(4) {
      transition-delay: 0.15s;
    }
    #gallery-404 .cs-image:nth-of-type(5) {
      transition-delay: 0.3s;
    }
    #gallery-404 .cs-image:nth-of-type(6) {
      transition-delay: 0.45s;
    }
  }
/*-- -------------------------- -->
<---        Recent Posts        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #blog-1347 {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 1;
        overflow: hidden;
        padding-top: clamp(10rem, 20vw, 12.5rem);
    }
    #blog-1347 .cs-container {
        width: 100%;
        /* changes to 1280px on desktop */
        max-width: 43.75rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #blog-1347 .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;
    }

    #blog-1347 .cs-title {
        max-width: 20ch;
    }
    #blog-1347 .cs-topper {
        color: var(--secondary);
    }
    #blog-1347 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
    }
    #blog-1347 .cs-item {
        list-style: none;
        display: flex;
        flex-direction: column;
        grid-column: span 12;
    }
    #blog-1347 .cs-item:hover .cs-h3,
    #blog-1347 .cs-item:hover .cs-date,
    #blog-1347 .cs-item:hover .cs-category {
        color: #fff;
    }
    #blog-1347 .cs-item:hover .cs-item-text {
        background-color: var(--primary);
    }
    #blog-1347 .cs-item:hover .cs-icon-wrapper {
        border-color: #fff;
    }
    #blog-1347 .cs-item:hover .cs-icon,
    #blog-1347 .cs-item:hover .cs-date-icon {
        filter: brightness(1000%) grayscale(1);
    }
    #blog-1347 .cs-item:hover .cs-icon {
        transform: rotate(45deg);
    }
    #blog-1347 .cs-item:hover .cs-category::before {
        background-color: #fff;
        opacity: 0.2;
    }
    #blog-1347 .cs-link {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        /* if one card has more content then the others, the card will stretch to fill the parent container */
        flex-grow: 1;
        gap: 1rem;
    }
    #blog-1347 .cs-picture {
        width: 100%;
        height: 20rem;
        margin: 0;
        border-radius: 1.5rem;
        display: block;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    #blog-1347 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #blog-1347 .cs-item-text {
        padding: 1.25rem;
        background-color: #f7f7f7;
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* makes the item text the element that grows to fill the container */
        flex-grow: 1;
        transition: background-color 0.3s;
    }
    #blog-1347 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
        line-height: 1.2em;
        text-align: left;
        margin: 0;
        color: #1a1a1a;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        transition: color 0.3s;
    }
    #blog-1347 .cs-icon-wrapper {
        width: 3rem;
        height: 3rem;
        border: 1px solid #bababa;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents the parent flexbox from shrinking the icon */
        flex-shrink: 0;
        transition: border-color 0.3s;
    }
    #blog-1347 .cs-icon {
        width: auto;
        height: 0.75rem;
        transition:
            filter 0.3s,
            transform 0.3s;
    }
    #blog-1347 .cs-info {
        margin: 1rem 0 0;
        padding: 1rem 0 0;
        border-top: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #blog-1347 .cs-date {
        font-size: 0.875rem;
        line-height: 1.5em;
        text-align: left;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: color 0.3s;
    }
    #blog-1347 .cs-date-icon {
        width: auto;
        height: 1.5rem;
        transition: filter 0.3s;
    }
    #blog-1347 .cs-category {
        font-size: 0.875rem;
        /* centers the text if the category bullet has to span multiple lines */
        text-align: center;
        padding: 0.25rem 1rem;
        color: #1a1a1a;
        border-radius: 5rem;
        position: relative;
        z-index: 0;
        overflow: hidden;
    }
    #blog-1347 .cs-category::before {
        content: "";
        width: 100%;
        height: 100%;
        background: #e8e8e8;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #blog-1347 .cs-bubbles {
        width: 20.0625rem;
        height: 26.4375rem;
        display: none;
        position: absolute;
        top: 66.4375rem;
        right: -8.75rem;
        z-index: -1;
    }
    #blog-1347 .cs-bubbles:before {
        /* white border bubble */
        content: "";
        width: 16.5rem;
        height: 16.5rem;
        background: transparent;
        opacity: 1;
        border: 1px solid #1a1a1a;
        border-radius: 50%;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        animation-name: floatAnimation;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }
    #blog-1347 .cs-bubbles:after {
        /* orange bubble */
        content: "";
        width: 16.5rem;
        height: 16.5rem;
        background: var(--primary);
        opacity: 0.1;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #blog-1347 .cs-bubbles {
        display: block;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #blog-1347 .cs-container {
        max-width: 80rem;
    }
    #blog-1347 .cs-item {
        grid-column: span 4;
    }
    #blog-1347 .cs-bubbles {
        top: 17.5625rem;
    }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #blog-1347 .cs-bubbles {
        margin-right: -61.875rem;
        right: 50%;
    }
}
/* --- CSS pro bublinu košíku --- */

/* Ujistíme se, že odkaz košíku je flexibilní a zarovnaný na střed */
.cs-li-link[href*="/kosik"] {
    display: inline-flex !important;
    align-items: center;
    gap: 5px; /* Mezera mezi textem "Košík" a číslem */
}

/* Styl pro samotné číslo */
.cart-count-display {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary); /* Použije tvou oranžovou barvu */
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;  /* Minimální šířka, aby to bylo kulaté */
    height: 20px;     /* Fixní výška */
    border-radius: 50%; /* Udělá z toho kolečko */
    padding: 0 4px;
    line-height: 1;   /* Důležité: zabrání vertikálnímu roztahování */
    position: relative;
    top: -1px;        /* Jemné optické vycentrování */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Pružný efekt pro JS */
}

/* Třída pro animaci "pop", kterou přidáme přes JS */
.cart-pop-animate {
    transform: scale(1.3);
}

/* Styl pro odkaz košíku v menu */
.cs-li-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px; /* Mezera mezi slovem Košík a bublinou */
}

/* Bublina s číslem */
.cart-count-display {
    background-color: var(--primary);
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 800;
    
    /* Perfektní kolečko */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    min-width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    padding: 2px;
    line-height: 1;
    
    /* Prevence rozbití řádku */
    flex-shrink: 0;
}

/* Animace "pop" při přidání (přidáme přes JS) */
.cart-pop {
    animation: cartPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Zajistíme, aby byl košík vidět i na mobilu */
@media only screen and (max-width: 1299px) {
    .cs-social {
        display: flex !important; /* CodeStitch ho defaultně schovává */
        gap: 15px;
        margin-left: auto;
        margin-right: 1rem;
    }
}

/* Styl pro samotný odkaz košíku v soc. sítích */
.cart-link-main {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.cart-text {
    font-size: 14px;
    color: var(--headerColor); /* Použije barvu tvého menu */
    font-weight: 600;
}

/* Bublina (Badge) */
.cart-badge {
    background-color: var(--primary); /* Tvoje oranžová */
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
}

/* Základní styl košíku pro všechna zobrazení */
.mobile-cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    z-index: 100; /* Aby byl nad ostatními prvky */
    width: 40px;
    height: 40px;
}

.cart-icon {
    font-size: 1.5rem;
}

.cart-badge {
    position: absolute;
    top: 2px;
    right: 0px;
    background-color: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
}

/* Pozicování na mobilu (pod 1024px) */
@media only screen and (max-width: 1023px) {
    #cs-navigation .cs-container {
        display: flex;
        align-items: center;
    }

    .mobile-cart-link {
        margin-left: auto; /* Posune košík doprava k menu */
        margin-right: 15px; /* Mezera od hamburger menu */
    }
}

/* Pozicování na desktopu (nad 1024px) */
@media only screen and (min-width: 1024px) {
    .mobile-cart-link {
        order: 3; /* Zařadí ho až za menu nebo k telefonu */
        margin-left: 20px;
    }
}
@media only screen and (min-width: 0rem) {
    /* Toto platí pro VŠECHNY obrázky v galerii */
    #gallery-404 .cs-image {
        width: 100%; /* Na mobilu obvykle chceme plnou šířku kontejneru */
        height: 250px; /* Nebo jiná fixní výška, kterou chcete */
        display: block;
        position: relative;
        transition: opacity 0.3s, transform 0.3s;
        overflow: hidden;
    }

    #gallery-404 .cs-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Zajistí, že se obrázek nedeformuje */
    }
}

#blog-1350 {
    padding: var(--sectionPadding); /* Použije stejné odsazení jako ostatní sekce */
    background-color: #f7f7f7;
}

#blog-1350 .cs-container {
    width: 100%;
    max-width: 80rem; /* cca 1280px */
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
}

#blog-1350 .cs-card-group {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 12fr);
    gap: clamp(1rem, 1.5vw, 1.25rem);
    list-style: none;
}

#blog-1350 .cs-item {
    grid-column: span 12; /* Na mobilu přes celou šířku */
    background-color: #fff;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.3s;
}

@media only screen and (min-width: 48rem) {
    #blog-1350 .cs-item {
        grid-column: span 4; /* Na desktopu 3 vedle sebe */
    }
}

#blog-1350 .cs-item:hover {
    transform: translateY(-5px);
}

#blog-1350 .cs-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#blog-1350 .cs-picture {
    width: 100%;
    height: 15rem; /* Fixní výška pro konzistenci */
    display: block;
    position: relative;
}

#blog-1350 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#blog-1350 .cs-item-text {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#blog-1350 .cs-date {
    font-size: 0.875rem;
    color: #767676;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#blog-1350 .cs-h3 {
    font-size: 1.25rem;
    color: #1a1a1a;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

#blog-1350 .cs-flex-link {
    margin-top: auto;
    color: #ff6b00; /* Vaše oranžová/brandová barva */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#maintenance-bar {
    background-color: #ff9800; /* Oranžová varovná barva */
    color: #fff;
    text-align: center;
    padding: 10px;
    font-family: sans-serif;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.maintenance-icon { margin-right: 10px; }