.ps-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Direction responsive handling via body / wrapper class attributes */
.ps-direction-horizontal .ps-container {
    flex-direction: row;
    align-items: flex-start;
}
.ps-direction-vertical .ps-container {
    flex-direction: column;
}

/* Equal Height feature */
.ps-equal-height-yes .ps-container {
    align-items: stretch;
}
.ps-equal-height-yes .ps-step {
    display: flex;
    flex-direction: column;
}
.ps-equal-height-yes .ps-step-text-wrapper {
    flex-grow: 1;
}

/* Steps and Alignments */
.ps-step {
    position: relative;
    flex: 1 1 0%;
    min-width: 200px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform var(--ps-transition-duration, 300ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow var(--ps-transition-duration, 300ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ps-direction-vertical .ps-step {
    flex: unset;
    width: 100%;
    min-width: auto;
}

/* Alignment Settings */
.ps-align-start .ps-step { align-items: flex-start; }
.ps-align-start .ps-step-heading, .ps-align-start .ps-step-desc { text-align: left; }

.ps-align-center .ps-step { align-items: center; }
.ps-align-center .ps-step-heading, .ps-align-center .ps-step-desc { text-align: center; }

.ps-align-end .ps-step { align-items: flex-end; }
.ps-align-end .ps-step-heading, .ps-align-end .ps-step-desc { text-align: right; }

/* Shape architecture */
.ps-step-shape-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ps-step-shape {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: all var(--ps-transition-duration, 300ms) ease;
    z-index: 2;
}

.ps-step-shape-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.ps-step-shape-content svg {
    display: block;
}

/* Shape Geometry Variants */
.ps-shape-circle {
    border-radius: 50% !important;
}
.ps-shape-square {
    border-radius: 0px !important;
}
.ps-shape-rounded {
    border-radius: 8px !important;
}
.ps-shape-diamond {
    transform: rotate(45deg);
}
.ps-shape-diamond .ps-step-shape-content {
    transform: rotate(-45deg);
}
.ps-shape-hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.ps-shape-custom_svg {
    border: none !important;
    background: transparent !important;
}
.ps-custom-svg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* CONNECTORS using CSS pseudo-elements strictly */
/* Default connector variables */
.ps-step::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    border: 0;
}

/* Horizontal line connector configuration */
.ps-direction-horizontal .ps-step:not(:last-child)::after {
    border-top-width: var(--ps-conn-thickness, 2px);
    border-style: inherit;
    border-color: inherit;
    width: calc(var(--ps-conn-length, 100%) - var(--ps-conn-gap-before, 15px) - var(--ps-conn-gap-after, 15px));
    left: calc(50% + var(--ps-conn-gap-before, 15px) + var(--ps-conn-offset, 0px));
    top: calc(var(--shape-size, 60px) / 2);
    transform: translateY(-50%);
}

/* Vertical line connector configuration */
.ps-direction-vertical .ps-step:not(:last-child)::after {
    border-left-width: var(--ps-conn-thickness, 2px);
    border-style: inherit;
    border-color: inherit;
    height: calc(var(--ps-conn-length, 100%) - var(--ps-conn-gap-before, 15px) - var(--ps-conn-gap-after, 15px));
    top: calc(100% + var(--ps-conn-gap-before, 15px) + var(--ps-conn-offset, 0px));
    left: 50%;
    transform: translateX(-50%);
}

/* RTL Support */
.rtl .ps-direction-horizontal .ps-step:not(:last-child)::after {
    left: auto;
    right: calc(50% + var(--ps-conn-gap-before, 15px) + var(--ps-conn-offset, 0px));
}

/* Hover Effects */
.ps-hover-effect-lift .ps-step:hover {
    transform: translateY(-5px);
}
.ps-hover-effect-scale .ps-step:hover {
    transform: scale(1.03);
}
.ps-hover-effect-glow .ps-step:hover .ps-step-shape {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}
.ps-hover-effect-rotate_2 .ps-step:hover {
    transform: rotate(2deg);
}

/* Viewport Animation States */
.ps-animate-ready {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.ps-animate-ready.ps-animate-fade.ps-animated {
    opacity: 1;
}

.ps-animate-ready.ps-animate-fade_up {
    transform: translateY(20px);
}
.ps-animate-ready.ps-animate-fade_up.ps-animated {
    opacity: 1;
    transform: translateY(0);
}

.ps-animate-ready.ps-animate-fade_down {
    transform: translateY(-20px);
}
.ps-animate-ready.ps-animate-fade_down.ps-animated {
    opacity: 1;
    transform: translateY(0);
}

.ps-animate-ready.ps-animate-zoom {
    transform: scale(0.9);
}
.ps-animate-ready.ps-animate-zoom.ps-animated {
    opacity: 1;
    transform: scale(1);
}
