/*-- -------------------------- -->
<---         Main Services      -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1167 {
    position: relative;
      padding: var(--sectionPadding);
  }
  #services-1167 .redirect-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
  }
  #services-1167 .cs-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: auto;
      /* changes to 1440px at large desktop */
      max-width: 51.5rem;
      width: 100%;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1167 .cs-content {
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
      width: 100%;
      /* set text align to left if content needs to be left aligned */
      text-align: center;
  }

  #services-1167 .cs-title {
      max-width: 20ch;
  }
  #services-1167 .cs-card-group {
      display: grid;
      align-items: stretch;
      grid-template-columns: repeat(12, 1fr);
      margin: 0;
      width: 100%;
      padding: 0;
      /* 16px - 20px */
      gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1167 .cs-item {
      z-index: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      background-color: #1a1a1a;
      width: 100%;
      list-style: none;
      text-align: left;
      grid-column: span 12;
      border: 4px solid #232323;
  }
  #services-1167 .cs-item:hover .cs-picture img {
      transform: scale(1.2);
  }
  #services-1167 .cs-item:hover .cs-h3,
  #services-1167 .cs-item:hover .cs-link {
      color: var(--primary);
  }
  #services-1167 .cs-item:hover .cs-link::after {
    width: 100%;
  }
  #services-1167 .cs-item .cs-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Adjust spacing below text */
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
  }
  #services-1167 .cs-item:hover .cs-arrow {
      filter: initial;
  }
  #services-1167 .cs-picture {
      position: relative;
      display: block;
      /* 180px - 240px */
      height: clamp(11.25rem, 24vw, 15rem);
      width: 100%;
      /* clips the image from overflowing parent on hover */
      overflow: hidden;
  }
  #services-1167 .cs-picture img {
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition: transform 0.65s;
  }
  #services-1167 .cs-info {
      display: flex;
      flex-direction: column;
      padding: 1.5rem;
  }
  #services-1167 .cs-h3 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.5em;
      font-weight: 700;
      color: var(--headerColor);
      transition: background-color 0.3s;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      transition: color 0.3s;
  }
  #services-1167 .cs-item-text {
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      color: var(--bodyTextColorWhite);
      text-align: inherit;
      margin: 0;
  }
  #services-1167 .cs-link {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      text-decoration: none;
      font-size: 1rem;
      line-height: 1.2em;
      font-weight: 700;
      color: var(--headerColor);
      text-align: inherit;
      margin-top: 1.25rem;
      transition: color 0.3s;
  }
  #services-1167 .cs-link:hover .cs-arrow {
      transform: translateX(0.25rem);
  }
  #services-1167 .cs-arrow {
      filter: grayscale(1) invert(1);
      display: block;
      height: auto;
      width: 1.25rem;
      transition:
          filter 0.3s,
          transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1167 .cs-item {
      grid-column: span 6;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1167 .cs-container {
      max-width: 90rem;
  }
  #services-1167 .cs-item {
      grid-column: span 3;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1278 {
      padding: var(--sectionPadding);
      overflow: hidden;
      position: relative;
      z-index: 1;
  }
  #sbs-1278 .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);
  }
  #sbs-1278 .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;
  }

  #sbs-1278 .cs-title {
      max-width: 20ch;
  }
  #sbs-1278 .cs-text {
      margin-bottom: 1rem;
  }
  #sbs-1278 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #sbs-1278 .cs-picture {
      width: 100%;
      /* 456px - 598px */
      height: clamp(28.5rem, 46vw, 37.375rem);
      overflow: hidden;
      display: block;
      /* sends it to the bottom in the 2nd position */
      order: 2;
      position: relative;
      z-index: 1;
      border: 8px solid #232323;
  }
  #sbs-1278 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
  #sbs-1278 .cs-picture video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1278 .cs-content {
      flex-wrap: wrap;
      justify-content: space-between;
      row-gap: 2rem;
      max-width: 36.625rem;
      margin: auto;
  }
  #sbs-1278 .cs-title {
      margin: 0;
  }
  #sbs-1278 .cs-button-solid {
      margin-right: auto;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1278 {
      /* moved padding back to the section container */
      padding: var(--sectionPadding);
  }
  #sbs-1278 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
  }
  #sbs-1278 .cs-content {
      width: 100%;
      max-width: 27.0625rem;
      margin: 0;
      flex-direction: column;
      order: 2;
      row-gap: 0;
  }
  #sbs-1278 .cs-flex {
      width: 100%;
  }
  #sbs-1278 .cs-title {
      margin: 0 0 1rem 0;
      color: var(--headerColor);
  }
  #sbs-1278 .cs-text {
      width: 100%;
  }
  #sbs-1278 .cs-picture {
      max-width: 46.125rem;
      order: 1;
  }
}

                                                            
/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-340 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #stats-340 .cs-background {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1;
  }
  #stats-340 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.16;
    object-fit: cover;
  }
  #stats-340 .cs-card-group {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 37.5rem;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
  }
  #stats-340 .cs-item {
    list-style: none;
    /* changes to 260px at tablet */
    width: 12.5rem;
    min-width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #stats-340 .cs-picture {
    /* 60px - 80px */
    width: clamp(3.75rem, 7.9vw, 5rem);
    height: clamp(3.75rem, 7.9vw, 5rem);
    margin-right: 1rem;
    border-radius: 50%;
    border: 1px solid #bababa;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents border from adding to height and width */
    box-sizing: border-box;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #stats-340 .cs-icon {
    /* 28px - 40px */
    width: clamp(1.75rem, 3.9vw, 2.5rem);
    height: auto;
  }
  #stats-340 .cs-flex-group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #stats-340 .cs-number {
    font-size: var(--headerFontSize);
    font-family: 'HWT', Arial, sans-serif;
    color: var(--bodyTextColorWhite);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0;
    display: block;
  }
  #stats-340 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    display: block;
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #stats-340 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 3.125rem;
    row-gap: 3.75rem;
  }
  #stats-340 .cs-item {
    width: 16.25rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats-340 .cs-card-group {
    max-width: 80rem;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }
}
                                
/*-- -------------------------- -->
<---         Minor Services     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1253 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
  }
  #services-1253 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1253 .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;
  }
  #services-1253 .cs-title {
    max-width: 20ch;
  }
  #services-1253 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #services-1253 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #000;
    border: 4px solid #232323;
    /* clips background image corners */
    overflow: hidden;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
  }
  #services-1253 .cs-item:hover .cs-item-background img {
    opacity: 0.4;
    transform: scale(1.15);
  }
  #services-1253 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-1253 .cs-item:before {
    content: "";
    width: 100%;
    height: 100%;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    /* prevents the mouse from interacting with it so when you hover hover the other elements inside the card it doesn't block your mouse from hovering over them */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 10;
  }
  #services-1253 .cs-link {
    text-decoration: none;
    /* 125px - 236px */
    /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and widht of the link */
    padding: clamp(7.8125rem, 19vw, 14.75rem) 1.5rem 1.5rem;
  }
  #services-1253 .cs-item:hover::after {
    width: 100%;
  }
  #services-1253 .cs-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
  }
  #services-1253 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
  }
  #services-1253 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColorWhite);
  }
  #services-1253 .cs-item-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1253 .cs-item-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.24;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #services-1253 .cs-item-background:after {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
    opacity: 0.4;
    bottom: 0;
    left: 0;
    z-index: 2;
  }
  #services-1253 .cs-item-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    transition: transform 0.6s,
                    opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1253 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #services-1253 .cs-title {
    margin: 0;
  }
  #services-1253 .cs-flex-group {
    width: 50%;
  }
  #services-1253 .cs-item {
    grid-column: span 4;
  }
}
                                
/*-- -------------------------- -->
<---    Replacement Process     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-2296 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbsr-2296 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 4vw, 4rem);
  }
  #sbsr-2296 .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    max-width: 36.625rem;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #sbsr-2296 .cs-title {
    max-width: 30ch;
  }
  #sbsr-2296 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-2296 .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #sbsr-2296 .cs-h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    color: var(--headerColor);
  }
  #sbsr-2296 .cs-ul {
    margin: 0.75rem 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #sbsr-2296 .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    list-style: none;
    /* 20px - 24px */
    padding-left: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #sbsr-2296 .cs-li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background-color: var(--primary);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
  }
  #sbsr-2296 .cs-image-group {
    /* scales the whole section down and ties the font size to the vw and stops at 75% of the vale of 1em, changes at desktop */
    font-size: min(1.98vw, .802rem);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 46.125em;
    height: 38.75em;
    order: -1;
    position: relative;
    z-index: 1;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbsr-2296 .cs-picture {
    width: 100%;
    height: 100%;
    border: 8px solid #232323;
    box-sizing: border-box;
    display: block;
  }
  #sbsr-2296 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
  }
  #sbsr-2296 .cs-picture-wrapper1 {
    width: 25.8125em;
    height: 28.5625em;
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-2296 .cs-picture-wrapper2 {
    width: 25.8125em;
    height: 24.8125em;
    display: flex;
    flex-direction: column-reverse;
    gap: 1em;
    position: absolute;
    top: 3.25em;
    right: 0;
    z-index: -1;
  }
  #sbsr-2296 .cs-picture-wrapper3 {
    width: 25.75em;
    min-height: 18.375em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    position: absolute;
    bottom: 0;
    left: 9.25em;
  }
  #sbsr-2296 .cs-tag {
    /* 14px - 24px */
    font-size: clamp(0.875rem, 1.5vw, 1.5rem);
    line-height: 1.2em;
    text-align: center;
    color: var(--headerColor);
    font-family: 'HWT', 'Arial', sans-serif;
    display: block;
    flex: none;
  }
  #sbsr-2296 .cs-arrow {
    position: absolute;
  }
  #sbsr-2296 .cs-arrow-left {
    bottom: 12.5625em;
    left: 4.5em;
    width: 93px;
    height: 149px;
  }
  #sbsr-2296 .cs-arrow-right {
    right: 7.125em;
    bottom: 11.0625em;
    width: 126px;
    height: 126px;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-2296 .cs-container {
    max-width: 80rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-2296 .cs-container {
    flex-direction: row;
    align-items: stretch;
  }
  #sbsr-2296 .cs-image-group {
    font-size: min(1.1vw, 1rem);
    height: auto;
    min-height: 38.75em;
    order: initial;
    flex: none;
  }
  #sbsr-2296 .cs-picture-wrapper1 {
    height: auto;
    bottom: 10.1875em;
  }
  #sbsr-2296 .cs-picture-wrapper2 {
    height: auto;
    bottom: 10.625em;
  }
  #sbsr-2296 .cs-picture-wrapper3 .cs-picture {
    height: 15.5625em;
  }
}
@media only screen and (min-width: 1500px) {
  #sbsr-2296 .cs-ul li{
    text-wrap: nowrap;
  }
}
                                

/*-- -------------------------- -->
<--- Roof Replacement Services  -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2295 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-2295 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 4vw, 4rem);
  }
  #sbs-2295 .cs-image-group {
    /* scales the whole section down and ties the font size to the vw and stops at 75% of the vale of 1em, changes at desktop */
    font-size: min(1.98vw, .826rem);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 46.125em;
    height: 36.125em;
    order: -1;
    position: relative;
    z-index: 1;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbs-2295 .cs-picture {
    width: 100%;
    height: 100%;
    border:8px solid #232323;
    display: block;
  }
  #sbs-2295 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
  }
  #sbs-2295 .cs-picture-wrapper1 {
    width: 25.75em;
    height: 28.5625em;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-2295 .cs-picture-wrapper2 {
    width: 25.8125em;
    height: 29.625em;
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #sbs-2295 .cs-tag {
    /* 14px - 24px */
    font-size: clamp(0.875rem, 1.4vw, 1.5rem);
    font-family: 'HWT', 'Arial', sans-serif;
    line-height: 1.2em;
    text-align: center;
    color: var(--headerColor);
  }
  #sbs-2295 .cs-arrow {
    width: 129px;
    height: 129px;
    position: absolute;
    top: 15.125em;
    left: 15.9375em;
  }
  #sbs-2295 .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    max-width: 36.625rem;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #sbs-2295 .cs-title {
    max-width: 30ch;
  }
  #sbs-2295 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-2295 .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #sbs-2295 .cs-h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    color: var(--headerColor);
  }
  #sbs-2295 .cs-ul {
    margin: 0.75rem 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #sbs-2295 .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    list-style: none;
    /* 20px - 24px */
    padding-left: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--bodyTextColor);
    position: relative;
  }
  #sbs-2295 .cs-li strong {
    color: #1a1a1a;
  }
  #sbs-2295 .cs-li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background-color: var(--secondary);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-2295 .cs-container {
    max-width: 80rem;
  }
  #sbs-2295 .cs-image-group {
    order: initial;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-2295 .cs-container {
    flex-direction: row-reverse;
    align-items: stretch;
  }
  #sbs-2295 .cs-image-group {
    font-size: min(1.03vw, 1rem);
    height: auto;
  }
  #sbs-2295 .cs-picture-wrapper1 {
    height: auto;
    bottom: 7.5625em;
  }
  #sbs-2295 .cs-picture-wrapper2 {
    height: auto;
    top: 6.5em;
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1449 {
    padding: var(--sectionPadding);
  }
  #gallery-1449 .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;
  }
  #gallery-1449 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  #gallery-1449 .cs-title {
    margin: 0;
  }
  #gallery-1449 .cs-button-group {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 1rem;
    /* 20px - 32px */
    column-gap: clamp(1.25rem, 2vw, 2rem);
  }
  #gallery-1449 .cs-button {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    background-color: transparent;
    border: none;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #gallery-1449 .cs-button:before {
    content: '';
    width: 100%;
    height: 4px;
    background: var(--primary);
    opacity: 0;
    border-radius: 4px 4px 0 0;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    transition: opacity 0.3s, bottom 0.3s;
  }
  #gallery-1449 .cs-button:hover {
    color: var(--primary);
    cursor: pointer;
  }
  #gallery-1449 .cs-button:hover:before {
    opacity: 1;
    bottom: -0.625rem;
  }
  #gallery-1449 .cs-button.cs-active {
    color: var(--primary);
  }
  #gallery-1449 .cs-button.cs-active:before {
    opacity: 1;
    bottom: -0.625rem;
  }
  #gallery-1449 .cs-gallery-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  #gallery-1449 .cs-gallery {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19.0625rem, 1fr));
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
    position: relative;
    perspective: 700px;
    transform-style: preserve-3d;
    transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
    /* makes the transfrom scaling orgin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: left top;
  }
  #gallery-1449 .cs-gallery.cs-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the gallery won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-container (left: 0). Same for the top:0 value, the gallery won't go past that posiiton when it animates */
    top: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0) scaleX(0);
  }
  #gallery-1449 .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) rotateX(90deg);
    opacity: 0;
  }
  #gallery-1449 .cs-image {
    /* 260px - 360px */
    min-height: clamp(16.25rem, 60vw, 20rem);
    border: 4px solid #232323;
    /* 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) rotateX(0);
    opacity: 1;
    transition: opacity 0.6s, transform 0.6s;
  }
  #gallery-1449 .cs-image:nth-of-type(1) {
    /* the transition delays change at desktop */
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.1s;
  }
  #gallery-1449 .cs-image:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #gallery-1449 .cs-image:nth-of-type(3) {
    transition-delay: 0.3s;
  }
  #gallery-1449 .cs-image:nth-of-type(4) {
    transition-delay: 0.4s;
  }
  #gallery-1449 .cs-image:nth-of-type(5) {
    transition-delay: 0.5s;
  }
  #gallery-1449 .cs-image:nth-of-type(6) {
    transition-delay: 0.6s;
  }
  #gallery-1449 .cs-image:nth-of-type(7) {
    transition-delay: 0.7s;
  }
  #gallery-1449 .cs-image:nth-of-type(8) {
    transition-delay: 0.8s;
  }
  #gallery-1449 .cs-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
@media only screen and (min-width: 658px) {
  #gallery-1449 .cs-image:nth-of-type(3) {
    grid-column: span 2;
  }
  #gallery-1449 .cs-image:nth-of-type(4) {
    grid-column: span 2;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-1449 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #gallery-1449 .cs-button {
    margin-bottom: 0.625rem;
  }
  #gallery-1449 .cs-gallery {
    grid-template-columns: 1fr 1fr;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 1024px) {
  #gallery-1449 .cs-gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
                                             

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-287 {
      /* centers the button */
      text-align: center;
      padding: var(--sectionPadding);
      /* remove padding left & right so the image can be full width */
      padding-left: 0;
      padding-right: 0;
      position: relative;
  }
  #reviews-287 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  #reviews-287 .cs-content {
      text-align: left;
      max-width: 35.625rem;
      /* allows children to leave the parent container, as if it doesn't exist so
             flexbox can arrange them with the .cs-picture. This lets us use the 
             flexbox "order" property on the .cs-review to position itself after 
             the .cs-picture */
      display: contents;
      flex-direction: column;
      align-items: flex-start;
  }

  #reviews-287 .cs-topper,
  #reviews-287 .cs-title {
      width: 100%;
      /* move left & right padding to elements */
      padding: 0 1rem;
      /* prevents padding from affecting width */
      box-sizing: border-box;
      display: block;
  }
  #reviews-287 .cs-text {
      max-width: 40.625rem;
      margin: 0 auto;
      /* move left & right padding to elements */
      padding: 0 1rem;
      /* 48px - 64px */
      margin-bottom: clamp(3rem, 6vw, 4rem);
      /* prevents padding from affecting width */
      box-sizing: border-box;
  }
  #reviews-287 .cs-review {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: left;
      margin: 0 1rem;
      /* pulls it 28px up to overlap the picture */
      margin-top: -1.75rem;
      /* 48px - 64px */
      margin-bottom: clamp(3rem, 6vw, 4rem);
      /* 24px - 32px top & bottom */
      /* 28px - 32px left & right */
      padding: clamp(1.5rem, 2.75vw, 2rem) clamp(1.75rem, 3vw, 2rem);
      background-color: #f1f1f4;
      /* puts it in the 2nd position from the bottom */
      order: 2;
      /* prevents padding from affecting height & width */
      box-sizing: border-box;
      /* add z index so it can sit on top of picture */
      position: relative;
      z-index: 10;
  }
  #reviews-287 .cs-name {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: left;
      font-weight: 700;
      /* 14px - 16px */
      margin-top: clamp(0.75rem, 1.7vw, 1rem);
      display: block;
  }
  #reviews-287 .cs-picture {
      width: 100%;
      aspect-ratio: 1.56521739;
      display: block;
      position: relative;
      border: 8px solid #232323;
  }
  #reviews-287 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-287 {
      /* added padding left and right back to the section container */
      padding-left: 1rem;
      padding-right: 1rem;
  }
  #reviews-287 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      column-gap: 2.75rem;
  }
  #reviews-287 .cs-content {
      width: 52%;
      padding: 0;
      /* bring the children back home under the parent container */
      display: flex;
  }
  #reviews-287 .cs-topper,
  #reviews-287 .cs-title,
  #reviews-287 .cs-text {
      /* reset the padding */
      padding: 0;
  }
  #reviews-287 .cs-picture {
      position: relative;
      z-index: 10;
  }
  #reviews-287 .cs-review {
      margin-left: 0;
      margin-right: 0;
      padding-right: 0;
      position: relative;
      z-index: 1;
  }
  #reviews-287 .cs-review:before {
      /* extended review backgorund that goes under the image */
      content: "";
      /* 644px - 1172px */
      width: clamp(40.25rem, 90vw, 73.25rem);
      height: 100%;
      background: inherit;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #reviews-287 .cs-picture {
      width: 50%;
      /* 300px - 630px */
      max-width: clamp(18.75rem, 47vw, 39.375rem);
      /* 397px - 411px */
      height: clamp(24.8125rem, 37vw, 25.6875rem);
      /* prevents flexbox from squishing it */
      flex: none;
  }
}