:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #0282CA;
  --primaryDark: #00456a;
  --secondary: #F1F1F1;
  --secondaryLight: #ffba43;
  --tertiary: #363333;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1.125rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--secondaryLight);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-topper-light {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 55rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }

  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }

  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }

  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }

  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }

  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #cs-navigation .cs-logo {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }

  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }

  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }

  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }

  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }

  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }

  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }

  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }

  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }

  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }

  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: scroll;
  }

  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    transition: transform 0.6s, opacity 0.9s;
  }

  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }

  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }

  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }

  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }

  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }

  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }

  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }

  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }

  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }

  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }

  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }

  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }

  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }

  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }

  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }

  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }

  #cs-navigation .cs-button-solid {
    display: none;
  }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }

  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }

  #cs-navigation .cs-toggle {
    display: none;
  }

  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 4.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }

  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }

  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }

  #cs-navigation .cs-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }

  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1.25rem);
    font-weight: 700;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }

  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }

  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }

  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 3px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }

  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    line-height: clamp(2.25rem, 5.5vw, 3rem);
    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.125rem 1rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 2rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: all 0.4s;
  }

  #cs-navigation .cs-button-solid:hover {
    background-color: var(--primaryDark);
  }
}

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1856 {
    /* 200px - 300px - leaving extra space for the navigation */
    padding: clamp(12.5rem, 25.95vw, 18.75em) 1rem;
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  #hero-1856 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
  }

  #hero-1856 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 50.875rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }

  #hero-1856 .cs-title {
    /* 49px - 84px */
    font-size: clamp(3.0625rem, 6vw, 5.25rem);
    max-width: 100%;
    letter-spacing: -2px;
  }

  #hero-1856 .cs-title,
  #hero-1856 .cs-text {
    text-align: left;
    color: var(--bodyTextColorWhite);
  }

  #hero-1856 .cs-text {
    margin-bottom: 2rem;
  }

  #hero-1856 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.25rem, 5.5vw, 3rem);
    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.125rem 1rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border-radius: 2rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: all 0.4s;
  }

  #hero-1856 .cs-button-solid:hover {
    background-color: var(--primaryDark);
  }

  #hero-1856 .cs-content-graphic {
    height: 305%;
    max-height: 81.25rem;
    filter: brightness(60%);
    width: auto;
    position: absolute;
    top: 56%;
    right: 0;
    left: auto;
    z-index: -1;
    transform: translateY(-50%);
    z-index: -3;
  }

  #hero-1856 .cs-graphic {
    width: 100%;
    min-width: 120rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: -1px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
  }

  #hero-1856 .cs-graphic-dark {
    display: none;
  }

  #hero-1856 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    /* Overlay on the background image that gets removed at tablet+, in favour of the svg graphic */
  }

  #hero-1856 .cs-background:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #hero-1856 .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-1856 .cs-background::before {
    content: none;
  }
}

/* Desktop Parallax - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1856 .cs-background {
    background: url("assets/faghani.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  #hero-1856 .cs-background img {
    display: none;
  }
}

/* Large Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #hero-1856 {
    /* this ties the padding bottom value to the size of the screen width. The wider the image gets the taller it gets, meaning it will get closer and closer to the content. This makes the padding bottom value grow with the screen size so it accounts for the growing height of the svg graphic getting taller */
    padding-bottom: 14vw;
  }
}

/*-- -------------------------- -->
<---           Video            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #video-1314 .cs-big-link {
    width: 100%;
    /* 320px - 750px */
    height: clamp(20rem, 65vw, 46.875rem);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  #video-1314 .cs-big-link:hover .cs-background img {
    transform: scale(1.1);
    opacity: 0.5;
  }

  #video-1314 .cs-background {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    /* clips the img from overflowing the container on hover */
    overflow: hidden;
    display: block;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #video-1314 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.64;
    object-fit: cover;
    z-index: -1;
    transition:
      transform 0.9s,
      opacity 0.3s;
  }

  #video-1314 .cs-picture {
    /* 60px - 100px */
    width: clamp(3.75rem, 11vw, 6.25rem);
    height: clamp(3.75rem, 11vw, 6.25rem);
    border-radius: 50%;
    border: 2px solid #bababa;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 10;
    transition:
      transform 0.3s,
      box-shadow 0.3s;
  }

  #video-1314 .cs-picture:hover {
    transform: scale(1.1);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 29px 0px;
  }

  #video-1314 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }

  #video-1314 .cs-background iframe {
    height: 400px;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #video-1314 .cs-background iframe {
    height: 750px;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1301 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
    background: linear-gradient(to right, var(--primary), var(--primaryDark));
  }

  #services-1301 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }

  #services-1301 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }

  #services-1301 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #services-1301 .cs-title {
    max-width: 22ch;
    color: #fff;
  }

  #services-1301 .cs-text {
    color: #fff;
  }

  #services-1301 .cs-card-group {
    width: 100%;
    max-width: 80rem;
    margin: 0;
    padding: 0 1rem;
    box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    display: grid;
    column-gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    z-index: 15;
  }

  #services-1301 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    background-color: var(--tertiary);
    box-sizing: border-box;
    grid-column: span 12;
    margin-bottom: 1rem;
    border-radius: 2rem;
    transition:
      background-color 0.3s,
      border-color 0.3s;
  }

  #services-1301 .cs-link {
    text-decoration: none;
    /* 24px - 60px top & Bottom */
    /* 24px - 16px top & Bottom */
    padding: clamp(1.5rem, 5.3vw, 3.75rem) clamp(1rem, 2.7vw, 2.5rem);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }

  #services-1301 .cs-icon {
    /* 32px - 40px */
    height: clamp(2rem, 4vw, 2.5rem);
    width: auto;
    margin: 0 0 1rem 0;
  }

  #services-1301 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    text-align: inherit;
    line-height: 1.2em;
    margin: 0 0 0.75rem 0;
    color: #fff;
    transition: color 0.3s;
  }

  #services-1301 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    margin: 0;
    opacity: 0.9;
    color: var(--bodyTextColorWhite);
    transition:
      color 0.3s,
      opacity 0.3s;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1301 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }

  #services-1301 .cs-title {
    margin: 0;
  }

  #services-1301 .cs-flex-group {
    width: 50%;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #services-1301 .cs-item {
    grid-column: span 6;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1301 .cs-card-group {
    padding: 0;
  }

  #services-1301 .cs-item {
    border-radius: 2rem;
  }

  #services-1301 .cs-item:hover {
    background-color: var(--headerColor);
    border-color: #1a1a1a;
  }

  #services-1301 .cs-item:hover .cs-h3,
  #services-1301 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1716 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  #gallery-1716 .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-1716 .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;
  }

  #gallery-1716 .cs-text {
    margin-bottom: 1rem;
  }

  #gallery-1716 .cs-text:last-of-type {
    /* 32px - 64px */
    margin-bottom: clamp(2rem, 7vw, 4rem);
  }

  #gallery-1716 .cs-text:last-of-type:before {
    /* colored overlay rectangle - positioned absolute to the section tag because it is the nearest parent with a decalred position relative */
    content: '';
    width: 100%;
    height: 80%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  #gallery-1716 .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);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }

  #gallery-1716 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }

  #gallery-1716 .cs-button-solid:hover:before {
    width: 100%;
  }

  #gallery-1716 .cs-gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* sends it to the top in the 1st position */
    order: -1;
  }

  #gallery-1716 .cs-picture {
    width: 100%;
    /* changes at tablet */
    height: 100vw;
    max-height: 25rem;
    display: block;
    position: relative;
    z-index: 1;
    grid-column: span 12;
    margin-bottom: 1rem;
  }

  #gallery-1716 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2rem;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-1716 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }

  #gallery-1716 .cs-content {
    max-width: 19rem;
    /* 32px - 64px, ensures theres always a gap at the bottom to space out the content from the bottom of the container and let the colored rectangle shape be a little bigger and take up more space */
    padding-bottom: clamp(2rem, 7vw, 4rem);
  }

  #gallery-1716 .cs-text:last-of-type {
    /* add position relative so the colored rectangle is now absolutely positioned to the cs-text parent. We also only want these styles on the last paragraph tag */
    position: relative;
    z-index: 1;
  }

  #gallery-1716 .cs-text:last-of-type:before {
    width: 250vw;
    height: 100vw;
    top: calc(100% + 1.8rem);
    left: 50%;
    transform: translateX(-50%);
  }

  #gallery-1716 .cs-gallery {
    height: auto;
  }

  #gallery-1716 .cs-picture {
    height: 100%;
    max-height: 100%;
    /* 280px - 420px */
    min-height: clamp(16.5rem, 37vw, 21.25rem);
    grid-column: span 4;
  }

  #gallery-1716 .cs-picture img {
    border-radius: unset;
  }

  #gallery-1716 .cs-picture:nth-of-type(1) img {
    border-radius: 2rem 0 0 2rem;
  }

  #gallery-1716 .cs-picture:nth-of-type(3) img {
    border-radius: 0 2rem 2rem 0;
  }
}


/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile */
@media only screen and (min-width: 0rem) {
  #pricing-357 {
    padding: var(--sectionPadding);
    background-color: #e0e0e0;
  }

  #pricing-357 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 6vw, 2rem);
  }

  #pricing-357 .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;
  }

  #pricing-357 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }

  #pricing-357 .cs-item {
    list-style: none;
    /* 20px - 32px top & bottom */
    /* 16px - 32px left & right */
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.4vw, 2rem);
    width: 100%;
    max-width: 25.8125rem;
    border-radius: 1rem;
    background: var(--tertiary);
    border: 1px solid #e8e8e8;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }

  #pricing-357 .cs-item:nth-of-type(2) .cs-option2-text,
  #pricing-357 .cs-item:nth-of-type(2) .cs-option1-text {
    transition-delay: 0.1s;
  }

  #pricing-357 .cs-item:nth-of-type(3) .cs-option2-text,
  #pricing-357 .cs-item:nth-of-type(3) .cs-option1-text {
    transition-delay: 0.2s;
  }

  #pricing-357 .cs-popular {
    background: var(--primary);
    position: relative;
    /* clips the popular tag */
    overflow: hidden;
    /* send to the top */
    order: -1;
  }

  #pricing-357 .cs-popular:before {
    /* Most Popular Tag */
    content: "Popular";
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.8125em;
    font-weight: 700;
    width: 10.625rem;
    padding: 0 0.75rem;
    color: var(--bodyTextColorWhite);
    background-color: var(--secondary);
    position: absolute;
    display: block;
    top: 1.25rem;
    right: -3.75rem;
    transform: rotate(42deg);
  }

  #pricing-357 .cs-popular .cs-h3,
  #pricing-357 .cs-popular .cs-item-text,
  #pricing-357 .cs-popular .cs-price,
  #pricing-357 .cs-popular .cs-included,
  #pricing-357 .cs-popular .cs-li,
  #pricing-357 .cs-popular .cs-small {
    color: var(--bodyTextColorWhite);
  }

  #pricing-357 .cs-popular .cs-button-solid {
    background-color: #fff;
    color: var(--primary);
    transition: color 0.3s;
  }

  #pricing-357 .cs-popular .cs-button-solid:before {
    background-color: var(--secondary);
  }

  #pricing-357 .cs-popular .cs-button-solid:hover {
    color: #fff;
  }

  #pricing-357 .cs-popular .cs-li-img {
    /* turns the check mark white */
    filter: brightness(900%);
  }

  #pricing-357 .cs-h3 {
    font-size: clamp(1rem, 2vw, 1.325rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    padding: 0;
    color: var(--headerColor);
    background-color: var(--secondary);
    border-radius: 0.5rem;
    padding: 0.325rem 0.5rem;
  }

  #pricing-357 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    padding: 0;
    color: var(--bodyTextColorWhite);
    min-height: 5rem;
  }

  #pricing-357 .cs-option-group {
    position: relative;
  }

  #pricing-357 .cs-option-group:after {
    /* top right box */
    content: "";
    width: 100%;
    height: 1px;
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
    background: linear-gradient(90deg,
        rgba(232, 232, 232, 0.2) 0%,
        #e8e8e8 53.78%,
        rgba(232, 232, 232, 0.2) 100%);
    opacity: 1;
    position: relative;
    display: block;
  }

  #pricing-357 .cs-price {
    font-size: 3.0625rem;
    line-height: 1.2em;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--headerColor);
    /* spans are inline, need to add block for margin to work */
    display: block;
  }

  #pricing-357 .cs-small {
    font-size: 0.875rem;
    font-weight: 400;
    color: #4e4b66;
  }

  #pricing-357 .cs-included {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 24px */
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    color: var(--headerColor);
    display: block;
  }

  #pricing-357 .cs-ul {
    padding: 0;
    margin: 0;
  }

  #pricing-357 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #pricing-357 .cs-li:last-of-type {
    margin-bottom: 0;
  }

  #pricing-357 .cs-disabled {
    /* fades out list items that are disabled from the price tier */
    filter: grayscale(1);
    opacity: 0.3;
  }

  #pricing-357 .cs-li-img {
    width: 1.25rem;
    height: auto;
    margin-top: 0.1875rem;
    margin-right: 0.5rem;
  }

  #pricing-357 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.25rem, 5.5vw, 3rem);
    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;
  }

  #pricing-357 .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;
  }

  #pricing-357 .cs-button-solid:hover:before {
    width: 100%;
  }

  #pricing-357 .cs-button-solid {
    /* cs-button-solid override */
    width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* Tablet 768px */
@media only screen and (min-width: 48rem) {
  #pricing-357 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  #pricing-357 .cs-item {
    width: 100%;
    /* ensures they stay the same height if you add more content */
    align-self: stretch;
  }

  #pricing-357 .cs-popular {
    /* send back to its original order */
    order: unset;
  }

  #pricing-357 #cs-option2-357:before {
    top: -0.625rem;
  }

  #pricing-357 #cs-option2-357:after {
    top: -2.1875rem;
    right: -6.25rem;
  }
}

/*-- -------------------------- -->
<---         Why Choose         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-892 {
    /* Centers Button */
    text-align: center;
    padding: var(--sectionPadding);
    /* prevents the arrow from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: linear-gradient(to right, var(--primary), var(--primaryDark));
  }

  #why-choose-892 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }

  #why-choose-892 .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;
  }

  #why-choose-892 .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;
  }

  #why-choose-892 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--secondaryLight);
    margin-bottom: 0.25rem;
    display: block;
  }

  #why-choose-892 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: #fff;
    position: relative;
  }

  #why-choose-892 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }

  #why-choose-892 .cs-text {
    max-width: 62.5rem;
  }

  #why-choose-892 .cs-text .highlight {
    position: relative;
    display: inline-block;
  }

  #why-choose-892 .cs-text .highlight:before {
    content: ' ';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #CD410C;
    opacity: 0.8;
    top: 3px;
    left: 5px;
    border-radius: 10% 25% 10% 24%;
    padding: 10px 3px 3px 10px;
    z-index: -1;
  }

  #why-choose-892 .cs-button-solid {
    font-size: 1rem;
    line-height: clamp(2.25rem, 5.5vw, 3rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0.125rem 1rem;
    background-color: var(--secondaryLight);
    border-radius: 2rem;
    border: 4px solid var(--secondaryLight);
    color: var(--headerColor);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: all 0.4s;
  }

  #why-choose-892 .cs-button-solid:hover {
    background-color: var(--tertiary);
    border: 4px solid var(--tertiary);
    color: var(--bodyTextColorWhite);
  }

  #why-choose-892 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }

  #why-choose-892 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    /* 20px - 32px */
    padding: clamp(1.25rem, 2.3vw, 2rem);
    background-color: var(--tertiary);
    border-radius: 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column: span 6;
    position: relative;
    z-index: 1;
  }

  #why-choose-892 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.25rem 0;
    display: block;
  }

  #why-choose-892 .cs-h3 {
    font-size: clamp(1rem, 2vw, 1.325rem);
    line-height: 1.5em;
    margin: 0 0 0.75rem 0;
    color: #fff;
    transition: color 0.3s;
  }

  #why-choose-892 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
    transition: color 0.3s;
  }

  #why-choose-892 .cs-floater {
    width: 21.9375rem;
    height: auto;
    display: none;
    position: absolute;
    top: -13.75rem;
    right: -3.75rem;
    transform: rotate(-66deg);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-892 .cs-container {
    max-width: 80rem;
  }

  #why-choose-892 .cs-item {
    grid-column: span 2;
  }

  #why-choose-892 .cs-floater {
    display: block;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-884 {
    padding: var(--sectionPadding);
    /* clips floating arrow from overflowing */
    overflow: hidden;
    background-color: #e0e0e0;
  }

  #services-884 .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);
  }

  #services-884 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 50.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #services-884 .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }

  #services-884 .cs-item {
    list-style: none;
    text-align: left;
    margin: 0;
    /* 24px - 32px left & right */
    padding: 2rem clamp(1.5rem, 2vw, 2rem);
    border-radius: 1rem;
    background-color: var(--tertiary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: span 4;
  }

  #services-884 .cs-h3 {
    font-size: clamp(1rem, 2vw, 1.325rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    background-color: var(--secondary);
    border-radius: 0.5rem;
    padding: 0.325rem 0.5rem;
  }

  #services-884 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
  }

  #services-884 .cs-link {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: inherit;
    text-decoration: none;
    font-weight: 700;
    /* margin top auto pushes it down to the bottom of a flexbox so if the content is shorter than another cs-item, it will always be on the bottom */
    margin: auto 0 0 0;
    color: var(--secondaryLight);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
  }

  #services-884 .cs-link:hover .cs-icon {
    transform: translateX(0.625rem);
  }

  #services-884 .cs-icon {
    width: 1.5rem;
    height: auto;
    transition: transform 0.3s;
  }

  #services-884 .cs-floater {
    width: 21.9375rem;
    height: auto;
    display: none;
    position: absolute;
    top: -6.25rem;
    left: -1.875rem;
    transform: rotate(66deg) scaleX(-1);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-884 .cs-container {
    max-width: 80rem;
  }

  #services-884 .cs-item {
    grid-column: span 2;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-884 .cs-item {
    grid-column: span 1;
  }

  #services-884 .cs-floater {
    display: block;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1672 {
    padding: var(--sectionPadding);
    background-color: #e0e0e0;
  }

  #reviews-1672 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 4.5vw, 4rem);
  }

  #reviews-1672 .cs-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #reviews-1672 .cs-title {
    margin: 0rem;
  }

  #reviews-1672 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }

  #reviews-1672 .cs-item {
    list-style: none;
    width: 100%;
    /* 20px - 40px top & bottom */
    /* 20px - 40px left & right */
    padding: clamp(1.25rem, 3.15vw, 2.5rem) clamp(1.25rem, 3.15vw, 2.5rem);
    background-color: var(--tertiary);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    /* 24px - 48px */
    gap: clamp(1.5rem, 4vw, 2rem);
    border-radius: 2rem;
  }

  #reviews-1672 .cs-flex-group {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #reviews-1672 .cs-profile {
    width: 3.25rem;
    height: auto;
    border-radius: 50%;
    position: relative;
    display: block;
  }

  #reviews-1672 .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-1672 .cs-name {
    /* 20px - 25px */
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--bodyTextColorWhite);
    display: block;
  }

  #reviews-1672 .cs-job {
    /* 14px - 16px */
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--secondaryLight);
    opacity: 0.8;
    display: block;
  }

  #reviews-1672 .wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #reviews-1672 .cs-item-stars {
    width: 6.75rem;
    height: auto;
  }

  #reviews-1672 .cs-review {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    z-index: 1;
  }

  #reviews-1672 .cs-quote {
    width: 5.375rem;
    height: auto;
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    z-index: 0;
  }

  #reviews-1672 .cs-button-solid {
    font-size: 1rem;
    line-height: clamp(2.25rem, 5.5vw, 3rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0.125rem 1rem;
    background-color: var(--primary);
    border-radius: 2rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: all 0.4s;
  }

  #reviews-1672 .cs-button-solid:hover {
    background-color: var(--primaryDark);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-1672 .cs-item {
    grid-column: span 4;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-315 {
    padding: var(--sectionPadding);
    background: linear-gradient(to right, var(--primary), var(--primaryDark));
  }

  #stats-315 .cs-card-group {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 37.5rem;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
  }

  #stats-315 .cs-item {
    list-style: none;
    /* set fixed width so they can all be aligned on the left */
    width: 14.6875rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  #stats-315 .cs-picture {
    width: 5rem;
    height: 5rem;
    /* 12px - 20px */
    margin-right: clamp(0.75rem, 3vw, 1.25rem);
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #stats-315 .cs-icon {
    width: 2.5rem;
    height: auto;
  }

  #stats-315 .cs-flex-group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }

  #stats-315 .cs-number {
    font-size: var(--headerFontSize);
    color: var(--bodyTextColorWhite);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0;
    display: block;
  }

  #stats-315 .cs-stat {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    font-weight: 700;
    display: block;
  }
}

/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #stats-315 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 2rem;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats-315 .cs-card-group {
    max-width: 80rem;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }
}

/*-- -------------------------- -->
<---      Contact Strip         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-strip-1111 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
    position: relative;
    z-index: 1;
  }

  #contact-strip-1111 .cs-stat-group {
    width: 100%;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* reduced to 24px at tablet */
    gap: 2.5rem;
  }

  #contact-strip-1111 .cs-item {
    list-style: none;
    width: 18.125rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  #contact-strip-1111 .cs-item:hover .cs-picture {
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: scale(1.1);
  }

  #contact-strip-1111 .cs-picture {
    /* 48px - 80px */
    width: clamp(3rem, 5.7vw, 5rem);
    height: clamp(3rem, 5.7vw, 5rem);
    /* 12px - 20px */
    margin-right: clamp(0.75rem, 1.5vw, 1.25rem);
    border-radius: 50%;
    border: 1px solid var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    transition:
      background-color 0.3s,
      box-shadow 0.3s,
      transform 0.6s;
  }

  #contact-strip-1111 .cs-flex-group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }

  #contact-strip-1111 .cs-icon {
    /* 20px - 40px */
    width: clamp(1.25rem, 2.5vw, 2.5rem);
    height: auto;
  }

  #contact-strip-1111 .cs-header {
    font-size: 1.25rem;
    color: var(--bodyTextColorWhite);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    display: block;
  }

  #contact-strip-1111 .cs-address,
  #contact-strip-1111 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    display: block;
  }

  #contact-strip-1111 .cs-link:hover {
    text-decoration: underline;
  }

  #contact-strip-1111 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #contact-strip-1111 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.84;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #contact-strip-1111 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #contact-strip-1111 .cs-stat-group {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    gap: 1.5rem;
  }

  #contact-strip-1111 .cs-item {
    width: auto;
  }
}

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-403 {
    padding: var(--sectionPadding);
    position: relative;
  }

  #cta-403 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }

  #cta-403 .cs-background {
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #cta-403 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: var(--primary);
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #cta-403 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    /* positions the image inside the parent */
    object-position: 0% 30%;
  }

  #cta-403 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }

  #cta-403 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 47.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #cta-403 .cs-title,
  #cta-403 .cs-text {
    color: var(--bodyTextColorWhite);
  }

  #cta-403 .cs-text {
    opacity: 0.8;
    margin-bottom: 1rem;
  }

  #cta-403 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }

  #cta-403 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.25rem, 5.5vw, 3rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--secondaryLight);
    border: 2px solid var(--secondaryLight);
    color: var(--headerColor);
    border-radius: 2rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: all 0.4s;
  }

  #cta-403 .cs-button-solid:hover {
    background-color: var(--tertiary);
    border: 2px solid var(--tertiary);
    color: var(--bodyTextColorWhite);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-403 .cs-background {
    /* clips the black slant so it doesnt overflow */
    overflow: hidden;
  }

  #cta-403 .cs-background:before {
    width: 40%;
    opacity: 1;
  }

  #cta-403 .cs-background:after {
    /* black slant */
    content: "";
    width: 31.25rem;
    height: 93.75rem;
    margin-right: -3.125rem;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 50%;
    transform: rotate(10deg) translateY(-50%);
  }

  #cta-403 .cs-background img {
    width: 45%;
    object-position: right;
    left: auto;
    right: 0;
  }

  #cta-403 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }

  #cta-403 .cs-content {
    text-align: left;
    align-items: flex-start;
  }

  #cta-403 .cs-text,
  #cta-403 .cs-title {
    margin-left: 0;
  }
}

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-274 {
    padding: var(--sectionPadding);
    background-color: #e0e0e0;
  }

  #cs-footer-274 .cs-container {
    width: 100%;
    /* reset on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 5.5rem;
    row-gap: 2rem;
  }

  #cs-footer-274 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }

  #cs-footer-274 .cs-logo-group {
    /* 44px - 52px */
    margin-bottom: clamp(2.75rem, 6.8vw, 3.25rem);
  }

  #cs-footer-274 .cs-logo {
    /* 210px - 240px */
    width: clamp(13.125rem, 8vw, 15rem);
    height: auto;
    display: block;
  }

  #cs-footer-274 .cs-logo-img {
    width: 100%;
    height: auto;
  }

  #cs-footer-274 .cs-social {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75rem;
    position: absolute;
    top: 0;
    right: 0;
  }

  #cs-footer-274 .cs-social-link {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #4e4b66;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition:
      transform 0.3s,
      background-color 0.3s;
  }

  #cs-footer-274 .cs-social-link:hover {
    background-color: var(--primary);
    transform: translateY(-0.1875rem);
  }

  #cs-footer-274 .cs-social-img {
    height: 0.8125rem;
    width: auto;
    display: block;
  }

  #cs-footer-274 .cs-nav {
    padding: 0;
    margin: 0;
  }

  #cs-footer-274 .cs-nav-li {
    list-style: none;
    margin: 0;
    color: var(--bodyTextColor);
  }

  #cs-footer-274 .cs-header {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 20px */
    margin-bottom: clamp(1rem, 2.7vw, 1.25rem);
    color: var(--bodyTextColor);
    position: relative;
    display: block;
  }

  #cs-footer-274 .cs-nav-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    position: relative;
  }

  #cs-footer-274 .cs-nav-link:before {
    /* underline */
    content: "";
    width: 0%;
    height: 0.125rem;
    background: var(--bodyTextColor);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }

  #cs-footer-274 .cs-nav-link:hover:before {
    width: 100%;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-274 .cs-container {
    max-width: 80rem;
    row-gap: 0;
    /* 44px - 88px */
    column-gap: clamp(2.75rem, calc(6%), 5.5rem);
  }

  #cs-footer-274 .cs-logo-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  #cs-footer-274 .cs-social {
    flex-direction: row;
    position: relative;
    top: auto;
    right: auto;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-274 .cs-container {
    justify-content: flex-end;
  }

  #cs-footer-274 .cs-logo-group {
    width: auto;
    margin: 0;
    /* pushes the rest of the content to the right in a flexbox */
    margin-right: auto;
    flex-direction: column;
  }

  #cs-footer-274 .cs-logo-img {
    margin-bottom: 2.75rem;
  }

  #cs-footer-274 .cs-nav {
    margin-top: 0.75rem;
  }
}