.procedure_slider-layout > .pk-row {
    padding-block: max(3rem, calc(6.25 * var(--su)));
}

.procedure_slider-layout .pk-row-content {
    padding-inline: calc((5.625) * var(--su));
}

.procedure_slider-layout .pk-col:has(.swiper-buttons) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.procedure_slider-layout .swiper-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.procedure_slider-layout .swiper-buttons .post-button {
    line-height: 0;
    padding: 1rem;
    cursor: pointer;
    border: 1px solid var(--pk-beige);
    border-radius: 999px;
    background: transparent;
    transition:
        color 0.3s ease-in-out,
        background-color 300ms ease-in-out,
        opacity 300ms ease-in-out;
}

.procedure_slider-layout .swiper-buttons .post-button:hover {
    opacity: 0.5;
}

.procedure_slider-layout .pk-button-group {
    justify-content: flex-end;
}

.procedure_slider-layout .swiper-container {
    overflow: hidden;
}

.procedure_slider-layout .pk-progress-wrap {
    position: relative;
    min-height: 10px;
    margin-top: 4.5rem;
}

.procedure_slider-layout .swiper-progress {
    max-width: 65%;
    position: relative;
    height: 2px;
    margin-top: 2rem;
    margin-inline: auto;
    background: var(--pk-beige);
}

.procedure_slider-layout .swiper-progress-bar {
    width: 25%;
    position: absolute;
    left: 0;
    top: -3px;
    height: 8px;
    border-radius: 999px;
    background: var(--pk-beige);
    z-index: 2;
}

.procedure_slider-layout .pk-heading {
    font-size: var(--scaling-h3);
    font-weight: 400;
    color: var(--pk-white);
}

.procedure_slider-layout .procedure-slider {
    margin-top: 2rem;
}

.procedure_slider-layout .pk-slide-item {
    color: var(--pk-white);
    padding-inline: var(--pk-column-gap);
    border-left: 2px solid var(--pk-beige);
}

.procedure_slider-layout .pk-slide-item:first-child {
    padding-left: 0;
    border-left: 0;
}

.procedure_slider-layout .pk-slide-item .pk-item-inner {
    padding-block: max(2rem, calc(2.25 * var(--su)));
}

.procedure_slider-layout .pk-slide-item .pk-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
    font-family: var(--pk-heading-font);
    font-size: max(1.25rem, calc(1.25 * var(--su)));
	letter-spacing: -5%;
    color: var(--pk-purple);
	padding: 0.375rem;
	width: max(2rem, calc(2 * var(--su)));
	height: max(2rem, calc(2 * var(--su)));
	margin-bottom: 1.25rem;
	border-radius:0.25rem ;
    background: var(--pk-beige);
}

.procedure_slider-layout .pk-slide-item .pk-item-title {
    font-family: var(--pk-heading-font);
    font-size: max(2.5rem, calc(2.5 * var(--su)));
    letter-spacing: -5%;
    line-height: max(2.375rem, calc(2.375 * var(--su)));
    font-weight: bold;
    text-transform: uppercase;
    color: var(--pk-beige);
}

.procedure_slider-layout .pk-slide-item .pk-item-meta {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
}

.procedure_slider-layout .pk-slide-item .pk-item-name {
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .procedure_slider-layout .pk-row-content {
        padding-inline: 0;
    }
    .procedure_slider-layout .swiper-buttons {
        display: none;
    }

    .procedure_slider-layout .pk-slide-item {
        padding-inline: 1rem;
    }

    .procedure_slider-layout .pk-col:has(.swiper-buttons) {
        justify-content: space-between;
    }

    .procedure_slider-layout .pk-progress-wrap {
        margin-top: 3rem;
    }
}

/* LAYOUT BEIGE BACKGROUND */

.flex-content[data-color_mode="beige"] .procedure_slider-layout .post-button {
    border: 1px solid var(--pk-purple);
}

.flex-content[data-color_mode="beige"]
    .procedure_slider-layout
    .post-button
    svg
    path {
    stroke: var(--pk-purple);
}

.flex-content[data-color_mode="beige"]
    .procedure_slider-layout
    .swiper-progress {
    background: var(--pk-purple);
}

.flex-content[data-color_mode="beige"] .swiper-progress-bar {
    background: var(--pk-purple);
}

.flex-content[data-color_mode="beige"] .procedure_slider-layout .pk-heading {
    color: var(--pk-black);
}

.flex-content[data-color_mode="beige"]
    .procedure_slider-layout
    .pk-slide-item:not(:first-child) {
    border-left: 2px solid var(--pk-purple);
}

.flex-content[data-color_mode="beige"] .procedure_slider-layout .pk-slide-item {
    color: var(--pk-black);
}

.flex-content[data-color_mode="beige"] .procedure_slider-layout .pk-item-title {
    color: var(--pk-purple);
}

@media screen and (max-width: 767px) {
}