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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-690 {
        padding: var(--sectionPadding);
    }
    #services-690 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-690 .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;
    }
    #services-690 .cs-flex-group {
        /* prevents flexbox from squishing it */
        flex: none;
    }

    #services-690 .cs-color {
        color: var(--primary);
    }

    #services-690 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        row-gap: 1rem;
    }
    #services-690 .cs-item {
        list-style: none;
        width: 100%;
        /* 24px - 40px top & bottom */
        padding: clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
        background-color: #f7f8f8;
        box-sizing: border-box;
        transition:
            background-color 0.3s,
            transform 0.3s,
            box-shadow 0.3s;
    }
    #services-690 .cs-item:hover {
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 50px;
        transform: translateY(-0.4375rem);
    }
    #services-690 .cs-item:hover .cs-picture:before {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    #services-690 .cs-link {
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #services-690 .cs-picture {
        width: 4rem;
        height: 4rem;
        margin: 0;
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 12px 30px rgba(26, 26, 26, 0.04);
        position: relative;
        z-index: 1;
    }
    #services-690 .cs-icon {
        height: 2rem;
        width: auto;
    }
    #services-690 .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-690 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        text-align: center;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-690 .cs-container {
        max-width: 80rem;
    }
    #services-690 .cs-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;
    }
    #services-690 .cs-flex-group {
        width: 50%;
    }
    #services-690 .cs-card-group {
        /* pushes down the same amount the 2nd cards are translated down to maintain the even spacing at the bottom of the cs-card-group */
        margin-bottom: 2.5rem;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 1.25rem;
    }
    #services-690 .cs-item {
        width: 30vw;
        max-width: 25.8125rem;
    }
    #services-690 .cs-item:nth-of-type(2) {
        transform: translateY(2.5rem);
    }
    #services-690 .cs-item:nth-of-type(2):hover {
        /* make these cards a separate hover translate amount, they're already translated 40px down, so to match the same hover animations as the other cards we just subtract their translate values from the 40px and they will move up by the same amount as the other cards */
        transform: translateY(2.0625rem);
    }
}