/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-1402 {
    padding: var(--sectionPadding);
    /* 190px - 268px */
    padding-top: clamp(25rem, 25vw, 16.75rem);
    padding-bottom: 6.25rem;
    /* clips the line from causing overflow issues for going off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #banner-1402 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    /* 8px - 12px */
    gap: clamp(0.5rem, 1vw, 0.75rem);
  }
  #banner-1402 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #banner-1402 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #banner-1402 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Dark overlay */
    z-index: 1; /* Place overlay above the image */
  }
}
/* @media only screen and (max-width: 767px) {
  #banner-1402 {
    display: none;
  }
} */

/* Desktop - 1200px */
@media only screen and (min-width: 48rem) {
  #banner-1402 {
    display: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  #content-page-1402 {
    padding: var(--sectionPadding);
    background-color: #222222;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* padding-top: 175px; */
  }
  #content-page-1402 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 4vw, 4rem);
    position: relative;
  }
  #content-page-1402 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 46.125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #content-page-1402 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
    color: #f5f5f5;
    position: relative;
  }
  #content-page-1402 h2,
  #content-page-1402 h3,
  #content-page-1402 h4,
  #content-page-1402 h5,
  #content-page-1402 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: #f5f5f5;
  }
  #content-page-1402 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #content-page-1402 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #content-page-1402 h4,
  #content-page-1402 h5,
  #content-page-1402 h6 {
    font-size: 1.25rem;
  }
  #content-page-1402 .cs-button-solid {
    margin-bottom: 2rem;
  }
  #content-page-1402 .cs-no-margin {
    margin: 0;
  }
  #content-page-1402 .cs-color {
    color: var(--primary);
  }
  #content-page-1402 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: #f5f5f5;
  }
  #content-page-1402 p:last-of-type {
    margin-bottom: 2rem;
  }
  #content-page-1402 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    filter: brightness(120%);
  }
  #content-page-1402 ol,
  #content-page-1402 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: #f5f5f5;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #content-page-1402 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #content-page-1402 ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  #content-page-1402 img {
    width: 100%;
    height: auto;
    display: block;
  }
  #content-page-1402 .cs-image-group {
    width: 100%;
    display: none;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.6vw, 1.25rem);
    position: relative;
  }
  #content-page-1402 .cs-flex {
    position: relative;
  }
  #content-page-1402 .cs-background {
    width: 100%;
    height: 100%;
    /* 32px - 48px */
    border-radius: clamp(2rem, 4vw, 3rem);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #content-page-1402 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #content-page-1402 .cs-box {
    text-align: left;
    width: 100%;
    max-width: 12.5rem;
    padding: 2rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--primary);
    /* 48px - 80px */
    border-radius: 2rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: absolute;
    /* 12px - 20px */
    right: clamp(0.75rem, 1.9vw, 1.5rem);
    /* 12px - 20px */
    bottom: clamp(0.75rem, 1.9vw, 1.5rem);
  }
  #content-page-1402 .cs-box-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #content-page-1402 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #content-page-1402 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.265rem, 1fr));
    align-items: center;
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #content-page-1402 .cs-item {
    list-style: none;
    /* 16px - 24px */
    padding: clamp(1rem, 3vw, 1.5rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 1rem;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1402 .cs-item:before {
    display: none;
  }
  #content-page-1402 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #content-page-1402 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #content-page-1402 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #content-page-1402 .cs-item-text:last-of-type {
    margin: 0;
  }
  #content-page-1402 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1402 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #content-page-1402 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
  #content-page-1402 .cs-bubbles {
    font-size: min(2.5vw, 0.7em);
    width: 36.375em;
    height: 34.8125em;
    display: none;
    position: absolute;
    /* changes to auto at larger desktop */
    left: -16.25em;
    /* changes to -220px at large desktop */
    bottom: -3.125em;
    z-index: -1;
  }
  #content-page-1402 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 29em;
    height: 29em;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #content-page-1402 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 22.875em;
    height: 22.875em;
    background: var(--primary);
    opacity: 0.15;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #content-page-1402 {
    padding-top: 13rem;
  }

  #content-page-1402 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #content-page-1402 .cs-content {
    width: 50%;
    max-width: 42.125rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #content-page-1402 .cs-image-group {
    width: 44%;
    max-width: 33.875rem;
    display: flex;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #content-page-1402 {
    padding-top: 15rem;
  }

  #content-page-1402 .cs-content {
    width: 53%;
  }
  #content-page-1402 .cs-image-group {
    width: 43%;
  }
  #content-page-1402 .cs-box {
    display: flex;
  }
  #content-page-1402 .cs-bubbles {
    font-size: 1em;
    margin-right: 37.5rem;
    display: block;
    left: auto;
    right: 50%;
    bottom: -13.75rem;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1726 {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
    position: relative;
  }
  #services-1726 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1726 .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;
  }
  #services-1726 .cs-title {
    max-width: 25ch;
    color: var(--bodyTextColorWhite);
  }
  #services-1726 .cs-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #services-1726 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1726 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    /* 240px - 320px */
    height: clamp(15rem, 40vw, 20rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    background-color: #000;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    grid-column: span 12;
    grid-row: span 1;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #services-1726 .cs-item:hover .cs-background:before {
    opacity: 0.8;
  }
  #services-1726 .cs-item:hover .cs-background img {
    transform: scale(1.2);
  }
  #services-1726 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* 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 width of the link */
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  #services-1726 .cs-number {
    font-size: 4rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0);
    opacity: 100%;
    position: absolute;
    /* 16px - 32px */
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    transition: opacity 0.3s, top 0.3s;
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: var(--bodyTextColorWhite);
  }
  #services-1726 .cs-h3 {
    /* 25px - 31px */
    font-size: clamp(1.5625rem, 2.5vw, 1.9375rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #services-1726 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1726 .cs-background:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: background-color 0.3s, opacity 0.3s;
  }
  #services-1726 .cs-background img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1726 .cs-item {
    grid-column: span 4;
  }
}

/*-- -------------------------- -->
  <---        Meet the Team       -->
  <--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team-1795 {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
  }
  #meet-team-1795 .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;
  }
  #meet-team-1795 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #meet-team-1795 .cs-title {
    max-width: 15ch;
    /* 24px - 32px */
    margin: 0 0 clamp(1.5rem, 1vw, 2rem);
    color: var(--bodyTextColorWhite);
  }
  #meet-team-1795 .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;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #meet-team-1795 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #meet-team-1795 .cs-button-solid:hover:before {
    width: 100%;
  }
  #meet-team-1795 .cs-gallery {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19.0625rem, 1fr));
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
    position: relative;
  }
  #meet-team-1795 .cs-item {
    overflow: hidden;
    position: relative;
  }
  #meet-team-1795 .cs-image {
    /* 260px - 440px */
    min-height: clamp(16.25rem, 60vw, 27.5rem);
    display: block;
    position: relative;
  }
  #meet-team-1795 .cs-image img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    /* sends top of the image to the top of the parent container */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
  }
  #meet-team-1795 .cs-socials {
    list-style: none;
    margin: 0;
    padding: 1.125rem 0.625rem;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: absolute;
    top: 0;
    right: 1rem;
    z-index: 1;
    /* for the hover effects on tablet+ */
    transition: top 0.3s cubic-bezier(0.55, 0.21, 0.64, 0.98);
  }
  #meet-team-1795 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #meet-team-1795 .cs-info {
    min-width: 16.25rem;
    padding: 1rem 1.25rem;
    background: rgba(26, 26, 26, 0.6);
    border-left: 4px solid var(--primary);
    position: absolute;
    right: 0;
    bottom: 1rem;
    /* for the hover effects on tablet+. delayed for a better effect on hover */
    transition: right 0.4s cubic-bezier(0.55, 0.21, 0.64, 0.98);
    backdrop-filter: blur(8px);
  }
  #meet-team-1795 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    margin: 0 0 0.25rem;
    color: var(--bodyTextColorWhite);
  }
  #meet-team-1795 .cs-job {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--primary);
  }
}
/* Tablet - 658px */
@media only screen and (min-width: 41.125rem) {
  #meet-team-1795 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
}
/* Desktop - 10024px */
@media only screen and (min-width: 64rem) {
  #meet-team-1795 .cs-socials {
    top: -40%;
  }
  #meet-team-1795 .cs-social {
    opacity: 0;
    transform: translateY(-1rem);
    transition: transform 0.3s, opacity 0.4s;
    transition-delay: 0.1s;
  }
  #meet-team-1795 .cs-social:nth-of-type(2) {
    transition-delay: 0.17s;
  }
  #meet-team-1795 .cs-social:nth-of-type(3) {
    transition-delay: 0.22s;
  }
  #meet-team-1795 .cs-info {
    right: -100%;
  }
  #meet-team-1795 .cs-item:hover .cs-socials {
    top: 0;
  }
  #meet-team-1795 .cs-item:hover .cs-social {
    opacity: 1;
    transform: translateY(0rem);
  }
  #meet-team-1795 .cs-item:hover .cs-info {
    right: 0;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-982 {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
    position: relative;
    z-index: 1;
  }
  #reviews-982 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-982 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 56.25rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #reviews-982 .cs-title {
    /* 20 characters including spaces */
    max-width: 20ch;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }

  #reviews-982 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #reviews-982 .cs-item {
    list-style: none;
    width: 100%;
    /* 16px - 32px */
    padding: clamp(1rem, 3.1vw, 2rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    grid-column: span 12;
    position: relative;
  }
  #reviews-982 .cs-item:last-of-type:after {
    display: none;
  }
  #reviews-982 .cs-item:after {
    content: "";
    width: 100%;
    height: 1px;
    margin: 2rem 0 0 0;
    background: #e8e8e8;
    opacity: 1;
    position: relative;
    display: block;
  }
  #reviews-982 .cs-flex-group {
    width: 100%;
    margin: 0 0 1.75rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
  }
  #reviews-982 .cs-profile {
    width: 3.125rem;
    height: 3.125rem;
    border: 2px solid #bababa;
    background-color: #bababa;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #reviews-982 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }
  #reviews-982 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #reviews-982 .cs-job {
    font-size: 0.875rem;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    display: block;
  }
  #reviews-982 .cs-review {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    max-width: 27.75rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #reviews-982 .cs-job .review-link {
    color: white;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #reviews-982 .cs-container {
    max-width: 80rem;
  }
  #reviews-982 .cs-card-group {
    gap: 2.5rem;
  }
  #reviews-982 .cs-item {
    grid-column: span 4;
    position: relative;
  }
  #reviews-982 .cs-item:after {
    width: 1px;
    height: 80%;
    margin: 0;
    position: absolute;
    right: -1.25rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1752 {
    padding: 0;
    position: relative;
  }
  #gallery-1752 .cs-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-1752 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #gallery-1752 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    /* 300px - 400px, changes at desktop to a vw unit */
    height: clamp(18.75rem, 27vw, 25rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    background-color: #000;
    grid-column: span 12;
    position: relative;
    z-index: 1;
  }
  #gallery-1752 .cs-item:hover .cs-picture img {
    transform: scale(1.2);
  }
  #gallery-1752 .cs-item:hover .cs-link:before {
    opacity: 0.72;
  }
  #gallery-1752 .cs-item:hover .cs-icon-wrapper {
    opacity: 1;
    /* return to original position */
    transform: translateY(0) rotate(0);
  }
  #gallery-1752 .cs-item:hover .cs-h3 {
    opacity: 1;
    /* Return to original position */
    transform: translateY(0);
  }
  #gallery-1752 .cs-item:hover .cs-hover-text {
    opacity: 1;
    /* Return to original position */
    transform: translateY(0);
  }
  #gallery-1752 .cs-link {
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 20px - 32px */
    padding: clamp(1.25rem, 2.3vw, 2rem);
    /* we use flexbox here to grow the link to fit the whole item, making it clickable everywhere, no matter the size */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #gallery-1752 .cs-link:before {
    /* color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    transition: opacity 0.3s;
  }
  #gallery-1752 .cs-icon-wrapper {
    margin-bottom: 2rem;
    opacity: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: none;
    position: relative;
    transform: translateY(1.75rem) rotate(90deg);
    transition: transform 0.5s, opacity 0.3s;
  }
  #gallery-1752 .cs-icon {
    /* 32px - 60px */
    width: clamp(2rem, 5vw, 3.75rem);
    height: auto;
  }
  #gallery-1752 .cs-h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    margin-bottom: 0.25rem;
    color: var(--bodyTextColorWhite);
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 0.3s, transform 0.4s ease-out;
    transition-delay: 0.05s;
  }
  #gallery-1752 .cs-hover-text {
    /* 16px - 25px */
    font-size: clamp(0.75rem, 1.1vw, 1.1rem);
    font-weight: 700;
    line-height: 1.2em;
    max-width: 16.875rem;
    margin: 0 auto;
    color: #fff;
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 0.3s, transform 0.4s ease-out;
    transition-delay: 0.1s;
  }
  #gallery-1752 .cs-picture {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
  }
  #gallery-1752 .cs-picture:after {
    /* background color overlay on hover */
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: opacity 0.3s;
  }
  #gallery-1752 .cs-picture img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.8s ease-out;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-1752 .cs-item {
    grid-column: span 4;
  }
  #gallery-1752 .cs-item:nth-of-type(4),
  #gallery-1752 .cs-item:nth-of-type(5) {
    grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #gallery-1752 .cs-card-group {
    grid-template-columns: repeat(10, 1fr);
  }
  #gallery-1752 .cs-item {
    height: 29vw;
    grid-column: span 2;
  }
  #gallery-1752 .cs-item:nth-of-type(4),
  #gallery-1752 .cs-item:nth-of-type(5) {
    grid-column: span 2;
  }
}

/* Hidden on cellphones due to user boredom leading them to miss CTA */

/* Hide gallery-1752 on mobile screens (less than 768px) */
@media only screen and (max-width: 47.99rem) {
  #gallery-1752 {
    display: none;
  }
}