/*-- -------------------------- -->
<---          Forms          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-346 {
    padding: var(--sectionPadding);
    background: var(--secondary);
  }
  #services-346 .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-346 .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-346 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-346 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    /* 32px - 40px top & bottom */
    /* 28px - 40px left & right */
    padding: clamp(2rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 0.5rem;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.527);
    box-sizing: border-box;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  }
  #services-346 .cs-item:hover {
    background-color: #222222;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 50px;
    transform: translateY(-0.4375rem);
  }
  #services-346 .cs-item:hover .cs-picture:before {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  #services-346 .cs-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #services-346 .cs-picture {
    width: 5rem;
    height: 5rem;
    margin: 0;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.055);
    position: relative;
    z-index: 1;
  }
  #services-346 .cs-icon {
    height: 2rem;
    width: auto;
  }
  #services-346 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #services-346 .cs-item-text {
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
  #services-346 .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;
  }
  #services-346 .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;
  }
  #services-346 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-346 .cs-card-group {
    flex-direction: row;
    justify-content: center;
  }
  #services-346 .cs-item {
    /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
    width: clamp(31.85%, 30.5vw, 32.28%);
  }
}