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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  .sbsr-2217 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .sbsr-2217 .bg-highlight {
    position: absolute;
    right: -50px;
    bottom: -200px;
    width: 721px;
    height: 700px;
  }
  .sbsr-2217 .bg-highlight img{
    object-fit: fill;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .sbsr-2217 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  .sbsr-2217 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  .sbsr-2217 .cs-text {
    margin-bottom: 1.5rem;
  }
  .sbsr-2217 .cs-list {
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 24px - 32px */
    gap: clamp(1.5rem, 3vw, 2rem);
  }
  .sbsr-2217 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .sbsr-2217 .cs-icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    border: 1px solid #BABABA;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex: none;
  }
  .sbsr-2217 .cs-icon {
    width: 45px;
    height: auto;
    display: block;
  }
  .sbsr-2217 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  .sbsr-2217 .cs-li-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.8vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  .sbsr-2217 .cs-image-group {
    /* scales the whole group based on the view width size and stop when that vales equals .74em, resets at desktop */
    font-size: min(2.32vw, .74em);
    width: 39.375em;
    height: 40.9375em;
    display: block;
    position: relative;
    z-index: 1;
  }
  .sbsr-2217 .cs-image-group::before {
    content: "";
    width: 22.375em;
    height: auto;
    background: var(--secondary);
    display: block;
    position: absolute;
    top: 9em;
    bottom: 11.125em;
    border-radius: 32px;
    left: 5.5em;
  }
  .sbsr-2217 .cs-picture {
    position: absolute;
  }
  .sbsr-2217 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  .sbsr-2217 .cs-picture1 {
    width: 19.0625em;
    height: auto;
    border: 2px solid #FFFFFF;
    top: 0;
    bottom: 17.5625em;
    border-radius: 16px;
    overflow: hidden;
    left: 0;
  }
  .sbsr-2217 .cs-picture2 {
    width: 25.8125em;
    height: auto;
    border: 2px solid #FFFFFF;
    top: 16.9375em;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 16px;
  }
  .sbsr-2217 .cs-picture3 {
    width: 13.625em;
    height: 9.6875em;
    top: 5.25em;
    overflow: hidden;
    border: 2px solid #FFFFFF;
    border-radius: 16px;
    right: 4.6875em;
  }
  .sbsr-2217 .cs-graphic {
    display: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  .sbsr-2217 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  .sbsr-2217 .cs-content {
    width: 47%;
    align-self: center;
  }
  .sbsr-2217 .cs-li {
    align-items: center;
  }
  .sbsr-2217 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
    order: 2;
    height: 625px;
  }
}
@media only screen and (min-width: 1750px) {
  .sbsr-2217 .cs-graphic {
    /* 131px - 255px */
    width: 215px;
    height: 600px;
    height: auto;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: -1;
  }
}
                                
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  .sbsr-2202 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .sbsr-2202 .bg-highlight {
    position: absolute;
    left: -100px;
    bottom: -180px;
    width: 1000px;
    height: 635px;
    z-index: -2;
  }
  .sbsr-2202 .bg-highlight img{
    object-fit: fill;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .sbsr-2202.why-choose {
    background-color: #F2F4F6;
  }
  .sbsr-2202 .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, 6vw, 4rem);
  }
  .sbsr-2202 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 36.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  .sbsr-2202 .cs-title {
    max-width: 30ch;
  }
  .sbsr-2202 .cs-text {
    margin-bottom: 1.5rem;
  }
  .sbsr-2202 .cs-weekdays,
  .sbsr-2202 .cs-weekends {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--bodyTextColor);
  }
  .sbsr-2202 .cs-weekdays {
    margin-bottom: 0.5rem;
  }
  .sbsr-2202 .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(2.3vw, .75rem);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 39.375em;
    height: 39.1875em;
    order: -1;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  .sbsr-2202 .cs-picture {
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 16px;
    display: block;
    position: absolute;
  }
  .sbsr-2202 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  .sbsr-2202 .cs-picture1 {
    width: 24em;
    height: 29.375em;
    bottom: 0;
    left: 0;
  }
  .sbsr-2202 .cs-picture2 {
    width: 21.5625em;
    height: 31.875em;
    right: 0;
    top: 0;
    z-index: -1;
  }
  .sbsr-2202 .cs-flower {
    /* 137px - 309px */
    width: clamp(8.5625rem, 20vw, 19.3125rem);
    height: auto;
    display: block;
    position: absolute;
    right: -2rem;
    bottom: -0.5rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  .sbsr-2202 .cs-container {
    max-width: 80rem;
  }
  .sbsr-2202 .cs-flower {
    right: 0;
    bottom: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  .sbsr-2202 .cs-container {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  .sbsr-2202.reverse .cs-container {
    flex-direction: row-reverse;
  }
  .sbsr-2202 .cs-content {
    text-align: left;
    padding: 3rem 0;
    align-self: center;
    align-items: flex-start;
  }
  .sbsr-2202 .cs-image-group {
    font-size: min(1.3vw, 1rem);
    height: auto;
    min-height: 39.1875em;
    order: 2;
  }
  .sbsr-2202 .cs-picture1 {
    height: 74.960128%;
  }
  .sbsr-2202 .cs-picture2 {
    height: 81.339719%;
  }
}
                                
/*-- -------------------------- -->
<---         Donations          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #donations-1429 {
    padding: var(--sectionPadding);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }
  #donations-1429 .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;
    z-index: 10;
  }
  #donations-1429 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #donations-1429 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #donations-1429 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: .8;
  }
  #donations-1429 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #donations-1429 .cs-card-group {
    width: 100%;
    /* changes to 630px at large desktop */
    max-width: 59rem;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    align-items: flex-start;
  }
  #donations-1429 .cs-item {
    text-align: left;
    list-style: none;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #donations-1429 .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #donations-1429 .cs-item:hover .cs-picture img {
    opacity: .3;
    transform: scale(1.1);
  }
  #donations-1429 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #donations-1429 .cs-link {
    text-decoration: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
  #donations-1429 .cs-picture {
    width: 100%;
    height: 15rem;
    background-color: var(--primary);
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #donations-1429 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #donations-1429 .cs-flex {
    padding: 1.5rem;
    /* prblog padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }
  #donations-1429 .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    transition: color .3s;
  }
  #donations-1429 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    padding: 0 0 1.5rem;
    color: var(--bodyTextColor);
    border-bottom: 1px solid #E8E8E8;
  }
  #donations-1429 .cs-number {
    font-size: 0.875rem;
    line-height: 1.2em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #donations-1429 .cs-stats-container {
    width: 100%;
    /* changes to 1280px at large desktop */
    max-width: 59rem;
    position: relative;
    z-index: 1;
  }
  #donations-1429 .cs-stats-group {
    width: 100%;
    max-width: 59rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 4vw, 4rem);
  }
  #donations-1429 .cs-stat {
    list-style: none;
    width: 100%;
    max-width: 25rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20xp */
    gap: clamp(1rem, 2vw, 1.25rem);
    grid-column: span 6;
  }
  #donations-1429 .cs-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  #donations-1429 .cs-icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    border: 1px solid #BABABA;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex: none;
  }
  #donations-1429 .cs-icon {
    width: 45px;
    height: auto;
    display: block;
  }
  #donations-1429 .cs-stat-number {
    /* 25px - 39px */
    font-size: clamp(1.5625rem, 3vw, 2.4375rem);
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 900;
    margin: 0;
    color: var(--headerColor);
    font-family: 'Inter', 'Roboto', Arial, sans-serif;
  }
  #donations-1429 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875em, 3vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #donations-1429 .cs-background {
    width: 100%;
    /* 100% at large desktop */
    height: 70%;
    /* removed at large desktop */
    max-height: 40.625rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #donations-1429 .cs-background:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #donations-1429 .cs-background img {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #donations-1429 .cs-container {
    max-width: 80rem;
  }
  #donations-1429 .cs-item {
    grid-column: span 6;
  }
  #donations-1429 .cs-stat {
    flex-direction: row;
    align-items: center;
  }
  #donations-1429 .cs-info {
    text-align: left;
    align-items: flex-start;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #donations-1429 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #donations-1429 .cs-background img {
    width: 1007px;
    height: 650px;
    top: -23px;
    position: absolute;
    right: -100px;
    pointer-events: none;
    object-fit: cover;
    display: block;
  }
  #donations-1429 .cs-content {
    text-align: left;
    /* this padding will push down and maintain the same distance between the bottom of the group and the top of the cs-stats-container.  That way when you add or subtract content from this group it will always be the right distance from the stat container below it */
    padding-bottom: 15.625rem;
    align-items: flex-start;
  }
  #donations-1429 .cs-card-group {
    /* same amount as the translateY value to offset it */
    margin-bottom: 6.25rem;
    align-self: center;
  }
  #donations-1429 .cs-item:nth-of-type(1) {
    transform: translateY(6.25rem);
  }
  #donations-1429 .cs-card-group {
    max-width: 39.375rem;
  }
  #donations-1429 .cs-stats-container {
    max-width: 80rem;
    /* makes it overlap the cs-container so the cards are next to it on the left */
    margin-top: -9.375rem;
    display: flex;
    justify-content: flex-start;
  }
  #donations-1429 .cs-stats-container:before {
    /* white background on the stats */
    /* we add this to be the background so as the height of the cs-content changes, this white background area will ALWAYS have 36 pixels between the top of it and the stats content below it.  This is an "illusion" we use to create the LOOK of it being the section background so we have mroe control over the white space above the stats group. */
    content: '';
    width: 105vw;
    height: 62.5rem;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: -2.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  #donations-1429 .cs-stats-group {
    max-width: 36.5625rem;
    justify-content: flex-end;
  }
  #donations-1429 .cs-background {
    height: 100%;
    max-height: 100%;
  }
}
                                
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
  }
  #faq .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #faq .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #faq .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 0 3rem 0;
  }
  #faq .cs-faq-group {
    margin: 0;
    padding: 1rem 1rem 5rem 1rem;
    border-radius: 16px;
    background-color: #919DB1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    position: relative;
  }
  #faq .cs-faq-item {
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    padding: 1.25rem;
    border-radius: 8px;
    background-color: #ffffff;
  }
  #faq .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #faq .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: bold;
    line-height: 1.2em;
    text-align: left;
    width: 100%;
    padding: 0;
    background: transparent;
    color: var(--headerColor);
    border: none;
    display: block;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq .cs-button:hover {
    cursor: pointer;
  }
  #faq .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    transition: transform 0.5s;
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
  }
  #faq .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    transition: transform 0.5s;
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
  }
  #faq .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    /* clips the text so it doesn't show up */
    overflow: hidden;
    color: var(--bodyTextColor);
    opacity: 0;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #faq .cs-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #faq .cs-picture {
    width: 90%;
    min-height: 23.9375rem;
    aspect-ratio: 300/383;
    margin-left: auto;
    margin-top: -3rem;
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 16px;
  }
  #faq .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) {
  #faq .cs-container {
    max-width: 80rem;
    flex-direction: row;
  }
  #faq .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #faq .cs-faq-group {
    width: 60%;
    max-width: 39.375rem;
    /* 32px - 80px top, bottom, left */
    padding: clamp(2rem, 6vw, 5rem);
    padding-right: 0;
    background-color: transparent;
    flex: none;
  }
  #faq .cs-wrapper {
    flex-direction: row;
    /* 32px - 58px */
    gap: clamp(2rem, 4vw, 3.625rem);
    position: relative;
    z-index: 1;
  }
  #faq .cs-wrapper::before {
    content: "";
    width: 90%;
    max-width: 54.375rem;
    height: 100%;
    border-radius: 16px;
    background-color: #919DB1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #faq .cs-picture {
    width: 100%;
    max-width: 37rem;
    aspect-ratio: initial;
    height: 650px;
    margin-top: 0;
    position: relative;
    /* 60px - 80px */
    top: calc(clamp(3.75rem, 7vw, 5rem)*-1);
  }
}
                                
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #projects {
        padding: var(--sectionPadding);
        padding-left: 0;
        padding-right: 0;
        background-color: #F2F4F6;
    }
    #projects .cs-button-group  {
      height: 44px;
      width: max-content;
      background-color: white;
      display: flex;
      flex-direction: row;
      gap: 64px;
      padding-left: 18px;
      padding-right: 18px;
      border-radius: 4px;
      border: 1px solid #000;
      margin-top: 32px;
    }
    #projects .cs-button {
      background-color: #fff;
      border: none;
      font-family: 'Roboto', Arial, sans-serif;
      color: var(--bodyTextColor);
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      position: relative;
    }
    #projects .cs-button:nth-of-type(1)::before {
      content: '';
      position: absolute;
      width: 1px;
      height: 17px;
      background-color: #D9D9D9;
      top: 50%;
      transform: translateY(-50%);
      right: -32px;
      pointer-events: none;
    }
    #projects .cs-button.cs-active {
      color: var(--primary);
    }
    #projects .cs-container {
        width: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        max-width: 1920px;
    }
    #projects .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        padding: 0 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #projects .cs-title {
        margin: 0;
    }
    #projects .cs-gallery {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #projects .cs-picture {
        width: 100%;
        height: 67vw;
        /* makes it square */
        aspect-ratio: 1;
        display: block;
        grid-column: span 8;
        grid-row: span 1;
        transform: translateY(0rem) rotateX(0);
        transition: opacity 0.6s, transform 0.6s;
        opacity: 1;
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid white;
    }
    #projects .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.65s, opacity 0.3s;
    }
  #projects .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);
  }
  #projects .cs-gallery.cs-hidden .cs-picture {
    /* 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;
  }
  #projects .cs-picture: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;
  }
  #projects .cs-picture:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #projects .cs-picture:nth-of-type(3) {
    transition-delay: 0.3s;
  }
  #projects .cs-picture:nth-of-type(4) {
    transition-delay: 0.4s;
  }
  #projects .cs-picture:nth-of-type(5) {
    transition-delay: 0.5s;
  }
  #projects .cs-picture:nth-of-type(6) {
    transition-delay: 0.6s;
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
    #projects {
        flex-direction: row;
    }
    #projects .cs-picture {
        grid-column: span 2;
        height: 23vw;
    }
  #projects .cs-picture:nth-of-type(1),
  #projects .cs-picture:nth-of-type(6) {
    grid-column: span 4;
  }
    #projects .cs-picture {
        max-height: 420px;
    }
}

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

/* Mobile */
@media only screen and (min-width: 0rem) {
  #reviews-2354 {
    padding: var(--sectionPadding);
    background-color: #F8F7F6;
  }
  #reviews-2354 .cs-container {
    width: 100%;
    /* chnages to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #reviews-2354 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #reviews-2354 .cs-title {
    margin: 0;
    max-width: 20ch;
  }
  #reviews-2354 .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    position: relative;
    z-index: 1;
  }
  #reviews-2354 .cs-item {
    text-align: left;
    list-style: none;
    /* 32px - 48px top & bottom */
    /* 24px - 48px left & right */
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3rem);
    background-color: #fff;
    grid-column: span 12;
    position: relative;
    z-index: 1;
    border-radius: 16px;
  }
  #reviews-2354 .cs-item:last-of-type {
    padding: 0;
    order: -1;
  }
  #reviews-2354 .cs-featured {
    /* 25px - 31px */
    font-size: 20px;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--headerColor);
    display: block;
  }
  #reviews-2354 .cs-item-text {
    line-height: 1.5em;
    margin: 0 0 3rem;
    color: var(--bodyTextColor);
  }
  #reviews-2354 .cs-info {
    display: flex;
    align-items: center;
    /* 8px - 16px */
    gap: clamp(0.5rem, 1vw, 1rem);
  }
  #reviews-2354 .cs-profile-wrapper {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: block;
    flex: none;
    position: relative;
    z-index: 1;
  }
  #reviews-2354 .cs-profile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #reviews-2354 .cs-name {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
  }
  #reviews-2354 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    color: var(--bodyTextColor);
  }
  #reviews-2354 .cs-quote {
    width: 5.375rem;
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    right: 20px;
    z-index: -1;
  }
  #reviews-2354 .cs-picture {
    width: 100%;
    height: 90vw;
    max-height: 28.125rem;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
  }
  #reviews-2354 .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) {
  #reviews-2354 .cs-container {
    max-width: 80rem;
  }
  #reviews-2354 .cs-card-group {
    /* 60px - 150px */
    padding: clamp(3.75rem, 12vw, 9.375rem) 0;
  }
  #reviews-2354 .cs-item {
    grid-column: span 6;
  }
  #reviews-2354 .cs-item:last-of-type {
    width: 85%;
    max-width: 59.6875rem;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  #reviews-2354 .cs-picture {
    width: 100%;
    max-height: 100%;
  }
}