.process-flow-container,
.process-flow-tab-content {
    --container-padding: 100px;
    --step-padding: 30px;
    --step-content-gap: 10px;
    --step-font-size-num: 48px;
    --step-font-size: 24px;

    --step-content-category-font-size: max(16px, min(28px, calc(28 / 1920 * 100vw)));
    --step-content-category-font-weight: 600;

    --step-content-tagline-font-size: max(24px, min(56px, calc(56 / 1920 * 100vw)));
    --step-content-tagline-width: max(345px, min(552px, calc(552 / 1920 * 100vw)));
    --step-content-tagline-font-weight: 800;

    --step-tab-active-title-text-color: var(--Dark-Blue, #020938);
    --step-tab-active-title-font-weight: 600;
    --step-tab-active-title-font-size: 24px;

    --step-tab-default-title-text-color: var(--Main-Green, #76BC21);
    --step-tab-default-title-font-weight: 500;
    --step-tab-default-title-font-size: 24px;

    --step-tab-default-bg-color: #F5FFEF;
    --step-tab-active-bg-color: white;
    --step-tab-active-box-shadow: -10px 10px 60px 0px #0000001A;

    --cicle-size: calc(0.5 * (var(--tabs_container-width) - 2 * var(--container-padding)) + var(--intersection-width));

    --first-cicle-gap: 48px;

    --second-cicle-bg-color: #DCF2C6;
    --slide-bullet-point-font-size: 24px;

    --slider-margin-top: 20px;
    --slider-margin-bottom: 20px;
    --slider-height: 376px;

    font-family: "Manrope", sans-serif;
    
    --step-width: 220px;
    --step-height: calc((180 / 220) * var(--step-width));
    --intersection-width: 3vw;
}

@media(min-width: 1920px) {

    .process-flow-container,
    .process-flow-tab-content {
        --tabs_container-width: 1920px;
        --tabs_container-height: calc(193px + 140px);
        --intersection-width: calc(0.07 * var(--tabs_container-width));
    }
}

@media(max-width: 1919px) {

    .process-flow-container,
    .process-flow-tab-content {
        --tabs_container-width: 100vw;
        --tabs_container-height: calc(((193 + 100) / 1920) * 100vw);
        --step-width: calc(1 / 10 * var(--tabs_container-width));
        --step-font-size-num: 22px;
        --step-tab-active-title-font-size: 16px;
        --step-tab-default-title-font-size: 16px;
    }
}

@media(max-width: 1400px) {
    .process-flow-container,
    .process-flow-tab-content {
        --step-font-size-num: 20px;
        --step-tab-active-title-font-size: 14px;
        --step-tab-default-title-font-size: 14px;
        --slide-bullet-point-font-size: 20px;
        --step-content-gap: 5px;
    }
}
@media(max-width: 1100px) {
    .process-flow-container,
    .process-flow-tab-content {
        --step-font-size-num: 20px;
        --step-tab-active-title-font-size: 14px;
        --step-tab-default-title-font-size: 14px;
        --slide-bullet-point-font-size: 16px;
        --step-content-gap: 0px;
        --slider-height: 250px;
    }
}
@media(min-width: 992px) {
    .process-flow-container,
    .process-flow-tab-content
    {
        --second-cicle-padding: 40px;
    }
    .process-flow-container.mobile {
        display: none !important;
    }
}
@media(max-width: 991px) {
    .process-flow-container,
    .process-flow-tab-content {
        --tabs_container-width: 100vw;
        --tabs_container-height: 100vw;
        --cicle-size: var(--tabs_container-width);
        --slider-height: 50vw;
        --slide-bullet-point-font-size: 15px;
        --slider-margin-top: 40px;
        --slider-margin-bottom: 40px;
        --step-width: 32vw;
        --step-tab-active-title-font-size: 16px;
        --step-tab-default-title-font-size: 16px;
        --step-content-tagline-font-size: 24px;
        --slide-bullet-point-font-size: 16px;
        --step-content-tagline-width: 80%;
        --intersection-width: 50px;
        --slide-bullet-point-font-size: 14px;
        --second-cicle-padding: 20px;
    }

    .process-flow-container.desktop {
        display: none !important;
    }
    .process-flow-container.mobile {
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
        background: linear-gradient(to bottom, transparent 50%, var(--Main-Green, #76BC21) 50%, var(--Main-Green, #76BC21) 51%, transparent 51%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 1px; /* Control the height of the "line" */
    }
    .process-flow-tab-content {
        max-width: 100vw !important;
    }
    
    .process-flow-tab-content .slider_wrapper {
        position: relative !important;
        margin-top: calc(-1 * var(--intersection-width));
        padding: 0 20px !important;
    }
    .process-flow-container .step, .process-flow-container .step * {
        top: unset !important;
    }

    .process-flow-container .swiper-pagination-bullet {
        transition: all 0.3s ease-in-out;
        width: 7px;
        height: 7px;
    }

    .process-flow-container .swiper-pagination-bullet-active {
        width: 37.33px;
        height: 7px;
        border-radius: 10px;
        background: var(--Main-Green, #76BC21);
    }
}

.process-flow-container.desktop {
    position: relative;
    width: var(--tabs_container-width);
    height: var(--tabs_container-height);
    background-image: url(./curve.png);
    aspect-ratio: 1920/293;
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: var(--step-height);
}

.process-flow-container .step {
    position: relative;
    cursor: pointer;
    text-align: center;
    background-color: var(--step-tab-default-bg-color);
    aspect-ratio: 2 / 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--step-padding);
    gap: var(--step-content-gap);
    width: var(--step-width);
    height: var(--step-height);
}


.process-flow-container .step,
.process-flow-container .step * {
    transition: all 0.3s ease-in-out;
}

.process-flow-container .step.step-1,
.process-flow-container .step.step-7 {
    top: calc(0.65 * var(--tabs_container-height));
}

.process-flow-container .step.step-2,
.process-flow-container .step.step-6 {
    top: calc(0.4 * var(--tabs_container-height));
}

.process-flow-container .step.step-3,
.process-flow-container .step.step-5 {
    top: calc(0.23 * var(--tabs_container-height));
}

.process-flow-container .step.step-4 {
    top: calc(0.15 * var(--tabs_container-height));
}

.process-flow-container .step .step-number {
    font-size: var(--step-font-size-num);
    /* color: var(--Main-Green, #76BC21); */
    color: var(--e-global-color-primary);
    font-weight: 800;
}

.process-flow-container .step .step-title {
    font-size: var(--step-tab-default-title-font-size);
    font-weight: var(--step-tab-default-title-font-weight);
    color: var(--step-tab-default-title-text-color);
}

.process-flow-tab-content {
    position: relative;
    max-width: calc(100vw - 2 * var(--container-padding));
    margin: auto;
}

.process-flow-tab-content .image_wrapper,
.process-flow-tab-content .slider_wrapper {
    aspect-ratio: 1;
    border-radius: 100%;
    overflow: hidden;
    width: var(--cicle-size);
    left: 0;
}

.process-flow-tab-content .slider_wrapper {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 0;
}

.process-flow-tab-content .image_wrapper {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: white;
    gap: var(--first-cicle-gap);
}

.process-flow-tab-content .image_wrapper .category {
    font-size: var(--step-content-category-font-size);
    font-weight: var(--step-content-category-font-weight);
    background-color: #FFFFFF4D;
    padding: 6px 16px;
    border-radius: 50px;
    text-align: center;
}

.process-flow-tab-content .image_wrapper .tagline {
    width: var(--step-content-tagline-width);
    font-size: var(--step-content-tagline-font-size);
    font-weight: var(--step-content-tagline-font-weight);
    text-align: center;
}

.process-flow-tab-content .slider_wrapper {
    background-color: var(--second-cicle-bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 55px;
}

.process-flow-tab-content .slider_wrapper .slider .slide {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    transition: all 0.5s ease-in-out;
    padding-left: var(--second-cicle-padding) !important;
    padding-right: var(--second-cicle-padding) !important;
}

.process-flow-tab-content .slider_wrapper .slider .slide:not(.swiper-slide-active) {
    opacity: 0;
}

.process-flow-tab-content .slider_wrapper .slider {
    margin-top: var(--slider-margin-top);
    margin-bottom: var(--slider-margin-bottom);
    height: var(--slider-height);
}

.process-flow-tab-content .slider_wrapper .swiper-pagination-bullet {
    transition: width 0.2s;
}

.process-flow-tab-content .slider_wrapper .swiper-pagination-bullet-active {
    background: black;
}

.process-flow-tab-content .slider_wrapper .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
}

.process-flow-tab-content .slider_wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 48px;
    border-radius: 4px;
}

.process-flow-tab-content .slider_wrapper .navigation {
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
}

.process-flow-tab-content .slider_wrapper .navigation .swiper-button-prev,
.process-flow-tab-content .slider_wrapper .navigation .swiper-rtl .swiper-button-next,
.process-flow-tab-content .slider_wrapper .navigation .swiper-button-next,
.process-flow-tab-content .slider_wrapper .navigation .swiper-button-prev {
    position: relative;
    left: unset;
    right: unset;
    top: unset;
    margin-top: 0;
}

.process-flow-tab-content .swiper-button-prev:after,
.process-flow-tab-content .swiper-button-next:after {
    background-image: url(arrow-right.png);
    background-size: contain;
    width: 24px;
    height: 24px;
    content: " ";
    color: black;
    display: inline-block;
}

.process-flow-tab-content .swiper-button-prev:after {
    transform: rotate(180deg);
}

.process-flow-tab-content .slider_wrapper .swiper-pagination {
    position: relative;
    bottom: unset;
    top: unset;
    margin-top: 10px;
}

.process-flow-tab-content .slider_wrapper .slider .slide,
.process-flow-tab-content .slider_wrapper .slider .slide ul,
.process-flow-tab-content .slider_wrapper .slider .slide ul li {
    padding-left: 0;
    list-style: none;
    text-align: center;
    font-family: Manrope, sans-serif;
    font-size: var(--slide-bullet-point-font-size);
}

.process-flow-tab-content .slider_wrapper .slider .slide ul li:not(:last-child):after {
    content: "•";
    color: var(--e-global-color-primary);
    font-size: var(--slide-bullet-point-font-size);
    padding-left: 0.5em;
    display: block;
}

@media (max-width: 768px) {
    .process-flow-container {
        height: auto;
        background-size: contain;
    }

    .step {
        position: relative;
        margin: 20px auto;
        left: auto;
        top: auto;
    }
}



#private_label_carousel-0:not(:checked)~.content.tab-0 {
    display: none;
}

#private_label_carousel-0:checked~.process-flow-container [for="private_label_carousel-0"] {
    background-color: var(--step-tab-active-bg-color);
    box-shadow: var(--step-tab-active-box-shadow);
}

#private_label_carousel-0:checked~.process-flow-container [for="private_label_carousel-0"] .step-title {
    color: var(--step-tab-active-title-text-color);
    font-weight: var(--step-tab-active-title-font-weight);
    font-size: var(--step-tab-active-title-font-size);
}

#private_label_carousel-1:not(:checked)~.content.tab-1 {
    display: none;
}

#private_label_carousel-1:checked~.process-flow-container [for="private_label_carousel-1"] {
    background-color: var(--step-tab-active-bg-color);
    box-shadow: var(--step-tab-active-box-shadow);
}

#private_label_carousel-1:checked~.process-flow-container [for="private_label_carousel-1"] .step-title {
    color: var(--step-tab-active-title-text-color);
    font-weight: var(--step-tab-active-title-font-weight);
    font-size: var(--step-tab-active-title-font-size);
}

#private_label_carousel-2:not(:checked)~.content.tab-2 {
    display: none;
}

#private_label_carousel-2:checked~.process-flow-container [for="private_label_carousel-2"] {
    background-color: var(--step-tab-active-bg-color);
    box-shadow: var(--step-tab-active-box-shadow);
}

#private_label_carousel-2:checked~.process-flow-container [for="private_label_carousel-2"] .step-title {
    color: var(--step-tab-active-title-text-color);
    font-weight: var(--step-tab-active-title-font-weight);
    font-size: var(--step-tab-active-title-font-size);
}

#private_label_carousel-3:not(:checked)~.content.tab-3 {
    display: none;
}

#private_label_carousel-3:checked~.process-flow-container [for="private_label_carousel-3"] {
    background-color: var(--step-tab-active-bg-color);
    box-shadow: var(--step-tab-active-box-shadow);
}

#private_label_carousel-3:checked~.process-flow-container [for="private_label_carousel-3"] .step-title {
    color: var(--step-tab-active-title-text-color);
    font-weight: var(--step-tab-active-title-font-weight);
    font-size: var(--step-tab-active-title-font-size);
}

#private_label_carousel-4:not(:checked)~.content.tab-4 {
    display: none;
}

#private_label_carousel-4:checked~.process-flow-container [for="private_label_carousel-4"] {
    background-color: var(--step-tab-active-bg-color);
    box-shadow: var(--step-tab-active-box-shadow);
}

#private_label_carousel-4:checked~.process-flow-container [for="private_label_carousel-4"] .step-title {
    color: var(--step-tab-active-title-text-color);
    font-weight: var(--step-tab-active-title-font-weight);
    font-size: var(--step-tab-active-title-font-size);
}

#private_label_carousel-5:not(:checked)~.content.tab-5 {
    display: none;
}

#private_label_carousel-5:checked~.process-flow-container [for="private_label_carousel-5"] {
    background-color: var(--step-tab-active-bg-color);
    box-shadow: var(--step-tab-active-box-shadow);
}

#private_label_carousel-5:checked~.process-flow-container [for="private_label_carousel-5"] .step-title {
    color: var(--step-tab-active-title-text-color);
    font-weight: var(--step-tab-active-title-font-weight);
    font-size: var(--step-tab-active-title-font-size);
}

#private_label_carousel-6:not(:checked)~.content.tab-6 {
    display: none;
}

#private_label_carousel-6:checked~.process-flow-container [for="private_label_carousel-6"] {
    background-color: var(--step-tab-active-bg-color);
    box-shadow: var(--step-tab-active-box-shadow);
}

#private_label_carousel-6:checked~.process-flow-container [for="private_label_carousel-6"] .step-title {
    color: var(--step-tab-active-title-text-color);
    font-weight: var(--step-tab-active-title-font-weight);
    font-size: var(--step-tab-active-title-font-size);
}