.section--services--content {
    display: flex;

    justify-content: center;

    gap: 2rem;
}

.section--services--content.services--content-left {
    flex-direction: column-reverse;
}

.section--services--content.services--content-right {
    flex-direction: column;
}

.services--headings {
    background: var(--crl-primary);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 300px;
    text-align: center;
}

.services--icon--bg {
    border-radius: 50%;
    background: white;
    width: 80px;
    height: 80px;
    position: relative;
    margin: auto;
}

.services__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.services__title {
    margin: unset;
    margin-top: 1rem;
}

.services__description {
    max-width: 323px;
    text-align: center;
}

.services__arrow {
    display: none;
}

.services--content--wrapper,
.services__arrow {
    position: relative;
}

.services__arrow.services__right__arrow {
    padding-left: 2rem;
}

.services__arrow.services__left__arrow {
    padding-right: 2rem;
}

.services__line__wrap {
    display: none;
    position: absolute;
    background: var(--crl-primary);
    width: 3px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.section--services--content:not(:first-child) {
    margin-top: 3rem;
}

/* 2xs */
@media (min-width: 375px) {
    .services--headings {
        margin: auto;
        min-width: 300px;
    }

    .section--services--content {
        align-items: center;
    }
}

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .services__line__wrap,
    .services__arrow {
        display: block;
    }

    .section--services--content {
        justify-content: space-evenly;
        gap: 0rem;
    }

    .section--services--content.services--content-right {
        flex-direction: row;
    }

    .section--services--content.services--content-left {
        flex-direction: row;
    }

    .services--headings {
        margin: unset;
    }

    .services__description {
        text-align: left;
    }
}





/*lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1200px) {} */

/* 2xl */
/* @media (min-width: 1280px) {} */

/* 3xl */
/* @media (min-width: 1536px) {} */