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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-48 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #gallery-48 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-48 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #gallery-48 .cs-title {
    margin: 0;
    max-width: 20ch;
  }
  #gallery-48 .cs-image-group {
    /* used rem so it doesn't scale with the font size of on parent */
    font-size: min(1.1vw, 1em);
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 8px - 20px */
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #gallery-48 .cs-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* 8px - 20px */
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #gallery-48 .cs-picture {
    width: 100%;
    position: relative;
    display: block;
  }
  #gallery-48 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #gallery-48 .cs-row-1 .cs-picture-1 {
    height: 35.4375em;
  }
  #gallery-48 .cs-row-1 .cs-picture-2 {
    height: 39.3125em;
  }
  #gallery-48 .cs-row-1 .cs-picture-3 {
    height: 32em;
  }
  #gallery-48 .cs-row-2 .cs-picture-1 {
    height: 30.75em;
  }
  #gallery-48 .cs-row-2 .cs-picture-2 {
    height: 32.3125em;
  }
  #gallery-48 .cs-row-2 .cs-picture-3 {
    height: 39.3125em;
  }
  #gallery-48 .cs-row-3 .cs-picture-1 {
    height: 39.0625em;
  }
  #gallery-48 .cs-row-3 .cs-picture-2 {
    height: 28.25em;
  }
  #gallery-48 .cs-row-3 .cs-picture-3 {
    height: 39.3125em;
  }
  #gallery-48 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #gallery-48 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #gallery-48 .cs-button-solid:hover:before {
    width: 100%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #ABoutRPsbs-328,
  #AboutRPsbsr-328 {
    padding: var(--sectionPadding);
  }
  #ABoutRPsbs-328 .cs-container,
  #AboutRPsbsr-328 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #ABoutRPsbs-328 .cs-content,
  #AboutRPsbsr-328 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #ABoutRPsbs-328 .cs-text:last-of-type,
  #AboutRPsbsr-328 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #ABoutRPsbs-328 .cs-quote,
  #AboutRPsbsr-328 .cs-quote {
    margin: 0 0 2rem 0;
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    background-color: #f7f7f7;
    border-radius: 1rem;
    position: relative;
  }
  #ABoutRPsbs-328 .cs-quote-text,
  #AboutRPsbsr-328 .cs-quote-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: #767676;
    display: block;
  }
  #ABoutRPsbs-328 .cs-name,
  #AboutRPsbsr-328 .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }
  #ABoutRPsbs-328 .cs-job,
  #AboutRPsbsr-328 .cs-job {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: #767676;
    display: block;
  }
  #ABoutRPsbs-328 .cs-quote-icon,
  #AboutRPsbsr-328 .cs-quote-icon {
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    height: auto;
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
  }
  #ABoutRPsbs-328 .cs-image-group,
  #AboutRPsbsr-328 .cs-image-group {
    /* scaling the font size with the view width */
    font-size: min(2.31vw, 0.7em);
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    height: 39.75em;
    position: relative;
  }
  #ABoutRPsbs-328 .cs-picture,
  #AboutRPsbsr-328 .cs-picture {
    border-radius: 1.5em;
    /* clips img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
  }
  #ABoutRPsbs-328 .cs-picture img,
  #AboutRPsbsr-328 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #ABoutRPsbs-328 .cs-picture1,
  #AboutRPsbsr-328 .cs-picture1 {
    width: 32.625em;
    height: 36.3125em;
    left: 0;
    top: 0;
  }
  #ABoutRPsbs-328 .cs-picture2,
  #AboutRPsbsr-328 .cs-picture2 {
    width: 25.875em;
    height: 25em;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #ffffff;
    right: 0;
    bottom: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #ABoutRPsbs-328 .cs-container,
  #AboutRPsbsr-328 .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #ABoutRPsbs-328 .cs-image-group,
  #AboutRPsbsr-328 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  #ABoutRPsbs-328 .cs-content,
  #AboutRPsbsr-328 .cs-content {
    margin: 0;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-499 {
    /* we use margin here instead of padding because we want to create the space OUTSIDE the section.  The overflow on the section clips the boxes we made to make the slanted designs, so we need to push from the outside of the section with margin to create space between it and the next section.  If the section above this Stitch has a white background, add margin-top: 0. If it has a white section below it, add margin-bottom: 0. This will allow more proper spacing and not have too much empty space.  If both sections above and below this Stitch have white backgrounds, you can just remove this margin all together */
    margin: var(--sectionPadding);
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
    /* prevents overflow from the slant shape */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-499:before {
    /* section background */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbs-499 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    /* 60px - 100px top and bottom */
    padding: clamp(3.75rem, 6.82vw, 6.25rem) 0;
    /* maintains proportional margin top as screen size grows */
    margin-top: 56vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    /* places it on top of the cs-background */
    z-index: 10;
  }
  #sbs-499 .cs-container:before {
    /* section slant on mobile */
    content: "";
    width: 62.5rem;
    height: 125rem;
    background: var(--primary);
    /* prevents mouse from interacting with it */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    z-index: -1;
    display: block;
    top: -28.75rem;
    /* these last two center it horizontally and rotate -65deg */
    left: 50%;
    transform: translateX(-50%) rotate(65deg);
  }
  #sbs-499 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: right;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-end;
  }

  #sbs-499 .cs-topper,
  #sbs-499 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #sbs-499 .cs-title {
    /* changes to 100% at tablet */
    max-width: 80%;
  }
  #sbs-499 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #sbs-499 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-499 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #1a1a1a;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #sbs-499 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #sbs-499 .cs-button-solid:hover {
    color: #fff;
  }
  #sbs-499 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-499 .cs-background {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-499 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-499:before {
    /* remove the pseudo for the section background */
    display: none;
  }
  #sbs-499 .cs-background {
    /* reset height to let top and bottom properties create the height */
    height: auto;
    aspect-ratio: initial;
    position: absolute;
    /* creates the gap between the image and the blue section */
    top: 3.75rem;
    bottom: 0;
  }
  #sbs-499 .cs-background img {
    width: 60%;
    object-position: 80% top;
  }
  #sbs-499 .cs-container {
    margin-top: 0;
  }
  #sbs-499 .cs-container:before {
    /* make really tall so it always covers top to bottom, even when you add more list items */
    height: 250rem;
    /* make really really wide so it covers the left side at large scree sizes */
    width: 250rem;
    /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
    margin-left: -68.75rem;
    top: 50%;
    left: auto;
    /* pushes the left edge of the element to the center line of the parent */
    left: 50%;
    transform: rotate(35deg) translateY(-50%);
  }
  #sbs-499 .cs-content {
    width: 50%;
  }
  #sbs-499 .cs-title {
    max-width: 100%;
  }
}

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1014 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #sbs-1014 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-1014 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-1014 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1014 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1014 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1014 .cs-quote {
    margin: 0 0 2rem 0;
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    background-color: #1a1a1a;
    position: relative;
  }
  #sbs-1014 .cs-quote-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #sbs-1014 .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0.25rem;
    color: var(--primary);
    display: block;
  }
  #sbs-1014 .cs-job {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #sbs-1014 .cs-quote-icon {
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    height: auto;
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
  }
  #sbs-1014 .cs-image-group {
    /* scaling the font size with the view width */
    font-size: min(2.31vw, 0.7em);
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    height: 39.75em;
    position: relative;
  }
  #sbs-1014 .cs-picture {
    position: absolute;
    display: block;
  }
  #sbs-1014 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbs-1014 .cs-picture1 {
    width: 32.625em;
    height: 36.3125em;
    left: 0;
    top: 0;
  }
  #sbs-1014 .cs-picture2 {
    width: 25.875em;
    height: 25em;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #fff;
    right: 0;
    bottom: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1014 .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #sbs-1014 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  #sbs-1014 .cs-content {
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-1014 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-1014 .cs-image-group:before,
  body.dark-mode #sbs-1014 .cs-image-group:after {
    background: var(--accent);
  }
  body.dark-mode #sbs-1014 .cs-picture2 {
    background-color: var(--dark);
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid var(--dark);
  }
  body.dark-mode #sbs-1014 .cs-title,
  body.dark-mode #sbs-1014 .cs-text,
  body.dark-mode #sbs-1014 .cs-h3,
  body.dark-mode #sbs-1014 .cs-quote-text,
  body.dark-mode #sbs-1014 .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-1014 .cs-quote {
    background-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #sbs-1014 .cs-job {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #sbs-1014 .cs-quote-icon {
    opacity: 0.2;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-8 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #stats-8 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #stats-8 .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;
  }

  #stats-8 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #stats-8 .cs-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #stats-8 .cs-card-group {
    width: 100%;
    /* changes to 100% at in-between */
    max-width: 31.25rem;
    padding: 0 1.25rem;
    /* 40px - 68px */
    padding-top: clamp(2.5rem, 5.7vw, 4.25rem);
    /* 48px - 80px */
    padding-bottom: clamp(3rem, 6.5vw, 5rem);
    margin: 0;
    background: #fff;
    border-top: 8px solid var(--primaryLight);
    border-radius: 0.3125rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.4375rem;
    box-shadow: 0 1.25rem 2.5rem 0 rgba(0, 0, 0, 0.05);
    /* prevents padding from adding to the width of the container */
    box-sizing: border-box;
  }
  #stats-8 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
  }
  #stats-8 .cs-number {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 4.7vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    /* 4px - 8px */
    margin-bottom: clamp(0.25rem, 0.78vw, 0.5rem);
    color: var(--primary);
    display: block;
  }
  #stats-8 .cs-stat-text {
    /* 16px - 25px */
    font-size: clamp(1rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    color: #000;
  }
  #stats-8 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #stats-8 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #stats-8 .cs-button-solid:hover:before {
    width: 100%;
  }
  #stats-8 .cs-background {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 65%;
    z-index: -1;
  }
  #stats-8 .cs-background:before {
    /* Overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #stats-8 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* In-between - 500px */
@media only screen and (min-width: 31.25rem) {
  #stats-8:before {
    height: 37.5%;
  }
  #stats-8 .cs-card-group {
    max-width: 100%;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    column-gap: 2.1875rem;
  }
  #stats-8 .cs-item {
    /* reset width */
    width: auto;
  }
}
/* Big Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
  #stats-8 .cs-background {
    background: url("https://images.unsplash.com/photo-1649777882133-525e923fd5d7?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  #stats-8 .cs-background img {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #stats-8 {
    /* Dark Mode Styles */
    background-color: var(--dark);
  }
  body.dark-mode #stats-8:before {
    background: var(--accent);
  }
  body.dark-mode #stats-8 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #stats-8 .cs-number,
  body.dark-mode #stats-8 .cs-stat-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #stats-8 .cs-card-group {
    background-color: var(--medium);
  }
}

/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #cta {
    position: relative;
    padding: 3.125rem 0;
  }
  #cta:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta .container {
    text-align: center;
  }
  #cta picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #cta .title {
    font-weight: 900;
    font-size: min(9vw, 3rem);
    line-height: 1.20833333;
    color: #fff;
    position: relative;
    margin-bottom: 2.25rem;
    text-align: center;
  }
  #cta p {
    color: #fff;
    text-align: center;
    opacity: 1;
    margin: auto;
    margin-bottom: 2.25rem;
    width: 96%;
    max-width: 37.375rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #cta {
    padding: 10.5rem 0;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    margin-top: 6.25rem;
  }
  #cta:before {
    display: none;
  }
  #cta:after {
    content: "";
    position: absolute;
    display: block;
    height: 69.25rem;
    width: 125rem;
    background: url("/assets/svgs/cta-squares.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -3;
  }
  #cta .container {
    width: 90.0625%;
    margin: auto;
  }
  #cta picture {
    width: 90.0625%;
    left: 50%;
    transform: translateX(-50%);
  }
  #cta picture:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #cta:after {
    display: none;
  }
}