#services_client {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
}

#services_client .common_container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.services_client_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #dce4ff;
}

.service_left {
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.service_left_repeater {
    position: relative;
    width: 60%;
    height: 60vh;
    margin-top: 20vh;
}

.service_left_card {
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 300px;
    transition: opacity 0.5s ease;
    opacity: 0;
    transform: none;
}

.service_left_card h3 {
    font-size: 45px;
    line-height: 57px;
    color: #000;
    font-weight: 600;
    font-family: 'Infra';
    margin: 0 0 30px 0;
}

.service_left_card p {
    font-size: 20px;
    line-height: 32px;
    color: #2B2B2B;
    font-weight: 400;
    font-family: 'Infra';
}

.service_left_card a {
    text-decoration: none;
    width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #130320;
    font-weight: 600;
    padding: 14px 0px;
    background-color: #FFF;
    border-radius: 50px;
}

.service_left_card a i {
    font-size: 22px;
    color: #130320;
    margin-right: 20px;
}

.service_left_circle {
    width: 120vh;
    height: 120vh;
    min-height: 1143px;
    min-width: 1143px;
    position: absolute;
    border-radius: 50%;
    top: -50vh;
    left: -28vh;
}

.service_right {
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* overflow: hidden; */
    z-index: 1;
}

.service_right_card {
    position: absolute;
    width: 100%;
    transition: transform 1s ease, opacity 0.5s ease;
    transform-origin: center center;
    opacity: 0;
    top: 30%;
    left: 0%;
}

.service_right_card[data-index="0"] { transform: rotate(0deg); }
.service_right_card[data-index="1"] { transform: rotate(90deg); }
.service_right_card[data-index="2"] { transform: rotate(180deg); }
.service_right_card[data-index="3"] { transform: rotate(270deg); }

.service_right_card img {
    width: 70%;
    height: auto;
    object-fit: contain;
}


.service_right_card[data-index="2"] img,.service_right_card[data-index="3"] img {
    width: 48vw;
    height: auto;
}

.service_right_circle {
    width: 100vh;
    height: 100vh;
    min-height: 1143px;
    min-width: 1143px;
    position: absolute;
    border-radius: 50%;
    bottom: -50vh;
    right: -50vh;
}

span.service_circle_color,
span.services_client_container_bg {
    display: none;
}

.services_client.is-sticky {
    position: sticky;
    top: 0px;
    z-index: 10;
}


/* Transparent Images in Banner Section */
img.trans_png {
    position: absolute;
    opacity: 0.5;
}

img.trans_png.trans_png_0_0, img.trans_png.trans_png_1_0, img.trans_png.trans_png_2_0, img.trans_png.trans_png_3_0 {
    bottom: 8vw;
    left: -18vw;
    width: 120px;
    rotate: -45deg;
}

img.trans_png.trans_png_0_1, img.trans_png.trans_png_1_1, img.trans_png.trans_png_2_1, img.trans_png.trans_png_3_1 {
    width: 120px;
    top: -12vh;
    right: 40vw;
    rotate: 45deg;
}


img.trans_png.trans_png_0_2, img.trans_png.trans_png_1_2, img.trans_png.trans_png_2_2, img.trans_png.trans_png_3_2 {
    width: 120px;
    top: -16vh;
    right: 23vw;
    rotate: -45deg;
}

img.trans_png.trans_png_0_3, img.trans_png.trans_png_1_3, img.trans_png.trans_png_2_3, img.trans_png.trans_png_3_3 {
    width: 120px;
    bottom: 4vh;
    right: 78vw;
    rotate: 45deg;
}

/* .services_client {
    transition: transform 0.6s ease, opacity 0.6s ease;
    will-change: transform, opacity;
}

.services_client.is-sticky {
    transform: translateY(-50px);
    opacity: 0;
    pointer-events: none;
} */

/* Banner Section Min-width 1280px Max-width 1366px */
@media only screen and  (min-width: 1280px) and (max-width: 1366px){
    .service_left_circle {
        min-height: 953px;
        min-width: 953px;
    }

    .service_right_circle {
        min-height: 953px;
        min-width: 953px;
    }
}


/* Banner Section Min-width 1025px Max-width 1279px */
@media only screen and  (min-width: 1024px) and (max-width: 1279px){
    .service_left_circle {
        min-height: unset;
        min-width: unset;
    }

    .service_right_circle {
        min-height: unset;
        min-width: unset;
    }

    .service_left_card h3 {
        font-size: 40px;
        line-height: 48px;
        margin: 0 0 15px;
    }

    .service_left_card p {
        font-size: 16px;
        line-height: 24px;
    }
}


/* Banner Section Max-width 1024px */
@media only screen and (max-width: 1023px) {

    .service_left_circle {
        width: 100vh;
        height: 100vh;
        min-height: unset;
        min-width: unset;
        position: absolute;
        border-radius: 50%;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .services_client_container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .service_left {
        width: 88%;
        height: 50vh;
        display: flex;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .service_left_repeater {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 14vh;
    }

    .service_left_card {
        position: absolute;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: opacity .5s ease;
        opacity: 0;
        transform: none;
    }

    .service_left_card h3 {
        font-size: 40px;
        line-height: 48px;
        text-align: center;
        margin: 0 0 30px 0;
    }

    .service_left_card p {
        font-size: 16px;
        line-height: 26px;
        text-align: center;
    }

    .service_left_card a {
        width: 280px;
        font-size: 16px;
        padding: 14px 0;
    }

    .service_right {
        width: 88%;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        /* overflow: hidden; */
        z-index: 1;
    }

    .service_right_card {
        position: absolute;
        width: auto;
        transition: transform 1s ease, opacity .5s ease;
        transform-origin: center center;
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }

    .service_right_card img {
        width: 80vw;
        height: auto;
        object-fit: contain;
    }

    .service_right_card[data-index="2"] img,.service_right_card[data-index="3"] img {
        width: 90vw;
        height: auto;
    }


    .service_right_circle {
        width: 100vh;
        height: 100vh;
        min-height: unset;
        min-width: unset;
        position: absolute;
        border-radius: 50%;
        top: 120%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    img.trans_png.trans_png_0_0, img.trans_png.trans_png_1_0, img.trans_png.trans_png_2_0, img.trans_png.trans_png_3_0 {
        top: 0vw;
        left: 0vw;
        right: unset;
        bottom: unset;
        width: 90px;
        rotate: -45deg;
    }

    img.trans_png.trans_png_0_1, img.trans_png.trans_png_1_1, img.trans_png.trans_png_2_1, img.trans_png.trans_png_3_1 {
        width: 90px;
        top: -10vh;
        right: 40vw;
        left: unset;
        bottom: unset;
        rotate: 35deg;
    }

    img.trans_png.trans_png_0_2, img.trans_png.trans_png_1_2, img.trans_png.trans_png_2_2, img.trans_png.trans_png_3_2 {
        width: 100px;
        top: -26vh;
        right: 0vw;
        left: unset;
        bottom: unset;
        rotate: -45deg;
    }

    img.trans_png.trans_png_0_3, img.trans_png.trans_png_1_3, img.trans_png.trans_png_2_3, img.trans_png.trans_png_3_3 {
        width: 100px;
        bottom: -6vh;
        right: -20vw;
        left: unset;
        top: unset;
        rotate: 45deg;
    }
}


/* Banner Section Min-width 768px and Max-width 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

}


/* Banner Section Min-width 600px and Max-width 767px */
@media only screen and (min-width: 600px) and (max-width: 767px) {

}


/* Banner Section and Mix-width 420px Max-width 599px */
@media only screen and (min-width: 420px) and  (max-width: 599px) {

    .service_left {
        top: -10vh;
    }

    .service_left_card h3 {
        font-size: 28px;
        line-height: 36px;
        margin: 0px 0 15px;
    }

    .service_left_card p {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    .service_left_card a {
        width: 210px;
        font-size: 15px;
        padding: 14px 0;
    }

    .service_left_card a i {
        font-size: 18px;
        margin-right: 10px;
    }

    .service_right_card img {
        width: 90vw;
        height: auto;
        min-width: 300px;
        min-height: 300px;
    }


    img.trans_png.trans_png_0_0, img.trans_png.trans_png_1_0, img.trans_png.trans_png_2_0, img.trans_png.trans_png_3_0 {
        top: -80vw;
        left: 10vw;
        right: unset;
        bottom: unset;
        width: 60px;
        rotate: -45deg;
        min-width: unset;
        min-height: unset;
    }

    img.trans_png.trans_png_0_1, img.trans_png.trans_png_1_1, img.trans_png.trans_png_2_1, img.trans_png.trans_png_3_1 {
        width: 60px;
        top: -20vh;
        right: 46vw;
        left: unset;
        bottom: unset;
        rotate: 45deg;
        min-width: unset;
        min-height: unset;
    }

    img.trans_png.trans_png_0_2, img.trans_png.trans_png_1_2, img.trans_png.trans_png_2_2, img.trans_png.trans_png_3_2 {
        width: 80px;
        top: 10vh;
        right: 10vw;
        left: unset;
        bottom: unset;
        rotate: -45deg;
        min-width: unset;
        min-height: unset;
    }

    img.trans_png.trans_png_0_3, img.trans_png.trans_png_1_3, img.trans_png.trans_png_2_3, img.trans_png.trans_png_3_3 {
        width: 60px;
        bottom: 36vh;
        right: 8vw;
        left: unset;
        top: unset;
        rotate: 45deg;
        min-width: unset;
        min-height: unset;
    }
}



/* Banner Section and Max-width 419px */
@media only screen and (max-width: 419px) {

    .service_left {
        top: -10vh;
    }

    .service_left_card h3 {
        font-size: 24px;
        line-height: 32px;
        margin: 0px 0 15px;
    }

    .service_left_card p {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    .service_left_card a {
        width: 210px;
        font-size: 15px;
        padding: 14px 0;
    }

    .service_left_card a i {
        font-size: 18px;
        margin-right: 10px;
    }

    .service_right_card img {
        width: 90vw;
        height: auto;
        min-width: 300px;
        min-height: 300px;
    }

    img.trans_png.trans_png_0_0, img.trans_png.trans_png_1_0, img.trans_png.trans_png_2_0, img.trans_png.trans_png_3_0 {
        top: -80vw;
        left: 10vw;
        right: unset;
        bottom: unset;
        width: 60px;
        rotate: -45deg;
        min-width: unset;
        min-height: unset;
    }

    img.trans_png.trans_png_0_1, img.trans_png.trans_png_1_1, img.trans_png.trans_png_2_1, img.trans_png.trans_png_3_1 {
        width: 60px;
        top: -20vh;
        right: 46vw;
        left: unset;
        bottom: unset;
        rotate: 45deg;
        min-width: unset;
        min-height: unset;
    }

    img.trans_png.trans_png_0_2, img.trans_png.trans_png_1_2, img.trans_png.trans_png_2_2, img.trans_png.trans_png_3_2 {
        width: 80px;
        top: 10vh;
        right: 10vw;
        left: unset;
        bottom: unset;
        rotate: -45deg;
        min-width: unset;
        min-height: unset;
    }

    img.trans_png.trans_png_0_3, img.trans_png.trans_png_1_3, img.trans_png.trans_png_2_3, img.trans_png.trans_png_3_3 {
        width: 60px;
        bottom: 36vh;
        right: 8vw;
        left: unset;
        top: unset;
        rotate: 45deg;
        min-width: unset;
        min-height: unset;
    }
}