body{
  margin: auto 2%;
}
.pmsteps-process {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsive behavior */
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding: 2rem 0;
}

.pmsteps-step {
    flex: 1;
    text-align: center;
    min-width: 120px; /* Ensure each step has a minimum width */
    max-width: 200px; /* Limit maximum width for better spacing on smaller screens */
    position: relative;
    min-height: 90px;
    overflow: hidden; /* Ensure the pseudo-element stays within bounds */
}

/* Custom hover animations for the step circle */
.pmsteps-step:hover .pmsteps-step-circle {
    animation: pmsteps-tada 0.5s ease-in-out, pmsteps-swing 0.5s ease-in-out, pmsteps-balloon 0.5s ease-in-out; /* Combine all three animations */
    transform: scale(1.1); /* Keep the existing scale effect */
}

/* Custom Animation: Tada (shaking and slight scaling) */
@keyframes pmsteps-tada {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(1.1) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1.1) rotate(0); }
}

/* Custom Animation: Swing (pendulum-like motion with left-to-right/right-to-left movement) */
@keyframes pmsteps-swing {
    0% { transform: rotate(0deg) translateX(0); }
    20% { transform: rotate(15deg) translateX(10px); } /* Swing right and move right */
    40% { transform: rotate(-10deg) translateX(-10px); } /* Swing left and move left */
    60% { transform: rotate(5deg) translateX(5px); } /* Swing right and move right (smaller) */
    80% { transform: rotate(-5deg) translateX(-5px); } /* Swing left and move left (smaller) */
    100% { transform: rotate(0deg) translateX(0); } /* Return to center */
}

/* Custom Animation: Balloon (gentle bouncing/floating effect) */
@keyframes pmsteps-balloon {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* Step bottom border with rounded corners */
.pmsteps-step::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px; /* Match the border thickness */
    border-radius: 0 0 10px 10px; /* Rounded corners at the bottom */
    z-index: -1; /* Place behind other content */
}

/* Color progression for step circles, connectors, labels, and the bottom border (via ::after) */
.pmsteps-step-1 .pmsteps-step-circle { background-color: #4a47a3; }
.pmsteps-step-1 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #4a47a3, #4a47a3 2px, transparent 2px, transparent 4px); }
.pmsteps-step-1 .pmsteps-step-label { color: #4a47a3; }
.pmsteps-step-1::after { background-color: #4a47a3; }

.pmsteps-step-2 .pmsteps-step-circle { background-color: #007bff; }
.pmsteps-step-2 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #007bff, #007bff 2px, transparent 2px, transparent 4px); }
.pmsteps-step-2 .pmsteps-step-label { color: #007bff; }
.pmsteps-step-2::after { background-color: #007bff; }

.pmsteps-step-3 .pmsteps-step-circle { background-color: #00b4d8; }
.pmsteps-step-3 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #00b4d8, #00b4d8 2px, transparent 2px, transparent 4px); }
.pmsteps-step-3 .pmsteps-step-label { color: #00b4d8; }
.pmsteps-step-3::after { background-color: #00b4d8; }

.pmsteps-step-4 .pmsteps-step-circle { background-color: #0096c7; }
.pmsteps-step-4 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #0096c7, #0096c7 2px, transparent 2px, transparent 4px); }
.pmsteps-step-4 .pmsteps-step-label { color: #0096c7; }
.pmsteps-step-4::after { background-color: #0096c7; }

.pmsteps-step-5 .pmsteps-step-circle { background-color: #2ecc71; }
.pmsteps-step-5 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #2ecc71, #2ecc71 2px, transparent 2px, transparent 4px); }
.pmsteps-step-5 .pmsteps-step-label { color: #2ecc71; }
.pmsteps-step-5::after { background-color: #2ecc71; }

.pmsteps-step-6 .pmsteps-step-circle { background-color: #27ae60; }
.pmsteps-step-6 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #27ae60, #27ae60 2px, transparent 2px, transparent 4px); }
.pmsteps-step-6 .pmsteps-step-label { color: #27ae60; }
.pmsteps-step-6::after { background-color: #27ae60; }

.pmsteps-step-circle {
    width: 30px;
    height: 30px; /* Ensure consistent height */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin: 0 auto 1rem; /* Consistent margin for all steps */
    transition: transform 0.3s ease;
    position: relative;
    left: -75px; /* Keep the left positioning but ensure alignment */
    top: 0; /* Reset any unintended top positioning */
}

.pmsteps-step-label {
    font-size: clamp(0.8rem, 2vw, 1rem);
    margin-top: 10px; /* Add consistent spacing between circle and label */
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 120px;
    font-weight: 600;
    padding-bottom:10px;
}

.pmsteps-line {
    height: 0px;
    position: absolute;
    top: 15px;
    width: 100%;
    background-color: #007bff;
    z-index: 1;
}

.pmsteps-step-connector {
    position: absolute;
    width: 2px;
    height: 50px; /* Consistent height for all connectors */
    top: 10px; /* Align with the bottom of the circle */
    left: 11% !important; /* Center the connector under the circle relative to its parent */
    transform: translateX(-50%) translateY(15px); /* Adjust vertically to align with circle bottom and center horizontally */
    z-index: 2;
}

/* Ensure connectors follow the circle's position */
.pmsteps-step-1 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #4a47a3, #4a47a3 2px, transparent 2px, transparent 4px); }
.pmsteps-step-2 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #007bff, #007bff 2px, transparent 2px, transparent 4px); }
.pmsteps-step-3 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #00b4d8, #00b4d8 2px, transparent 2px, transparent 4px); }
.pmsteps-step-4 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #0096c7, #0096c7 2px, transparent 2px, transparent 4px); }
.pmsteps-step-5 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #2ecc71, #2ecc71 2px, transparent 2px, transparent 4px); }
.pmsteps-step-6 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #27ae60, #27ae60 2px, transparent 2px, transparent 4px); }

.pmsteps-footer-note {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 2rem;
    background-color: #f0f8ff;
    color: #666;
    border-radius: 20px;
    font-size: clamp(0.8rem, 2vw, 1rem);
    display: inline-block;
}

/* Animations */
@keyframes pmsteps-fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pmsteps-step {
    animation: pmsteps-fadeIn 0.5s ease-out forwards;
}

.pmsteps-step:nth-child(1) { animation-delay: 0.1s; }
.pmsteps-step:nth-child(2) { animation-delay: 0.3s; }
.pmsteps-step:nth-child(3) { animation-delay: 0.5s; }
.pmsteps-step:nth-child(4) { animation-delay: 0.7s; }
.pmsteps-step:nth-child(5) { animation-delay: 0.9s; }
.pmsteps-step:nth-child(6) { animation-delay: 1.1s; }

/* Responsive design */
@media (max-width: 576px) {
    /* Mobile View: Single step per row */
    .pmsteps-process {
        flex-direction: column; /* Stack steps vertically */
        align-items: center; /* Center steps */
        gap: 1.5rem; /* Increase gap for better spacing */
        padding: 1rem 0; /* Reduce padding for mobile */
    }

    .pmsteps-step {
        flex: 100%; /* Full width for each step */
        min-width: 100%; /* Ensure full width */
        max-width: 100%; /* Ensure full width */
        margin: 0; /* Remove margins for stacking */
    }

    .pmsteps-step-circle {
        left: 0; /* Center circle on mobile */
        margin-bottom: 0.5rem;
    }

    .pmsteps-step-label {
        position: static; /* Reset to static positioning for stacking */
        width: auto; /* Allow full width */
        margin-top: 0.5rem; /* Adjust spacing */
        right: auto; /* Reset right positioning */
        bottom: auto; /* Reset bottom positioning */
    }

    .pmsteps-step-connector {
        display: none; /* Hide connectors on mobile since steps stack */
    }

    .pmsteps-line {
        display: none; /* Hide the horizontal line on mobile */
    }

    .pmsteps-step::after {
        border-radius: 0; /* Remove border radius on mobile for simplicity */
    }

    /* Remove hover animations on mobile for better usability */
    .pmsteps-step:hover .pmsteps-step-circle {
        animation: none;
        transform: scale(1); /* Reset scale on mobile hover */
    }
}

@media (min-width: 577px) and (max-width: 1024px) {
    /* Tablet View: 2–3 steps per row */
    .pmsteps-process {
        flex-wrap: wrap; /* Allow wrapping for 2–3 steps */
        justify-content: space-around; /* Distribute steps evenly */
        gap: 1rem; /* Maintain gap */
    }

    .pmsteps-step {
        flex: 0 1 calc(33.33% - 1rem); /* Approximately 3 steps per row, accounting for gap */
        max-width: calc(33.33% - 1rem); /* Limit to about 1/3 of the container width */
        min-width: 120px; /* Minimum width to ensure readability */
    }

    .pmsteps-step-circle {
        left: -75px; /* Maintain desktop positioning */
    }

    .pmsteps-step-label {
        position: absolute; /* Keep label positioned absolutely */
        bottom: 10px;
        right: 15px;
        width: 120px;
    }

    .pmsteps-step-connector {
        left: 50%; /* Center the connector under the circle */
        transform: translateX(-50%) translateY(15px); /* Maintain alignment with circle */
    }

    .pmsteps-line {
        display: block; /* Keep the horizontal line visible */
    }

    .pmsteps-step::after {
        border-radius: 0 0 10px 10px; /* Maintain rounded corners */
    }

    /* Adjust for narrower tablets (2 steps per row) */
    @media (max-width: 768px) {
        .pmsteps-step {
            flex: 0 1 calc(50% - 1rem); /* 2 steps per row on narrower tablets */
            max-width: calc(50% - 1rem); /* Limit to half the container width */
        }
    }
}

@media (min-width: 1025px) {
    /* Desktop View: All 6 steps in a single row */
    .pmsteps-process {
        justify-content: space-between; /* Distribute steps evenly across the full width */
    }

    .pmsteps-step {
        flex: 1; /* Allow equal distribution */
        max-width: 200px; /* Maintain maximum width */
        min-width: 120px; /* Maintain minimum width */
    }

    .pmsteps-step-circle {
        left: -75px; /* Maintain desktop positioning */
    }

    .pmsteps-step-label {
        position: absolute; /* Keep label positioned absolutely */
        bottom: 10px;
        right: 15px;
        width: 120px;
    }

    .pmsteps-step-connector {
        left: 50%; /* Center the connector under the circle */
        transform: translateX(-50%) translateY(15px); /* Maintain alignment with circle */
    }

    .pmsteps-line {
        display: block; /* Keep the horizontal line visible */
    }

    .pmsteps-step::after {
        border-radius: 0 0 10px 10px; /* Maintain rounded corners */
    }
}