/*-- -------------------------- -->
<---           Table            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #table-1669 {
      padding: var(--sectionPadding);
    }
    #table-1669 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #table-1669 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
    }
    #table-1669 .cs-table {
      width: 100%;
      border-collapse: collapse;
    }
    #table-1669 .cs-th {
      padding: 0.75rem 1rem;
      box-sizing: border-box;
    }
    #table-1669 .cs-td {
      padding: 0.5rem 1rem;
      box-sizing: border-box;
    }
    #table-1669 .cs-th,
    #table-1669 .cs-td {
      border: 1px solid #ddd;
      text-align: center;
    }
    #table-1669 .cs-color .cs-th:first-child {
      color: #fff;
      background-color: var(--primary);
    }
    #table-1669 .cs-th:first-child,
    #table-1669 .cs-td:first-child {
      position: sticky;
      left: 0;
      z-index: 100;
      /* Make sure it sits above the other cells */
      background-color: #f2f2f2;
      border: 1px solid #ddd;
      text-align: left;
    }
    #table-1669 .cs-th {
      background-color: #f2f2f2;
    }
    #table-1669 .cs-tr {
      color: var(--bodyTextColor);
    }
    #table-1669 .cs-icon {
      height: 1rem;
      width: auto;
    }
  }
  /* Tablet - 600px */
  @media screen and (max-width: 37.5rem) {
    #table-1669 .cs-table {
      display: block;
      overflow-x: auto;
    }
  }
  /* Mobile - 360px */

#list-893 {
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    columns: 2;
}
#list-893 .cs-li {
    list-style: none;
    margin: 0 0 0.5rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
}
#list-893 .cs-li:before {
    /* accent shape */
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background: #bababa;
    border-radius: 0.25rem 0 0.25rem 0;
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-697 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
    position: relative;
    z-index: 1;
  }
  #cta-697 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .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;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #cta-697 .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: var(--bodyTextColorWhite);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--secondary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta-697 .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;
  }
  #cta-697 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-697 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-697 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }
}
/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1186 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
  #list-1186 {
      width: 100%;
      max-width: 39.375rem;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      gap: 1.5rem;
  }
  #list-1186 .cs-li {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      /* 16px - 20px */
      gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #list-1186 .cs-li-picture {
      /* 60px - 80px */
      width: clamp(3.75rem, 6vw, 5rem);
      height: clamp(3.75rem, 6vw, 5rem);
      margin: 0;
      background-color: #f7f7f7;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents flexbox from squishing it */
      flex: none;
  }
  #list-1186 .cs-li-icon {
      /* 24px - 32px */
      width: clamp(1.5rem, 3vw, 2rem);
      height: auto;
      display: block;
  }
  #list-1186 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      text-align: left;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
  }
  #list-1186 .cs-li-text {
      font-size: 1rem;
      line-height: 1.5em;
      text-align: left;
      margin: 0;
      color: var(--bodyTextColor);
  }
}
/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1405 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
  #list-1405 {
      width: 100%;
      margin: 0 0 1.5rem 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
  }
  #list-1405 .cs-li {
      font-size: var(--bodyFontSize);
      list-style: none;
      line-height: 1.5em;
      width: 100%;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      /* push icon top the top so if the list item goes to two lines the icon stays at the top */
      align-items: flex-start;
      gap: 0.5rem;
  }
  #list-1405 .cs-icon {
      width: 1.5rem;
      height: auto;
      /* adds extra space between the icon and top of parent so it's more centered */
      margin-top: 1px;
      display: block;
  }
}
.cs-button-2 {
  font-size: 1rem;
  /* 46px - 56px */
  line-height: clamp(2.875rem, 8vw, 3.5rem);
  text-decoration: none;
  font-weight: 700;
  margin: auto;
  color: #fff;
  padding: 0 1.5rem;
  background-color: var(--primary);
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: background-color 0.3s;
}
.cs-button-2:hover {
  background-color: #000;
}
/*-- -------------------------- -->
<---           Logos            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #logos-572 {
      /* 60px - 130px */
      padding: clamp(1.75rem, 3vw, 3.125rem) 1rem;
      background-color: var(--primary);
  }
  #logos-572 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #logos-572 .cs-logo {
      width: auto;
      max-width: 20%;
      height: auto;
      margin: 0;
      display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #logos-572 .cs-container {
      justify-content: space-between;
  }
  #logos-572 .cs-logo {
      width:10%;
      /* the max width becomes whatever the actual width of the image is */
      max-width: max-content;
      height: auto;
      display: block;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-580,
  #RPsbsr-580 {
  }
  #RPsbs-580 .cs-container,
  #RPsbsr-580 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 7vw, 4rem);
  }
  #RPsbs-580 .cs-content,
  #RPsbsr-580 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 32.625rem;
      /* moved section padding to the .cs-content so we can have the cs-picture be full width on mobile without the padding preventing it from doing so */
      padding: var(--sectionPadding);
      padding-top: 0;
      /* prevents padding from affecting width and height */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #RPsbs-580 .cs-text,
  #RPsbsr-580 .cs-text {
      margin-bottom: 1rem;
  }
  #RPsbs-580 .cs-text:last-of-type,
  #RPsbsr-580 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #RPsbs-580 .cs-button-solid,
  #RPsbsr-580 .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;
  }
  #RPsbs-580 .cs-button-solid:before,
  #RPsbsr-580 .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;
  }
  #RPsbs-580 .cs-button-solid:hover:before,
  #RPsbsr-580 .cs-button-solid:hover:before {
      width: 100%;
  }
  #RPsbs-580 .cs-picture,
  #RPsbsr-580 .cs-picture {
      display: block;
      position: relative;
      width: 100%;
      height: 18.75rem;
  }
  #RPsbs-580 .cs-picture img,
  #RPsbsr-580 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbs-580,
  #RPsbsr-580 {
      padding: var(--sectionPadding);
  }
  #RPsbs-580 .cs-container,
  #RPsbsr-580 .cs-container {
      flex-direction: row;
      justify-content: flex-start;
      /* 60px - 128px */
      gap: clamp(3.75rem, 10vw, 8rem);
  }
  #RPsbs-580 .cs-content,
  #RPsbsr-580 .cs-content {
      width: 53%;
      /* reset the padding, add the section padding back to the section container */
      padding: 0;
  }
  #RPsbs-580 .cs-picture,
  #RPsbsr-580 .cs-picture {
      width: 47vw;
      max-width: 30.875rem;
      /* 518px - 700px */
      height: clamp(32.375rem, 63vw, 43.75rem);
      /* 16px - 28px, added margin left and bottom to cs-picture so it pushes away by the same amount the yellow box element overlaps it left and bottom. This maintains consistent spacing left and bottom */
      margin: 0 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem);
      position: relative;
  }
  #RPsbs-580 .cs-picture:before,
  #RPsbsr-580 .cs-picture:before {
      /* yellow box */
      content: "";
      width: 50%;
      height: 60%;
      background: var(--secondary);
      opacity: 1;
      display: block;
      position: absolute;
      /* 16px - 28px, wrapped in calc function to multiple by negative 1 and get a negative clamp value */
      bottom: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
      left: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr-580 {
      background-color: #f7f7f7;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbsr-580 .cs-container {
      justify-content: flex-end;
  }
  #RPsbsr-580 .cs-content {
      /* sends it to the left in the first position */
      order: -1;
  }
  #RPsbsr-580 .cs-picture {
      /* 16px - 28px, added margin left and bottom to cs-picture so it pushes away by the same amount the yellow box element overlaps it left and bottom. This maintains consistent spacing left and bottom */
      margin: 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem) 0;
  }
  #RPsbsr-580 .cs-picture:before {
      /* yellow box */
      content: "";
      width: 50%;
      height: 60%;
      background: var(--secondary);
      opacity: 1;
      display: block;
      position: absolute;
      left: auto;
      /* 16px - 28px, wrapped in calc function to multiple by negative 1 and get a negative clamp value */
      bottom: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
      right: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
  }
}