/* titillium-web-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Titillium";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/titillium-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1950 {
    min-height: 100dvh;
    /* 200px - 300px top */
    /* 60px - 100px bottom */
    padding: clamp(12.5rem, 12vw, 18.75rem) 1rem clamp(3.75rem, 8vw, 6.25rem)
      1rem;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;
  }
  #hero-1950 .cs-container {
    width: 100%;
    max-width: 85.5625rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1950 .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;
  }
  #hero-1950 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6vw, 5rem);
    color: #fff;
    font-family: "Titillium", sans-serif;
    font-weight: 600;
    /* text-transform: uppercase; */
  }
  #hero-1950 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 1.25rem;
    color: #fff;
    opacity: 0.8;
  }
  #hero-1950 .cs-flex-group {
    max-width: 30rem;
  }
  #hero-1950 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    margin: 0;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    background-color: var(--primary);
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1950 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1950 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1950 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1950 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(26, 26, 26, 0.05) 5%,
      rgba(26, 26, 26, 0) 60%,
      rgba(26, 26, 26, 0.95) 85%
    );
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1950 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1950 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 2rem;
  }
  #hero-1950 .cs-title {
    width: 55%;
    max-width: 39.375rem;
    margin-bottom: 0;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #hero-1950 .cs-flex-group {
    max-width: 30rem;
  }
}
@media only screen and (min-width: 50rem) {
  #hero-1950 .cs-title {
    line-height: 105%;
  }
}

/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1950 .cs-background {
    background: url("../images/hero-desktop.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1950 .cs-background img {
    display: none;
  }
}

/*-- -------------------------- -->
  <!--       Why Choose Us        -->
  <--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1874 {
    padding: var(--sectionPadding);
    /* 128px - 192px */
    padding-bottom: clamp(7rem, 12vw, 11rem);
    background-color: #222;
    overflow-x: clip;
    position: relative;
  }
  #why-choose-1874 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-1874 .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;
  }
  #why-choose-1874 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-1874 .cs-text {
    /* 12px - 24px */
    margin-bottom: clamp(0.75rem, 4vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #why-choose-1874 .cs-ul {
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: row;
    /* 4px - 12px */
    gap: clamp(0.25rem, 2vw, 0.75rem);
  }
  #why-choose-1874 .cs-li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    list-style: none;
    width: 100%;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #why-choose-1874 .cs-check-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;
  }
  #why-choose-1874 .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: 2rem 0 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;
  }
  #why-choose-1874 .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;
  }
  #why-choose-1874 .cs-button-solid:hover:before {
    width: 100%;
  }
  #why-choose-1874 .cs-video-wrapper {
    width: 100%;
    height: 111vw;
    max-height: 22.5rem;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1874 .cs-video-wrapper:hover {
    cursor: pointer;
  }
  #why-choose-1874 .cs-video-wrapper:hover .cs-play {
    transform: translate(-50%, -50%) scale(1.2);
  }
  #why-choose-1874 .cs-video-wrapper video,
  #why-choose-1874 .cs-video-wrapper .cs-picture {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1874 .cs-video-wrapper video img,
  #why-choose-1874 .cs-video-wrapper .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1874 .cs-play {
    /* 80px - 120px */
    width: clamp(5rem, 10vw, 7.5rem);
    height: clamp(5rem, 10vw, 7.5rem);
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition:
      transform 0.3s,
      opacity 0.3s;
    backdrop-filter: blur(8px);
  }
  #why-choose-1874 .cs-play.cs-hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) !important;
  }
  #why-choose-1874 .cs-icon {
    width: 1.25rem;
    height: auto;
  }
  #why-choose-1874 .cs-picture {
    width: 100%;
    height: 95vw;
    /* 260px - 324px */
    min-height: clamp(16.25rem, 32vw, 20.25rem);
    margin: clamp(3rem, 6vw, 4rem) 0 0;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1874 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1874 .cs-graphic {
    width: 100%;
    min-width: 75rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #why-choose-1874 .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1874 .cs-video-wrapper {
    height: 90%;
    max-height: 100%;
    /* 420px - 740px */
    min-height: clamp(26.25rem, 50vw, 46.25rem);
  }
  #why-choose-1874 .cs-container {
    max-width: 80rem;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: stretch;
  }
  #why-choose-1874 .cs-content {
    width: 52%;
    max-width: 34.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1874 .cs-ul {
    grid-template-columns: repeat(2, 1fr);
  }
  #why-choose-1874 .cs-picture {
    height: 100%;
    max-height: 100%;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1874 {
    padding-bottom: 5vw;
  }
  #why-choose-1874 .cs-container {
    align-items: stretch;
  }
  #why-choose-1874 .cs-video-wrapper {
    height: auto;
    margin-bottom: 8.75rem;
  }
}

/*-- -------------------------- -->
<!--       Why Choose Us        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1873 {
    padding: var(--sectionPadding);
    /* 128px - 192px */
    padding-bottom: clamp(8rem, 14vw, 12rem);
    background-color: #222;
    overflow-x: clip;
    position: relative;
  }
  #why-choose-1873 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-1873 .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;
  }
  #why-choose-1873 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-1873 .cs-text {
    /* 12px - 24px */
    margin-bottom: clamp(0.75rem, 4vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #why-choose-1873 .cs-ul {
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: row;
    /* 4px - 12px */
    gap: clamp(0.25rem, 2vw, 0.75rem);
  }
  #why-choose-1873 .cs-li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    list-style: none;
    width: 100%;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #why-choose-1873 .cs-check-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;
  }
  #why-choose-1873 .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: 2rem 0 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;
  }
  #why-choose-1873 .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;
  }
  #why-choose-1873 .cs-button-solid:hover:before {
    width: 100%;
  }
  #why-choose-1873 .cs-video-wrapper {
    width: 100%;
    height: 111vw;
    max-height: 22.5rem;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1873 .cs-video-wrapper:hover {
    cursor: pointer;
  }
  #why-choose-1873 .cs-video-wrapper:hover .cs-play {
    transform: translate(-50%, -50%) scale(1.2);
  }
  #why-choose-1873 .cs-video-wrapper video,
  #why-choose-1873 .cs-video-wrapper .cs-picture {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1873 .cs-video-wrapper video img,
  #why-choose-1873 .cs-video-wrapper .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1873 .cs-play {
    /* 80px - 120px */
    width: clamp(5rem, 10vw, 7.5rem);
    height: clamp(5rem, 10vw, 7.5rem);
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition:
      transform 0.3s,
      opacity 0.3s;
    backdrop-filter: blur(8px);
  }
  #why-choose-1873 .cs-play.cs-hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) !important;
  }
  #why-choose-1873 .cs-icon {
    width: 1.25rem;
    height: auto;
  }
  #why-choose-1873 .cs-picture {
    width: 100%;
    height: 95vw;
    /* 260px - 324px */
    min-height: clamp(16.25rem, 32vw, 20.25rem);
    margin: clamp(3rem, 6vw, 4rem) 0 0;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1873 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1873 .cs-graphic {
    width: 100%;
    min-width: 75rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #why-choose-1873 .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1873 .cs-video-wrapper {
    height: 90%;
    max-height: 100%;
    /* 420px - 740px */
    min-height: clamp(26.25rem, 50vw, 46.25rem);
  }
  #why-choose-1873 .cs-container {
    max-width: 80rem;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: stretch;
  }
  #why-choose-1873 .cs-content {
    width: 52%;
    max-width: 34.375rem;
    /* sends it to the right in the 2nd position */
    order: 2;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1873 .cs-ul {
    grid-template-columns: repeat(2, 1fr);
  }
  #why-choose-1873 .cs-picture {
    height: 100%;
    max-height: 100%;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1873 {
    padding-bottom: 10vw;
  }
  #why-choose-1873 .cs-container {
    align-items: stretch;
  }
  #why-choose-1873 .cs-video-wrapper {
    height: auto;
    margin-bottom: 8.75rem;
  }
}

/*-- -------------------------- -->
  <---        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;
  }
}

/* För att maxa seå */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 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%);
  }
}

/*-- -------------------------- -->
<---          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;
  }
}

/*-- -------------------------- -->
  <---          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;
  }
}