/* phase row flex container styling */
.phase-row {
    display: flex;
    justify-content: space-between;
    width: 80%;
    max-width: 800px;
    margin: 0 auto 2rem;
    perspective: 600px;
}

/* fade-in keyframes for phase row */
@keyframes flipIn {
    from {
        opacity: 0;
        transform: rotateX(90deg);
        transform-origin: bottom center;
    }
    to {
        opacity: 1;
        transform: rotateX(0deg);
        transform-origin: bottom center;
    }
}

.phase-steps {
    opacity: 0;
    animation-name: flipIn;
    animation-duration: 1.3s;
    animation-fill-mode: forwards; /* maintain the final state */
    transform-style: preserve-3d;
}

.phase-in-step-one {
    animation-delay: 0.6s;
}

.phase-in-step-two {
    animation-delay: 1s;
}

.phase-in-step-three {
    animation-delay: 1.4s;
}

.phase-steps p {
    font-size: 22px;
    color: var(--primary-color);
}

@media (max-width: 1024px) {
    .phase-row {
        justify-content: space-around;
        width: 100%;
    }

    .phase-steps p {
        font-size: 16px;
    }
}

/* responsive styling for mobile devices */
@media (max-width: 600px) {
    .phase-row {
        width: 80%;
    }

    .phase-steps p {
        font-size: 14px;
    }
}