/* =========================================
   SJ ELECTRONICS - SERVICE CARD DESIGN
========================================= */

.sj-service-reference-layout {
    /* background: #020817; */
    /* padding: 30px 0; */
}

.sj-service-reference-layout .services-layout-one__slider {
    row-gap: 50px;
}

.sj-service-reference-layout .services-layout-one__slide {
    display: flex;
}


/* CARD */

.sj-service-reference-layout .sj-service-card {
    position: relative;
    width: 100%;
    min-height: 370px;

    background: #1b2534;

    padding: 105px 25px 30px;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    /* KEEP ANGULAR CUT DESIGN */
    clip-path: polygon(
        0 0,
        100% 0,
        100% 78%,
        82% 100%,
        0 100%
    );

    transition: background 0.3s ease;
}


/* CARD HOVER */

.sj-service-reference-layout .sj-service-card:hover {
    background: #253246;
    /* transform: translateY(-5px); */
}


/* ICON BOX */
.sj-service-reference-layout .sj-service-card__icon {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 113px;
    height: 87px;

    background: var(--primary);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;
}


/* ICON IMAGE */

.sj-service-reference-layout .sj-service-icon-image {
    width: 55px;
    height: 55px;

    object-fit: contain;

    display: block;

    filter: brightness(0) invert(1);
}


/* NUMBER */

.sj-service-reference-layout .sj-service-card__number {
    position: absolute;

    top: 20px;
    right: 25px;

    color: #aab5c5;

    font-size: 16px;
    font-weight: 500;

    line-height: 1;
}


/* CONTENT */

.sj-service-reference-layout .sj-service-card__content {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    flex-grow: 1;
}


/* TITLE */

.sj-service-reference-layout .sj-service-card__title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0 0 15px;
    /* font-family: inherit; */
}


/* DESCRIPTION */

.sj-service-reference-layout .sj-service-card__description {
    color: #b9c4d3;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* READ MORE */

.sj-service-reference-layout .sj-service-card__read-more {
    display: inline-flex;

    align-items: center;
    justify-content: center;
  
    gap: 8px;

    margin-top: auto;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none !important;

    transition: color 0.3s ease;
}

.sj-service-reference-layout .sj-service-card__read-more svg {
    transition: transform 0.3s ease;
}

.sj-service-reference-layout .sj-service-card__read-more:hover {
    color: var(--primary);
}

.sj-service-reference-layout .sj-service-card__read-more:hover svg {
    transform: translateX(5px);
}


/* TABLET */

@media (max-width: 991px) {

    .sj-service-reference-layout .sj-service-card {
        min-height: 280px;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .sj-service-reference-layout {
        /* padding: 20px 0; */
    }

    .sj-service-reference-layout .services-layout-one__slider {
        row-gap: 40px;
    }

    .sj-service-reference-layout .sj-service-card {
        min-height: 260px;

        padding: 98px 20px 25px;
    }

    .sj-service-reference-layout .sj-service-card__icon {
        width: 75px;
        height: 75px;

        /* top: -15px; */
    }

    .sj-service-reference-layout .sj-service-icon-image {
        width: 45px;
        height: 45px;
    }

    .sj-service-reference-layout .sj-service-card__title {
        font-size: 15px;
    }

    .sj-service-reference-layout .sj-service-card__description {
        font-size: 14px;
        line-height: 1.7;
    }

}