: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: #721111;
    --primaryLight: #e5cc94;
    --secondary: #e5cc94;
    --secondaryLight: #e5cc94;
    --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: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *: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(--secondary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    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: 13.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, 1rem);
      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: 2px;
      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;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      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;
      color: #fff;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #cs-navigation .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;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
  }
  /*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #landing {
      position: relative;
  }
  #landing .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #landing .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 32.625rem;
      /* added section padding to cs-content so cs-background can be full width, removed at desktop */
      /* 120px - 300px top */
      padding: clamp(7.5rem, 20.82vw, 18.75rem) 1rem 0;
      padding-bottom: 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }
  #landing .cs-topper {
      font-size: var(--topperFontSize);
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: inherit;
      letter-spacing: 0.1em;
      font-weight: 700;
      /* 8px - 16px */
      margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
      color: var(--primary);
      display: block;
  }
  #landing .cs-title {
      /* 39px - 61px */
      font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
      font-weight: 900;
      line-height: 1.2em;
      text-align: inherit;
      /* 17 characters including spaces */
      max-width: 17ch;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
      position: relative;
  }
  #landing .cs-color {
      color: var(--primary);
  }
  #landing .cs-text {
      /* 16px - 20px */
      font-size: clamp(1rem, 1.5vw, 1.25rem);
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      max-width: 40.625rem;
      /* 32px - 40px */
      margin: 0 0 clamp(2rem, 5vw, 2.5rem) 0;
      color: var(--bodyTextColor);
  }
  #landing .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: 15.625rem;
      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;
  }
  #landing .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;
  }
  #landing .cs-button-solid:hover:before {
      width: 100%;
  }
  #landing .cs-background {
      width: 100%;
      height: 106vw;
      max-height: 31.25rem;
      display: block;
      position: relative;
  }
  #landing .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
  #landing .cs-graphic {
      /* 154px - 374px */
      width: clamp(9.625rem, 33vw, 23.375rem);
      height: auto;
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #landing {
      /* 120px - 250px top */
      /* 60px - 200px  bottom */
      padding: clamp(7.5rem, 23.82vw, 15.625rem) 1rem
          clamp(3.75rem, 15.82vw, 12.5rem);
  }
  #landing .cs-container {
      flex-direction: row;
      justify-content: flex-start;
  }
  #landing .cs-content {
      text-align: left;
      /* removed padding and put it on the section */
      width: 45%;
      padding: 0;
      align-items: flex-start;
  }
  #landing .cs-background {
      width: 50%;
      height: auto;
      max-height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  /* #services {
    padding: var(--sectionPadding);
  } */
  #services .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375rem;
    margin: auto;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #services .cs-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
    z-index: 1;
  }
  #services .cs-content-wrapper:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    padding: 3rem clamp(1rem, 4vw, 4rem) 0;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #services .cs-content-picture {
    width: 100%;
    max-width: 25rem;
    height: auto;
  }
  #services .cs-content-picture img {
    width: 100%;
    height: auto;
    display: block;
  }
  #services .cs-title {
    max-width: 20ch;
  }
  #services .cs-text {
    max-width: 40rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
  }
  #services .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #services .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;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #services .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;
  }
  #services .cs-button-solid:hover:before {
    width: 100%;
  }
  #services .cs-card-wrapper {
    /* 32px - 48px top & Bottom */
    /* 16px - 48px left & right */
    padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 4vw, 4rem);
  }
  #services .cs-header {
    font-size: 13/16rem;
    text-transform: uppercase;
    line-height: 1.2em;
    font-weight: 700;
    /* 16px - 20px */
    margin: 0 0 clamp(1rem, 3vw, 1.25rem);
    color: var(--primary);
    display: block;
  }
  #services .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
    row-gap: 2rem;
  }
  #services .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
  }
  #services .cs-item:hover .cs-picture img {
    opacity: 0.5;
    transform: scale(1.2);
  }
  #services .cs-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #services .cs-picture {
    width: 100%;
    height: 56vw;
    max-height: 19.25rem;
    margin-bottom: 1.5rem;
    background-color: #000;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #services .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #services .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColor);
  }
  #services .cs-fake-link {
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    margin-top: auto;
    padding-bottom: 8px;
    color: var(--headerColor);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
  }
  #services .cs-fake-link:hover .cs-icon {
    transform: translateX(0.2rem) rotate(45deg);
  }
  #services .cs-fake-link:before {
    content: '';
    width: 100%;
    height: 1px;
    background: var(--headerColor);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #services .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services .cs-container {
    max-width: 90rem;
  }
  #services .cs-content-wrapper {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0;
  }
  #services .cs-content {
    padding-left: 0;
    padding-bottom: 3rem;
  }
  #services .cs-content-picture {
    order: -1;
  }
  #services .cs-item {
    grid-column: span 4;
  }
  #services .cs-picture {
    height: 26vw;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services .cs-container {
    flex-direction: row;
    align-items: stretch;
  }
  #services .cs-content-wrapper {
    max-width: 25.8125rem;
    height: auto;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }
  #services .cs-content {
    padding-left: 3rem;
  }
  #services .cs-content-picture {
    order: 1;
  }
}
/*-- -------------------------- -->
<---         CS-Content         -->
<--- -------------------------- -*/

/* you can place this CSS group in your global stylesheet that is loaded on every page of the site so all you need to do is copy and paste the HTML into any section and it will all work. Or piece it inside the media queries in whatever section you want to add it to. You can also remove the cs-topper, cs-title, and cs-text and if they aren't already in your global stylesheet you can paste them outside these media queries so all cs-topper, cs-title, and cs-text on your site will pull from 1 place. */

/* Mobile */
@media only screen and (min-width: 0rem) {
  #pricing1 {
      /* 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;
      padding-top: 5%;
  }
  #pricing1 .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(--primary);
      margin-bottom: 0.25rem;
      display: block;
  }
  #pricing1 .cs-title {
      font-size: var(--headerFontSize);
      font-weight: 900;
      line-height: 1.2em;
      text-align: inherit;
      max-width: 43.75rem;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
      position: relative;
  }
  #pricing1 .cs-text {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      max-width: 40.625rem;
      margin: 0;
      color: var(--bodyTextColor);
  }
}
                              
                                
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing2,
  #pricing3 {
      padding: var(--sectionPadding);
      padding-top: 3%;
  }
  #pricing2 .cs-container,
  #pricing3 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  #pricing2 .cs-content,
  #pricing3 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 46.125rem;
      /* 24px - 48px */
      padding: 3rem clamp(1.5rem, 3.5vw, 3rem);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      border: 1px solid #c7c7c7;
      border-top: none;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #pricing2 .cs-title,
  #pricing3 .cs-title {
      margin: 0;
      /* frees the :after element from the cs-title parent. It's now relative to the cs-content parent */
      display: contents;
  }
  #pricing2 .cs-title:after,
  #pricing3 .cs-title:after {
      /* underline */
      content: "";
      width: 100%;
      height: 1px;
      /* 20px - 32px */
      margin: clamp(1.25rem, 3vw, 2rem) 0;
      background: #c7c7c7;
      opacity: 1;
      position: relative;
      display: block;
  }
  #pricing2 .cs-menu,
  #pricing3 .cs-menu {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      column-gap: 1.25rem;
      /* 28px - 40px */
      row-gap: clamp(1.75rem, 3vw, 2.5rem);
  }
  #pricing2 .cs-menu-group,
  #pricing3 .cs-menu-group {
      width: 100%;
      max-width: 39.375rem;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* 28px - 40px */
      gap: clamp(1.75rem, 3vw, 2.5rem);
  }
  #pricing2 .cs-menu-item,
  #pricing3 .cs-menu-item {
      list-style: none;
      width: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0.5rem;
  }
  #pricing2 .cs-h3,
  #pricing3 .cs-h3 {
      width: 100%;
      margin: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      position: relative;
      z-index: 1;
  }
  #pricing2 .cs-h3:before,
  #pricing3 .cs-h3:before {
      /* grey line */
      content: "";
      width: 60%;
      height: 1px;
      background-image: linear-gradient(
          90deg,
          #c7c7c7,
          #c7c7c7 75%,
          transparent 75%,
          transparent 100%
      );
      background-size: 6px 6px;
      border: none;
      opacity: 1;
      display: block;
      order: 2;
      z-index: -1;
  }
  #pricing2 .cs-header,
  #pricing3 .cs-header {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.5625rem);
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      width: auto;
      max-width: 70%;
      color: var(--headerColor);
      display: block;
      flex: none;
  }
  #pricing2 .cs-price,
  #pricing3 .cs-price {
      /* 25px - 31px */
      font-size: clamp(1.6525rem, 2.5vw, 1.9375rem);
      line-height: 1.2em;
      font-weight: bold;
      color: var(--primary);
      order: 3;
  }
  #pricing2 .cs-menu-text,
  #pricing3 .cs-menu-text {
      /* 16px - 20px */
      font-size: clamp(1rem, 2vw, 1.25rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0;
      color: var(--bodyTextColor);
  }
  #pricing2 .cs-picture,
  #pricing3 .cs-picture {
      width: 100%;
      height: 72vw;
      display: block;
      /* sends it to the top */
      order: -1;
      position: relative;
  }
  #pricing2 .cs-picture img,
  #pricing3 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing2 .cs-container,
  #pricing3 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
  }
  #pricing2 .cs-content,
  #pricing3 .cs-content {
      width: 66%;
      border: 1px solid #c7c7c7;
      border-left: none;
      /* prevents flexbox from squishing it */
      flex: none;
  }
  #pricing2 .cs-menu-group,
  #pricing3 .cs-menu-group {
      width: 100%;
  }
  #pricing2 .cs-picture,
  #pricing3 .cs-picture {
      width: 100%;
      height: auto;
      max-width: 33.875rem;
      max-height: 1000%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing3 {
      background-color: #f7f7f7;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing3 .cs-content {
      border: 1px solid #c7c7c7;
      border-right: none;
  }
  #pricing3 .cs-picture {
      /* sends it to the right in the 2nd position */
      order: 2;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery {
    padding: var(--sectionPadding);
  }
  #gallery .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 8px - 20px */
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #gallery .cs-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #gallery .cs-text {
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6vw, 4rem);
  }
  #gallery .cs-cta {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    text-decoration: none;
    /* 16px - 20px */
    text-align: center;
    /* 141px - 224px */
    width: clamp(8.8125rem, 17vw, 14rem);
    height: clamp(8.8125rem, 17vw, 14rem);
    margin: 0 auto 0 0;
    /* 141px - 224px */
    /* copied the same height clamp and multiplied it by -.5 so the value is negtaive and half the vlaue of height so we cna make it overlap by 50% its height */
    margin-bottom: calc(clamp(8.8125rem, 17vw, 14rem)*-.5);
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    border: clamp(12px, 3vw, 20px) solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: flex-end;
    position: relative;
    z-index: 10;
    transition: background-color 0.3s;
  }
  #gallery .cs-cta:hover {
    background-color: #14142b;
  }
  #gallery .cs-cta:hover .cs-arrow {
    transform: translateX(3.75rem);
    opacity: 0;
  }
  #gallery .cs-cta:hover .cs-cta-text {
    transform: translateY(-0.9375rem);
  }
  #gallery .cs-arrow {
    width: 2.5rem;
    height: auto;
    transition: transform 0.3s, opacity 0.3s;
  }
  #gallery .cs-cta-text {
    transition: transform 0.3s;
  }
  #gallery .cs-content-picture {
    width: 100%;
    height: 19.375rem;
    border-radius: 0.75rem;
    /* clips the img corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #gallery .cs-content-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it behave like a background image */
    object-fit: cover;
  }
  #gallery .cs-grid {
    width: 100%;
    display: grid;
    /* 12 so we can have rows of 3 and rows with 2 50/50 images */
    grid-template-columns: repeat(12, 1fr);
    /* 8px - 20px */
    grid-gap: clamp(0.5rem, 2vw, 1.25rem);
    grid-template-rows: repeat(20, 1fr);
  }
  #gallery .cs-picture {
    border-radius: 0.5rem;
    /* clips corners of img tags */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #gallery .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes image behave like a background image */
    object-fit: cover;
  }
  #gallery .cs-picture1 {
    grid-column: 1 / 7;
    grid-row: 1 / 12;
  }
  #gallery .cs-picture2 {
    grid-column: 7 / 13;
    grid-row: 1 / 14;
  }
  #gallery .cs-picture3 {
    grid-column: 1 / 7;
    grid-row: 12 / 21;
  }
  #gallery .cs-picture4 {
    grid-column: 7 / 13;
    grid-row: 14 / 21;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
  #gallery .cs-content {
    max-width: 39.375rem;
    justify-content: flex-end;
  }
  #gallery .cs-text {
    width: 85%;
  }
  #gallery .cs-grid {
    width: 50%;
    max-width: 39.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #gallery .cs-content-picture {
    /* 229px - 532px */
    height: clamp(14.3125rem, 38vw, 33.25rem);
    aspect-ratio: 1.18;
  }
  #gallery .cs-picture1 {
    grid-column: 1 / 7;
    grid-row: 1 / 13;
  }
  #gallery .cs-picture2 {
    grid-column: 7 / 13;
    grid-row: 1 / 9;
  }
  #gallery .cs-picture3 {
    grid-column: 1 / 7;
    grid-row: 13 / 21;
  }
  #gallery .cs-picture4 {
    grid-column: 7 / 13;
    grid-row: 9 / 21;
  }
}
                                /*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-106 {
      padding: 2.5rem 1rem 1.25rem;
      background: #1a1a1a;
  }
  #cs-footer-106 .cs-container {
      width: 100%;
      max-width: 67.5rem;
      margin: auto;
  }
  #cs-footer-106 .cs-ul {
      padding: 0 0 2.5rem;
      margin: auto;
      border-bottom: 1px solid #eff0f6;
  }
  #cs-footer-106 .cs-li {
      list-style: none;
      text-align: center;
      margin-bottom: 1.25rem;
  }
  #cs-footer-106 .cs-li:last-of-type {
      margin-bottom: 0;
  }
  #cs-footer-106 .cs-link {
      /* 15px - 17px */
      font-size: clamp(0.9375rem, 2vw, 1.0625rem);
      line-height: 1.5em;
      text-decoration: none;
      font-weight: 700;
      color: var(--bodyTextColorWhite);
      position: relative;
  }
  #cs-footer-106 .cs-link:hover:before {
      width: 100%;
  }
  #cs-footer-106 .cs-link:before {
      /* top right box */
      content: "";
      width: 0%;
      height: 0.1875rem;
      background: var(--bodyTextColorWhite);
      opacity: 1;
      position: absolute;
      display: block;
      bottom: -0.125rem;
      left: 0;
      transition: width 0.3s;
  }
  #cs-footer-106 .cs-bottom {
      margin-top: 1.25rem;
      display: flex;
      /* set everyone to position on the left side */
      justify-content: flex-start;
      align-items: center;
  }
  #cs-footer-106 .cs-copyright {
      font-size: 0.9375rem;
      text-align: center;
      color: #a0a3bd;
      display: block;
      /* margin right auto on a flexbox pushes everyone else to the right */
      margin: 0 auto 0 0;
  }
  #cs-footer-106 .cs-social-link {
      width: 1.25rem;
      height: 1.25rem;
      margin-left: 0.75rem;
      background: #a0a3bd;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #cs-footer-106 .cs-social-link img {
      height: 0.6875rem;
      width: auto;
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
  #cs-footer-106 .cs-ul {
      display: flex;
      /* push everything to the left */
      justify-content: flex-start;
      align-items: center;
  }
  #cs-footer-106 .cs-li {
      /* 45px - 88px */
      margin: 0 clamp(2.8125rem, 7vw, 5.5rem) 0 0;
  }
  #cs-footer-106 .cs-li:last-of-type {
      margin: 0;
      /* margin-left auto will push everything away and force it to the farthest 
                 right edge */
      margin-left: auto;
  }
}