.services {
    background-color: var(--color-secondary-dark);
    padding: var(--spacing-lg) var(--spacing-md);
}

.services-heading {
    color: var(--color-primary-light);
    line-height: 1.2rem;
}

.services-subheading {
    color: var(--color-gray-400);
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.services-wrapper-mobile {
    margin-top: var(--spacing-lg);
}

.services-wrapper-desktop {
    margin-top: var(--spacing-lg);
    display: none;
}

.services-wrapper-desktop>* {
    width: 50%;
}

.services-card,
.services-card-mobile {
    background-color: var(--color-gray-400);
    padding: var(--spacing-md-lg);
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgb(108, 117, 125, 0.3);
}

.services-card,
.services-card>* {
    transition: 0.8s;
}

.services-card-mobile {
    margin-bottom: var(--spacing-lg);
    padding: 0;
}

.services-card-mobile > .services-title,
.services-card-mobile > .services-summary {
    padding: 0 var(--spacing-md) var(--spacing-md);
}

.active-card,
.services-card-mobile {
    z-index: 4;
    background-color: var(--color-white);
    box-shadow: var(--shadow-box);
    overflow: visible;
    border: 0;
    border-left: solid 4px var(--color-highlight);
}

.services-card:hover:not(.active-card) {
    cursor: pointer;
    background-color: var(--color-gray-200);
}

.services-card>.right-arrow {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 40px;
    left: 12px;
}

.active-card>.right-arrow {
    transform: rotate(90deg);
}

.active-card>.card-bridge {
    opacity: 1;
}

.services-title {
    line-height: 1.6rem;
}

.active-card>.services-title,
.services-card-mobile>.services-title {
    color: var(--color-secondary-light);
    padding-bottom: var(--spacing-md);
}

.services-wrapper-desktop .services-summary {
    line-height: 1.6rem;
    color: var(--color-gray-800);
    display: none;
}

.active-card>.services-summary {
    display: block;
}

.card-bridge {
    position: absolute;
    width: var(--spacing-jumbo);
    height: 100%;
    background-color: var(--color-white);
    top: 0;
    right: calc(-1 * var(--spacing-jumbo));
    opacity: 0;
}

.services-image {
    position: relative;
}

.services-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: var(--shadow-box);
    opacity: 0;
    transition: 0.8s;
    position: absolute;
}

.services-image>.active-image {
    opacity: 1;
}

.services-image-mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: var(--spacing-md);
}

@media screen and (min-width: 960px) {

    .services-wrapper-mobile {
        display: none;
    }

    .services-wrapper-desktop {
        margin-top: var(--spacing-lg);
        display: flex;
    }

}

@media screen and (min-width: 1300px) {

    .services {
        padding: var(--spacing-mega);
    }

    .services-wrapper-desktop {
        gap: var(--spacing-jumbo);
    }

}