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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-343 {
      padding: var(--sectionPadding);
  }
  #services-343 .cs-container {
      width: 100%;
      /* changes to 1440px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-343 .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-343 .cs-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 1.6vw, 1.25rem);
  }
  #services-343 .cs-item {
      list-style: none;
      width: 100%;
      max-width: 31.25rem;
      border-radius: 0.5rem;
      background-color: #fff;
      position: relative;
      z-index: 1;
      transition:
          box-shadow 0.3s,
          transform 0.3s;
  }
  #services-343 .cs-item:hover {
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      transform: translateY(-0.4375rem);
  }
  #services-343 .cs-item:hover .cs-picture img {
      opacity: 0.3;
      transform: scale(1.1);
  }
  #services-343 .cs-item:hover .cs-h3 {
      color: var(--primary);
  }
  #services-343 .cs-item:before {
      /* border, done in pseudo so it can sit under the picture */
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 0.5rem;
      border: 1px solid #e8e8e8;
      /* prevents border from affecting height and width */
      box-sizing: border-box;
      background: transparent;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #services-343 .cs-link {
      text-decoration: none;
      /* 16px - 24px */
      padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
      display: block;
  }
  #services-343 .cs-picture {
      width: 100%;
      height: 15rem;
      /* 16px - 24px */
      margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
      border-radius: 0.5rem 0.5rem 0 0;
      background-color: var(--primary);
      /* clips the img tag corners */
      overflow: hidden;
      display: block;
      position: relative;
      z-index: 10;
  }
  #services-343 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition:
          transform 0.6s,
          opacity 0.3s;
  }
  #services-343 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 3vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: 700;
      color: var(--headerColor);
      margin: 0 0 0.75rem 0;
      /* 16px - 24px */
      padding: 0 clamp(1rem, 2vw, 1.5rem);
      transition: color 0.3s;
  }
  #services-343 .cs-item-text {
      /* 14px - 16px  */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      color: var(--bodyTextColor);
      margin: 0;
      /* 16px - 24px */
      padding: 0 clamp(1rem, 2.2vw, 1.5rem);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-343 .cs-container {
      max-width: 90rem;
  }
  #services-343 .cs-card-group {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
  }
  #services-343 .cs-item {
      width: 48.9%;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-343 .cs-item {
      /* we do this so it's stackable. You can add 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(23.8%, 23vw, 23.95%);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-342 {
        padding: var(--sectionPadding);
    }
    #services-342 .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-342 .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-342 .cs-card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 1.6vw, 1.25rem); 
    }
    #services-342 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        border-radius: 0.5rem;
        position: relative;
        z-index: 1;
        transition:
            box-shadow 0.3s,
            transform 0.3s;
    }
    #services-342 .cs-item:hover {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        transform: translateY(-0.4375rem);
    }
    #services-342 .cs-item:hover .cs-picture img {
        opacity: 0.3;
        transform: scale(1.1);
    }
    #services-342 .cs-item:hover .cs-h3 {
        color: var(--primary);
    }
    #services-342 .cs-item:before {
        /* border, done in pseudo so it can sit under the picture */
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        border: 1px solid #e8e8e8;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        background: transparent;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-342 .cs-link {
        text-decoration: none;
        /* 16px - 24px */
        padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
        display: block;
    }
    #services-342 .cs-picture {
        width: 100%;
        height: 15rem;
        /* 16px - 24px */
        margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: var(--primary);
        /* clips the img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 10;
    }
    #services-342 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition:
            transform 0.6s,
            opacity 0.3s;
    }
    #services-342 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 3vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        color: var(--headerColor);
        margin: 0 0 0.75rem 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        transition: color 0.3s;
    }
    #services-342 .cs-item-text {
        /* 14px - 16px  */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        color: var(--bodyTextColor);
        margin: 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2.2vw, 1.5rem);
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #services-342 .cs-card-group {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }
    #services-342 .cs-item {
        /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We don't use grid because if you have an odd number of cards, they don't stay centered, they align with their grid lines. This way its more FLEX-ible*/
        width: clamp(31.85%, 30.5vw, 32.28%);
    }
  }