: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: #A1987B;
    --primaryLight: #ffba43;
    --secondary: #F1EEE4;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #ffffff;
    /* 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;
}

@media (min-width: 1025px) {
  .under-nav {
      padding-top: 18rem !important;
  }
}

@media (max-width: 1024px) {
  .under-nav {
      padding-top: 16rem !important ;
  }
}

/* Media query for viewports under 500px */
@media (max-width: 500px) {
  .under-nav {
      padding-top: 14rem !important;
  }
}

@media (min-width: 1025px) {
  .under-nav-agents {
      padding-top: 14rem !important;
  }
}

@media (max-width: 1024px) {
  .under-nav-agents {
      padding-top: 8rem !important ;
  }
}

/* Media query for viewports under 500px */
@media (max-width: 500px) {
  .under-nav-agents {
      padding-top: 8rem !important;
  }
}

@font-face {
    font-family: 'Stackers';  /* You can name the font whatever you like */
    src: url('../fonts/sackers-gothic-medium.ttf') format('truetype');  /* Ensure the path is correct */
  }
  

body {
    margin: 0;
    padding: 0;
    font-family: 'Stackers', sans-serif !important;  /* Fallback to sans-serif if the custom font fails to load */
}

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

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 100;
    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: 1023px) {
    body.cs-open {
      overflow: hidden;
    }
    body.scroll #cs-navigation {
      /* 53px, same height as the cs-top-container */
      transform: translateY(-3.3125rem);
    }
    #cs-navigation {
      width: 100%;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
      transition: transform .3s;
    }
    #cs-navigation:before {
      content: '';
      width: 100%;
      height: 0vh;
      background: rgba(0, 0, 0, 0.6);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      position: absolute;
      display: block;
      top: 100%;
      right: 0;
      z-index: -1100;
      opacity: 0;
      transition: height .5s, opacity .5s;
    }
    #cs-navigation.cs-active:before {
      height: 150vh;
      opacity: 1;
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
      opacity: 1;
      transform: scaleY(1);
      transition-delay: .15s;
    }
    #cs-navigation.cs-active .cs-li {
      transform: translateY(0);
      opacity: 1;
    }
    #cs-navigation .cs-top-bar {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-top-container {
      width: 100%;
      padding: 1rem 1.5rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #1a1a1a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-top-contact {
      width: auto;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 16px - 24px */
      gap: clamp(1rem, 2vw, 1.5rem);
    }
    #cs-navigation .cs-top-link {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColorWhite);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    #cs-navigation .cs-top-link:nth-of-type(2) {
      display: none;
    }
    #cs-navigation .cs-link-icon {
      width: 1rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-top-social {
      visibility: visible;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      transition: opacity .3s, visibility .3s, height .3s;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-social-icon {
      width: 1.25rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-container {
      width: 100%;
      padding: 1.25rem 1rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
    }
    #cs-navigation .cs-logo {
      width: auto;
      height: 2.5rem;
      padding: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      order: 1;
      z-index: 10;
    }
    #cs-navigation .cs-logo img {
      width: auto;
      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-nav {
      order: 2;
    }
    #cs-navigation .cs-toggle {
      width: 2.875rem;
      height: 2.875rem;
      margin: 0 0 0 auto;
      background-color: var(--primary);
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform .6s;
    }
    #cs-navigation .cs-toggle.cs-active {
      transform: rotate(180deg);
    }
    #cs-navigation .cs-active .cs-line1 {
      top: 50%;
      transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
      top: 50%;
      transform-origin: center;
      transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    }
    #cs-navigation .cs-active .cs-line3 {
      bottom: 100%;
      opacity: 0;
    }
    #cs-navigation .cs-box {
      /* 24px - 28px */
      width: clamp(1.5rem, 2vw, 1.75rem);
      height: 0.75rem;
      position: relative;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background-color: #FAFBFC;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
      top: 0;
      transform-origin: center;
      transition: transform .5s, top .3S, left .3S;
      animation-duration: .7s;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-direction: normal;
    }
    #cs-navigation .cs-line2 {
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      transition: top .3s, left .3s, transform .5s;
      animation-duration: .7s;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-direction: normal;
    }
    #cs-navigation .cs-line3 {
      bottom: 0;
      transition: bottom .3s, opacity .3s;
    }
    #cs-navigation .cs-ul-wrapper {
      width: 100%;
      height: auto;
      padding-bottom: 3rem;
      opacity: 0;
      background-color: #fff;
      box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
      overflow: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: -1;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .4s, opacity .3s;
    }
    #cs-navigation .cs-ul {
      margin: 0;
      padding: 3rem 0 0 0;
      width: 100%;
      height: auto;
      max-height: 65vh;
      overflow: scroll;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }
    #cs-navigation .cs-li {
      width: 100%;
      text-align: center;
      list-style: none;
      margin-right: 0;
      /* transition from these values */
      transform: translateY(-4.375rem);
      opacity: 0;
      transition: transform .6s, opacity .9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
      transition-delay: .05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
      transition-delay: .1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
      transition-delay: .15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
      transition-delay: .2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
      transition-delay: .25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
      transition-delay: .3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
      transition-delay: .35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
      transition-delay: .4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
      transition-delay: .45s;
    }
    #cs-navigation .cs-li:nth-of-type(10) {
      transition-delay: .5s;
    }
    #cs-navigation .cs-li:nth-of-type(11) {
      transition-delay: .55s;
    }
    #cs-navigation .cs-li:nth-of-type(12) {
      transition-delay: .6s;
    }
    #cs-navigation .cs-li:nth-of-type(13) {
      transition-delay: .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.cs-active {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
      display: none;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #cs-navigation .cs-top-link:nth-of-type(2) {
      display: flex;
    }
  }
  
  /*-- -------------------------- -->
  <---     Navigation Dropdown    -->
  <--- -------------------------- -*/
  
  /* Mobile - 1023px */
  @media only screen and (max-width: 1023px) {
    #cs-navigation .cs-li {
      text-align: center;
      width: 100%;
      display: block;
    }
    #cs-navigation .cs-dropdown {
      position: relative;
      color: var(--bodyTextColorWhite);
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
      height: auto;
      opacity: 1;
      visibility: visible;
      margin: 0.75rem 0 0 0;
      padding: 0.75rem 0;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
      opacity: 1;
    }
    #cs-navigation .cs-dropdown .cs-li-link {
      position: relative;
      transition: opacity .3s;
    }
    #cs-navigation .cs-drop-icon {
      width: 0.9375rem;
      height: auto;
      position: absolute;
      top: 50%;
      right: -1.25rem;
      transform: translateY(-50%);
    }
    #cs-navigation .cs-drop-ul {
      width: 100%;
      height: 0;
      margin: 0;
      padding: 0;
      background-color: var(--primary);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      transition: padding .3s, margin .3s, height .3s, opacity .3s, visibility .3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2vw, 1.25rem);
      color: #fff;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation .cs-dropdown {
      position: relative;
    }
    #cs-navigation .cs-dropdown:hover {
      cursor: pointer;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-ul {
      transform: scaleY(1);
      opacity: 1;
      visibility: visible;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-li {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-drop-icon {
      width: 0.75rem;
      height: auto;
      margin-left: 0.25rem;
      display: inline-block;
    }
    #cs-navigation .cs-drop-ul {
      min-width: 12.5rem;
      margin: 0;
      padding: 0;
      background-color: #fff;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
      border-bottom: 5px solid var(--primary);
      /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
      position: absolute;
      top: 100%;
      z-index: -100;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .3s, visibility .3s, opacity .3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
      font-size: 1rem;
      text-decoration: none;
      opacity: 0;
      width: 100%;
      height: auto;
      display: block;
      transform: translateY(-0.625rem);
      transition: opacity .6s, transform .6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(1) {
      transition-delay: .05s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(2) {
      transition-delay: .1s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(3) {
      transition-delay: .15s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(4) {
      transition-delay: .2s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(5) {
      transition-delay: .25s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(6) {
      transition-delay: .3s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(7) {
      transition-delay: .35s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(8) {
      transition-delay: .4s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(9) {
      transition-delay: .45s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(10) {
      transition-delay: .5s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(11) {
      transition-delay: .55s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(12) {
      transition-delay: .6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(13) {
      transition-delay: .65s;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      font-size: 1rem;
      white-space: nowrap;
      line-height: 1.5em;
      text-decoration: none;
      width: 100%;
      padding: 0.75rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      color: var(--bodyTextColor);
      display: block;
      transition: color 0.3s, background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--primary);
      background-color: #f7f7f7;
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    body.scroll #cs-navigation {
      /* 53px, the ssme height as the cs-top-container */
      transform: translateY(-3.3125rem);
    }
    #cs-navigation {
      width: 100%;
      padding: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
      transition: transform .3s;
    }
    #cs-navigation .cs-top-bar {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-top-container {
      width: 100%;
      max-width: 80rem;
      padding: 1rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 3.125rem;
      position: relative;
      z-index: 1;
    }
    #cs-navigation .cs-top-container:before {
      /* grey background */
      content: '';
      width: 100vw;
      height: 100%;
      background: #1a1a1a;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 50%;
      z-index: -1;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-top-contact {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-top-link {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColorWhite);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    #cs-navigation .cs-top-link:hover {
      text-decoration: underline;
    }
    #cs-navigation .cs-link-icon {
      width: 1rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-top-social {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform .3s;
    }
    #cs-navigation .cs-social-link:hover {
      transform: scale(1.1);
    }
    #cs-navigation .cs-social-icon {
      width: 1.25rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      padding: 0 1rem;
      /* prevents padding from affectin gheight */
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
      position: relative;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      /* 40px - 44px */
      height: clamp(2.5rem, 4vw, 2.75rem);
      /* margin-right auto pushes everything away from it to the right */
      padding: 0;
      display: flex;
      justify-content: start;
      min-width: 180px;
      align-items: center;
      z-index: 100;
    }
    #cs-navigation .cs-logo img {
      width: auto;
      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;
      gap: 3rem;
    }
    #cs-navigation .cs-li {
      list-style: none;
      padding: 1.9375rem 0;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.3vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: block;
      position: relative;
      transition: color .3s;
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active {
      font-weight: 700;
      color: var(--headerColor);
    }
    #cs-navigation .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      padding: 0 2rem;
      background-color: var(--primary);
      overflow: hidden;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color .3s;
    }
    #cs-navigation .cs-button-solid:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 0%;
      background: #1a1a1a;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width .3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
    #cs-navigation .cs-nav-button {
      line-height: 2.875rem;
      margin-left: 1.5rem;
    }
  }
                                  
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1858 {
      /* 200px - 300px - leaving extra space for the navigation */
      padding: 14em 1em 2em 1em;
      background-color: #222;
      position: relative;
      z-index: 1;
    }
    #hero-1858 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      /* 120px - 200px */
      gap: clamp(7.5rem, 15vw, 12.5rem);
    }
    #hero-1858 .cs-content {
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #hero-1858 .cs-title {
      /* 49px - 84px */
      font-size: clamp(3.0625rem, 6vw, 5.25rem);
      max-width: 100vw;
    }
    #hero-1858 .cs-title,
    #hero-1858 .cs-text {
      color: var(--bodyTextColorWhite);
    }
    #hero-1858 .cs-text {
      margin-bottom: 2rem;
    }
    #hero-1858 .cs-button-group {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      position: relative;
      top: 1.5em;
    }
    #hero-1858 .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: 12.5rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      background-color: var(--primary);
      color: var(--bodyTextColorWhite);

      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #hero-1858 .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;
    }
    #hero-1858 .cs-button-solid:hover:before {
      width: 100%;
    }
    #hero-1858 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 2.3vw, 1.25rem);
    }
    #hero-1858 .cs-item {
      text-align: left;
      list-style: none;
      width: 100%;
      margin: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      /* 24px - 40px */
      padding: clamp(1.5rem, 3vw, 2.5rem);
      background-color: #1D1C1C;
      box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      grid-column: span 12;
      grid-row: span 1;
      gap: 1.25rem;
      position: relative;
      z-index: 1;
    }
    #hero-1858 .cs-picture {
      width: 100%;
      height: 10rem;
      display: block;
      /* causes the image to grow to it's "auto" size, but won't shrink. the cs-info fills the remaining space */
      flex: 1 0 auto;
    }
    #hero-1858 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #hero-1858 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      font-weight: bold;
      line-height: 1.2em;
      text-align: inherit;
      /* 8px - 16px */
      margin: 0 0 clamp(0.5rem, 1.2vw, 1rem) 0;
      color: var(--bodyTextColorWhite);
    }
    #hero-1858 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
    }
    #hero-1858 .cs-link {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2em;
      text-decoration: none;
      width: 100%;
      margin: 1.5rem 0 0;
      color: var(--primary);
      display: flex;
      gap: 0.25rem;
    }
    #hero-1858 .cs-link:hover img {
      transform: translateX(0.25rem);
    }
    #hero-1858 .cs-link img {
      transition: transform 0.3s;
    }
    #hero-1858 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
    }
    #hero-1858 .cs-background:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: #000;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
      opacity: 0.7;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    #hero-1858 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  /* Large Phone/Tablet - 500px */
  @media only screen and (min-width: 31.25rem) {
    #hero-1858 .cs-item {
      flex-direction: row;
      align-items: stretch;
    }
    #hero-1858 .cs-picture {
      height: auto;
      min-height: 8.75rem;
      max-width: 8.75rem;
    }
    #hero-1858 .cs-info {
      align-self: center;
    }
    #hero-1858 .cs-background {
      height: 100%;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #hero-1858  {
    padding: 16em 1em 5em 1em;
    }
    
    #hero-1858 .cs-button-group {
      top: 4em;
    }
    #hero-1858 .cs-item {
      grid-column: span 6;
    }
    #hero-1858 .cs-background {
      height: 100%;
    }
  }
                                
  /*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

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

    #services-1129 .cs-topper {
        color: #767676;
    }
    #services-1129 .cs-card-group {
        margin: 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2.3vw, 1.25rem);
    }
    #services-1129 .cs-item {
        width: 100%;
        text-align: center;
        list-style: none;
        margin: 0;
        /* 24px - 32px */
        padding: clamp(1.5rem, 3vw, 2rem);
        background-color: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        grid-column: span 12;
        grid-row: span 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        transition:
            box-shadow 0.3s,
            border-color 0.3s;
    }
    #services-1129 .cs-item:hover {
        box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
        border-color: transparent;
    }
    #services-1129 .cs-item:hover .cs-h3 {
        color: var(--primary);
    }
    #services-1129 .cs-image-group {
        width: 6.25rem;
        height: auto;
        /* 20px - 24px */
        margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        position: relative;
    }
    #services-1129 .cs-icon {
        width: 3rem;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #services-1129 .cs-graphic {
        width: 100%;
        height: auto;
    }
    #services-1129 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: bold;
        text-align: inherit;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
        transition: color 0.3s;
    }
    #services-1129 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        max-width: 28.125rem;
        margin: 0;
        padding: 0;
        color: var(--bodyTextColor);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-1129 .cs-item {
        text-align: left;
        align-items: center;
        grid-column: span 4;
        justify-content: space-around;
    }
}

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

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

    #sbsr-1100 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-1100 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-1100 .cs-ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    #sbsr-1100 .cs-li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #sbsr-1100 .cs-h3 {
        /* 20px - 25px */
        font-size: 1.25rem, 3vw, 1.5625rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.75rem;
    }
    #sbsr-1100 .cs-li-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 39.375rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #sbsr-1100 .cs-image-group {
        /* scales the whole group based on the view width size and stop when that vales equals .8em, resets at desktop */
        font-size: min(2.235vw, 0.8em);
        width: 40.5em;
        height: 37.125em;
        display: block;
        position: relative;
        z-index: 1;
    }
    #sbsr-1100 .cs-picture {
        position: absolute;
    }
    #sbsr-1100 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #sbsr-1100 .cs-picture1 {
        width: 20.1875em;
        height: 27.9375em;
        top: 0;
        right: 0;
        z-index: 10;
    }
    #sbsr-1100 .cs-picture2 {
        width: 19.0625em;
        height: 27.5625em;
        left: 0;
    }
    #sbsr-1100 .cs-stripes {
        width: 34.25em;
        height: auto;
        display: block;
        position: absolute;
        top: 5em;
        left: 2.5em;
        z-index: -1;
    }
    #sbsr-1100 .cs-graphic {
        width: 11.5em;
        height: auto;
        position: absolute;
        bottom: 5em;
        left: 13.875em;
        z-index: 10;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1100 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #sbsr-1100 .cs-image-group {
        font-size: min(1.2vw, 1em);
        flex: none;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}


/* Base Styles */
.recently-sold-section .cs-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: var(--sectionPadding);
}

.recently-sold-section .cs-card-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}

.recently-sold-section .cs-item {
  width: calc(100% - 40px); /* Full width minus gap */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.recently-sold-section .cs-picture img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.recently-sold-section .cs-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Medium Screens (Tablets) */
@media (min-width: 600px) {
  .recently-sold-section .cs-item {
      width: calc(50% - 40px); /* Two items per row */
  }
}

/* Large Screens (Desktops) */
@media (min-width: 1024px) {
  .recently-sold-section .cs-container {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      max-width: 80rem;
  }
  .recently-sold-section .cs-item {
      width: calc(33.333% - 40px); /* Three items per row */
  }
  .recently-sold-section{
    padding: var(--sectionPadding);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}



.cs-property-location{
  line-height: 16px;
}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #footer-1390 {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;
        position: relative;
        z-index: 1;
    }
    #footer-1390 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #footer-1390 .cs-top {
        width: 100%;
        margin-bottom: 2.5rem;
        /* 24px - 64px */
        padding-bottom: clamp(1.5rem, 5vw, 4rem);
        border-bottom: 1px solid #484848;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 24px - 40px */
        gap: clamp(1.25rem, 4vw, 2.5rem);
    }
    #footer-1390 .cs-ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        row-gap: 0.5rem;
        /* 24px - 36px */
        column-gap: clamp(1.5rem, 4vw, 2.25rem);
    }
    #footer-1390 .cs-li {
        list-style: none;
    }
    #footer-1390 .cs-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: #bababa;
        display: block;
        transition: color 0.3s;
    }
    #footer-1390 .cs-link:hover {
        color: var(--primary);
    }
    #footer-1390 .cs-logo {
        width: 100%;
        max-width: 13.0625rem;
        height: auto;
        display: block;
    }
    #footer-1390 .cs-logo-img {
        width: 100%;
        height: auto;
        display: block;
    }
    #footer-1390 .cs-bottom {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    #footer-1390 .cs-social {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #footer-1390 .cs-social-li {
        list-style: none;
    }
    #footer-1390 .cs-social-link {
        width: 2rem;
        height: 2rem;
        background-color: #484848;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #footer-1390 .cs-social-link:hover {
        background-color: var(--primary);
    }
    #footer-1390 .cs-social-link:hover .cs-social-icon {
        filter: grayscale(1) brightness(1000%);
        opacity: 1;
    }
    #footer-1390 .cs-social-icon {
        width: 0.75rem;
        height: auto;
        display: block;
        opacity: 0.6;
        transition: opacity 0.3s;
    }
    #footer-1390 .cs-copyright {
        font-size: 1rem;
        color: #bababa;
        line-height: 1.5em;
        margin: 0;
        display: block;
    }
    #footer-1390 .cs-copyright-link,
    #footer-1390 .cs-separater {
        font-size: 1rem;
        text-decoration: none;
        color: #bababa;
        transition: color 0.3s;
    }
    #footer-1390 .cs-copyright-link:hover,
    #footer-1390 .cs-separater:hover {
        color: var(--primary);
    }
    #footer-1390 .cs-separater {
        margin: 0 1rem;
        display: inline-block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #footer-1390 .cs-top {
        align-items: flex-start;
    }
    #footer-1390 .cs-bottom {
        flex-direction: row;
        justify-content: center;
    }
    #footer-1390 .cs-flex {
        margin: 0 auto;
    }
    #footer-1390 .cs-social {
        /* sends it to the right in the 3rd position */
        order: 3;
    }
}
                                

/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team-860 {
      padding: var(--sectionPadding);
      overflow: hidden;
  }
  #meet-team-860 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #meet-team-860 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 33.875rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }
  #meet-team-860 .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;
  }
  #meet-team-860 .cs-title {
      font-size: var(--headerFontSize);
      font-weight: 100;
      line-height: 1.2em;
      text-align: inherit;
      max-width: 43.75rem;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
      position: relative;
  }
  #meet-team-860 .cs-title {
      max-width: 20ch;
  }
  #meet-team-860 .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;
  }
  #meet-team-860 .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;
  }
  #meet-team-860 .cs-button-solid:hover:before {
      width: 100%;
  }
  #meet-team-860 .cs-button-solid {
      /* prevents flexbox from squishing it */
      flex: none;
  }
  #meet-team-860 .cs-card-group {
      width: 100%;
      max-width: 39.375rem;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* 16px - 20px */
      gap: clamp(1rem, 2.3vw, 1.25rem);
      position: relative;
  }
  #meet-team-860 .cs-item {
      list-style: none;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      position: relative;
  }
  #meet-team-860 .cs-item:hover .cs-picture:before,
  #meet-team-860 .cs-item:hover .cs-picture:after {
      opacity: 1;
  }
  #meet-team-860 .cs-item:hover .cs-picture img {
      transform: scale(1.1);
  }
  #meet-team-860 .cs-item:hover .cs-info {
      background-color: var(--primary);
  }
  #meet-team-860 .cs-item:hover .cs-name,
  #meet-team-860 .cs-item:hover .cs-job {
      color: var(--bodyTextColorWhite);
  }
  #meet-team-860 .cs-picture {
      width: 100%;
      height: auto;
      margin: 0 0 0.5rem 0;
      /* removed at tablet */
      aspect-ratio: 328/407;
      border-radius: 1rem;
      /* clips the img corners */
      /* clips img tag from overflowing it on hover */
      overflow: hidden;
      display: block;
      position: relative;
      z-index: 1;
  }
  #meet-team-860 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
      object-position: top;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: transform 0.7s;
  }
  #meet-team-860 .cs-info {
      width: 100%;
      padding: 1rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      background-color: #f7f7f7;
      border-radius: 0.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: background-color 0.3s;
  }
  #meet-team-860 .cs-name {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0 0 0.25rem 0;
      color: var(--headerColor);
      display: block;
      transition: color 0.3s;
  }
  #meet-team-860 .cs-job {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      margin-right: 0;
      color: var(--bodyTextColor);
      display: block;
      transition: color 0.3s;
  }

  
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #meet-team-860 .cs-card-group {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
  }
  #meet-team-860 .cs-item {
      width: 100%;
  }
  #meet-team-860 .cs-picture {
      height: 25.4375rem;
      /* remove the aspect ratio so the height can be squished */
      aspect-ratio: initial;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 56.25rem) {
  #meet-team-860 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
  }
  #meet-team-860 .cs-content {
      text-align: left;
      width: 55%;
      flex-direction: column;
      align-items: flex-start;
  }
  #meet-team-860 .cs-card-group {
      justify-content: center;
      flex-wrap: nowrap;
  }
  #meet-team-860 .cs-item {
      width: 100%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1268 {
      overflow: hidden;
      position: relative;
      z-index: 1;
  }
  #contact-1268 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-direction: column;
  }
  #contact-1268 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      padding: var(--sectionPadding);
      /* 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;
  }
  #contact-1268 .cs-form-group {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 44rem;
      /* resets to 0 at tablet */
      margin: auto;
      padding: var(--sectionPadding);
      /* 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;
      order: 2;
  }

  #contact-1268 .cs-title {
      color: var(--bodyTextColorWhite);
  }
  #contact-1268 .cs-text {
      margin: 0;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
  }
  #contact-1268 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      text-align: left;
      max-width: 32.625rem;
      margin: 0 auto 2rem 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 1rem;
  }
  #contact-1268 .cs-picture {
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: none;
      position: relative;
      z-index: 1;
  }
  #contact-1268 .cs-picture:before {
      content: "";
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 0.2;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
  }
  #contact-1268 .cs-form {
      width: 100%;
      padding: 0;
      /* prevents flexbox from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }
  #contact-1268 .cs-label {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      color: var(--headerColor);
      display: flex;
      grid-column: span 12;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 0.5rem;
  }
  #contact-1268 .cs-input {
      font-size: 1rem;
      width: 100%;
      /* 46px - 56px */
      height: clamp(2.875rem, 4.5vw, 3.5rem);
      padding: 0;
      padding-left: 1.5rem;
      color: var(--headerColor);
      border-radius: 0.5rem;
      border: 1px solid #dad9e3;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
  }
  #contact-1268 .cs-input::placeholder {
      color: #7d799c;
      opacity: 0.6;
  }
  #contact-1268 .cs-textarea {
      min-height: 7.5rem;
      padding-top: 1.5rem;
      margin-bottom: 1rem;
      font-family: inherit;
  }
  #contact-1268 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      border: none;
      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;
      transition: color 0.3s;
      font-family: 'Stackers';
  }
  #contact-1268 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: var(--headerColor);
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #contact-1268 .cs-button-solid:hover {
      color: #fff;
  }
  #contact-1268 .cs-button-solid:hover:before {
      width: 100%;
  }
  #contact-1268 .cs-submit {
      width: 100%;
      margin: 0;
      color: var(--bodyTextColorWhite);
      border-radius: 0rem;
      grid-column: span 12;
  }
  #contact-1268 .cs-submit:hover {
      cursor: pointer;
  }
  #contact-1268 .cs-button-solid:disabled {
      background-color: #ccc; /* Gray background */
      color: #666; /* Darker text for better contrast */
      cursor: not-allowed !important; /* Shows a cursor indicating the button is disabled */
      pointer-events: none; /* Disables click events on the button */
  }

  #contact-1268 .cs-button-solid:disabled:before {
      display: none; /* Removes the before pseudo-element to stop the hover effect */
  }
  #contact-1268 .cs-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  #contact-1268 .cs-card-group {
      width: 100%;
      max-width: 32.625rem;
      margin: 0;
      padding: var(--sectionPadding);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 16px - 20px */
      gap: clamp(1rem, 2.3vw, 1.25rem);
      order: 1;
      position: relative;
      z-index: 1;
  }
  #contact-1268 .cs-item {
      text-align: left;
      list-style: none;
      width: 100%;
      margin: 0;
      /* 16px - 20px */
      padding: clamp(1rem, 4vw, 2.5rem);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      position: relative;
      z-index: 1;
  }
  .cs-form h1{
    line-height: 30px;
  }

  #contact-1268 .cs-item:hover:before {
      opacity: 1;
  }
  #contact-1268 .cs-item:hover .cs-header,
  #contact-1268 .cs-item:hover .cs-item-text,
  #contact-1268 .cs-item:hover .cs-link {
      color: var(--bodyTextColorWhite);
  }
  #contact-1268 .cs-item:hover .cs-text,
  #contact-1268 .cs-item:hover .cs-link {
      opacity: 0.8;
  }
  #contact-1268 .cs-item:hover .cs-link:hover {
      color: var(--primary);
  }
  #contact-1268 .cs-item:hover .cs-icon {
      filter: grayscale(1) brightness(1000%);
  }
  #contact-1268 .cs-item:before {
      /* hover border and background */
      content: "";
      width: 100%;
      height: 100%;
      background: #1a1a1a;
      border: 1px solid var(--primary);
      opacity: 0;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
      transition: opacity 0.3s;
  }
  #contact-1268 .cs-header {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      /* 12px - 16px */
      margin: 0 0 clamp(0.75rem, 1.6vw, 1rem);
      display: block;
      transition: color 0.3s;
  }
  #contact-1268 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0 0 0.25rem;
      color: var(--bodyTextColor);
      display: block;
      transition: color 0.3s;
  }
  #contact-1268 .cs-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.25rem;
      transition: color 0.3s;
  }
  #contact-1268 .cs-icon {
      width: 1rem;
      height: auto;
  }
  #contact-1268 .cs-background {
      width: 100%;
      height: 100%;
      background-color: #1a1a1a;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #contact-1268 .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) {
  #contact-1268 .cs-label:nth-of-type(1),
  #contact-1268 .cs-label:nth-of-type(2) {
      grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1268 {
      /* moved padding back to the section container */
      padding: var(--sectionPadding);
  }
  #contact-1268 .cs-container {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
  }
  #contact-1268 .cs-content {
      text-align: left;
      margin: 0;
      padding: 0;
      align-items: flex-start;
  }
  #contact-1268 .cs-form-group {
      width: 43%;
      max-width: 32.625rem;
      margin: 0;
      padding: 0;
  }
  #contact-1268 .cs-form {
      padding: 0;
  }
  #contact-1268 .cs-wrapper {
      width: 50%;
      max-width: 32.75rem;
      flex: none;
      /* removes position from it so the absolutely positioned background group can now be positioned relative to the section container */
      position: initial;
  }
  #contact-1268 .cs-background {
      width: 60vw;
      height: 100%;
      left: auto;
      right: 50%;
      top: 0;
  }
  #contact-1268 .cs-card-group {
      padding: 0;
  }
}

                              
/*-- -------------------------- -->
<---          team           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #team-1268 {
      overflow: hidden;
      position: relative;
      z-index: 1;
  }
  #team-1268 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  #team-1268 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      padding: var(--sectionPadding);
      /* 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;
  }
  #team-1268 .cs-form-group {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 44rem;
      /* resets to 0 at tablet */
      margin: auto;
      padding: var(--sectionPadding);
      /* 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;
      order: 2;
  }

  #team-1268 .cs-title {
      color: var(--bodyTextColorWhite);
  }
  #team-1268 .cs-text {
      margin: 0;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
  }
  #team-1268 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      text-align: left;
      max-width: 32.625rem;
      margin: 0 auto 2rem 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 1rem;
  }
  #team-1268 .cs-picture {
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: none;
      position: relative;
      z-index: 1;
  }
  #team-1268 .cs-picture {
    width: 100%;
    height: auto;
    margin: 0 0 0.5rem 0;
    /* removed at tablet */
    aspect-ratio: 328/407;
    border-radius: 1rem;
    /* clips the img corners */
    /* clips img tag from overflowing it on hover */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
}
#team-1268 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.7s;
}
  #team-1268 .cs-form {
      width: 100%;
      padding: 0;
      /* prevents flexbox from affecting height and width */
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 0.75rem;
  }
  #team-1268 .cs-label {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      color: var(--headerColor);
      display: flex;
      grid-column: span 12;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 0.5rem;
  }
  #team-1268 .cs-input {
      font-size: 1rem;
      width: 100%;
      /* 46px - 56px */
      height: clamp(2.875rem, 4.5vw, 3.5rem);
      padding: 0;
      padding-left: 1.5rem;
      color: var(--headerColor);
      border-radius: 0.5rem;
      border: 1px solid #dad9e3;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
  }
  #team-1268 .cs-input::placeholder {
      color: #7d799c;
      opacity: 0.6;
  }
  #team-1268 .cs-textarea {
      min-height: 7.5rem;
      padding-top: 1.5rem;
      margin-bottom: 1rem;
      font-family: inherit;
  }
  #team-1268 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #1a1a1a;
      border: none;
      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;
      transition: color 0.3s;
  }
  #team-1268 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: gray;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #team-1268 .cs-button-solid:hover {
      color: #fff;
  }
  #team-1268 .cs-button-solid:hover:before {
      width: 100%;
  }
  #team-1268 .cs-submit {
      width: 100%;
      margin: 0;
      color: var(--bodyTextColorWhite);
      border-radius: 0.5rem;
      grid-column: span 12;
  }
  #team-1268 .cs-submit:hover {
      cursor: pointer;
  }
  #team-1268 .cs-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
  }
  #team-1268 .cs-card-group {
      width: 100%;
      max-width: 39.375rem;
      margin: 4em 0 4em 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* 16px - 20px */
      gap: clamp(1rem, 2.3vw, 1.25rem);
      padding: 0 1em 0 1em;
      position: relative;
  }
  #team-1268 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}
#team-1268 .cs-item:hover .cs-picture:before,
#team-1268 .cs-item:hover .cs-picture:after {
    opacity: 1;
}
#team-1268 .cs-item:hover .cs-picture img {
    transform: scale(1.1);
}
#team-1268 .cs-item:hover .cs-info {
    background-color: var(--primary);
}
#team-1268 .cs-item:hover .cs-name,
#team-1268 .cs-item:hover .cs-job,
#team-1268 .cs-item:hover .cs-job img {
    color: var(--bodyTextColorWhite);  /* This will change the text color */
    filter: brightness(0) invert(1);  /* This will change the image color to white */
    transition: color 0.3s, filter 0.3s;  /* Adds transition for smooth effect */
}

  #team-1268 .cs-header {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      /* 12px - 16px */
      margin: 0 0 clamp(0.75rem, 1.6vw, 1rem);
      display: block;
      transition: color 0.3s;
  }
  #team-1268 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0 0 0.25rem;
      color: var(--bodyTextColor);
      display: block;
      transition: color 0.3s;
  }
  #team-1268 .cs-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.25rem;
      transition: color 0.3s;
  }
  #team-1268 .cs-icon {
      width: 1rem;
      height: auto;
  }
  #team-1268 .cs-background {
      width: 100%;
      height: 100%;
      background-color: #1a1a1a;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #team-1268 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
  #team-1268 .cs-info {
    width: 100%;
    padding: 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    transition: background-color 0.3s;
}
#team-1268 .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;
}

#team-1268 .cs-name {
  font-size: 1.25rem;
  line-height: 1.2em;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--headerColor);
  display: block;
  transition: color 0.3s;
}
#team-1268 .cs-job {
  font-size: clamp(0.875rem, 1.5vw, 1rem); /* Adapts font size between 14px and 16px */
  line-height: 1.5em; /* Line height is 1.5 times the font size */
  margin-right: 0; /* No right margin */
  color: var(--bodyTextColor); /* Color from a CSS variable */
  display: flex; /* Makes each job entry a block, taking full width */
  gap: 0.5em; /* Space between the icon and text */
  transition: color 0.3s; /* Smooth transition for color changes */
}

#team-1268 .cs-job a {
  display: inline-flex; /* Makes the link an inline flex container */
  align-items: center; /* Centers items vertically within the link */
  text-decoration: none; /* No underline for the link */
  color: inherit; /* Inherits color from the parent */
  gap: 0.5em; /* Space between the icon and text */
}

#team-1268 .cs-job img {
  width: 16px; /* Icon width, adjust as needed */
  height: auto; /* Maintains aspect ratio of the icon */
}




}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #team-1268 .cs-label:nth-of-type(1),
  #team-1268 .cs-label:nth-of-type(2) {
      grid-column: span 6;
  }
  #team-1268 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 1em 0 1em 0 ;
}
#team-1268 .cs-item {
  width: 100%;
}

}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  
  #team-1268 .cs-picture {
    height: 25.4375rem;
    /* remove the aspect ratio so the height can be squished */
    aspect-ratio: initial;
  }
  #team-1268 {
      /* moved padding back to the section container */
      padding: var(--sectionPadding);
  }
  #team-1268 .cs-container {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
  }
  #team-1268 .cs-content {
      text-align: left;
      margin: 0;
      padding: 0;
      align-items: flex-start;
      margin-top: 4em;
  }
  #team-1268 .cs-form-group {
      width: 43%;
      max-width: 32.625rem;
      margin: 0;
      padding: 0;
  }
  #team-1268 .cs-form {
      padding: 0;
  }
  #team-1268 .cs-wrapper {
      width: 38%;
      max-width: 32.75rem;
      flex: none;
      /* removes position from it so the absolutely positioned background group can now be positioned relative to the section container */
      position: initial;
  }
  #team-1268 .cs-background {
      width: 60vw;
      height: 100%;
      left: auto;
      right: 50%;
      top: 0;
  }
  #team-1268 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Adjust the gap between items as needed */
    justify-content: center;
  }
  #team-1268 .cs-item {
    width: 100%;
}
#team-1268 .cs-content {
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
}
}