/* Base Styles (from previous solution, kept for context) */
.how-it-works-page {
    background-color: #FFFFFF;
    min-height: 100vh;
    padding-top: 50px;
    font-family: Arial, sans-serif;
}

.how-it-works-container {
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 1450px;
}

.how-it-works-section {
    padding: 30px 0;
}

.how-it-works-title {
    font-weight: 500;
    color: #CE4F49;
    text-align: left;
    font-size: 36px;
    margin-bottom: 40px;
}

.how-to-step-card {
    background-color: #FFF8F8;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.step-number {
    font-size: 28px;
    font-weight: bold;
    color: #CE4F49;
    margin-bottom: 10px;
}

.step-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.step-description {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.how-to-step-details {
    margin-top: 20px;
}

.how-to-step-details .detail-heading,
.how-to-step-details .detail-text,
.how-to-prescription-options,
.how-to-pharmacy-info p {
    text-align: left;
}

.how-to-step-details .col-md-6 {
    text-align: left;
}

.detail-heading {
    font-weight: bold;
    color: #333;
}

.detail-text {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
}

.how-to-prescription-options {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 15px auto;
}

.how-to-prescription-options li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #4a5568;
    line-height: 1.4;
}

.how-to-prescription-options li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background: #ce4f49;
    border-radius: 50%;
}

/* Flexbox specific styles for step-card-inner */
.step-card-inner {
    display: flex;
    flex-direction: column;
    /* Default to column stacking on small screens */
    align-items: center;
    /* Center items horizontally in column layout */
    gap: 30px;
    /* Space between content and image */
}

.step-content {
    flex: 1 1 100%;
    /* Allows content to take full width initially */
    text-align: center;
    /* Center text on mobile */
}

.step-image-wrapper {
    flex: 0 0 auto;
    /* Image wrapper doesn't grow or shrink */
    max-width: 80%;
    /* Limit image width on smaller screens */
    text-align: center;
    /* Ensure image itself is centered */
}

.step-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    width: 70%;
}

.rx-image {
    width: 45%;
}

/* Media Queries for responsiveness */

/* For screens larger than 767.98px (typical tablet landscape and desktop) */
@media (min-width: 768px) {
    .step-card-inner {
        flex-direction: row;
        /* Row layout on larger screens */
        justify-content: space-between;
        /* Space out content and image */
        align-items: flex-start;
        /* IMPORTANT: Align items to the top (start) */
        text-align: left;
        /* Align text left on larger screens */
    }

    .step-content {
        flex: 1;
        /* Allow content to grow */
        max-width: 60%;
        /* Adjust content width */
        padding-right: 30px;
        padding-left: 100px;
        /* Add some space between content and image */
        /* If content still doesn't align perfectly to the top due to image height,
           you might need to adjust its top margin. Experiment with this: */
        /* margin-top: 0; */
    }

    .step-card-inner.reverse-on-mobile {
        /* This class is added to the second step card */
        flex-direction: row-reverse;
        /* Reverse order for alternating layout */
    }

    .step-card-inner.reverse-on-mobile .step-content {
        padding-right: 0;
        padding-left: 30px;
        /* Add padding on the left when reversed */
    }

    .step-image-wrapper {
        flex: 0 0 40%;
        /* Image takes up 40% of the space */
        max-width: 40%;
        /* Explicitly set max-width for image wrapper */
    }


    /* Adjust specific text alignments within the content on larger screens */
    .step-content .step-number,
    .step-content .step-title,
    .step-content .step-description {
        text-align: left;
    }
}

/* Specific adjustments for smaller screens (e.g., phones) */
@media only screen and (max-width: 515px) {
    .step-card {
        padding: 20px;
        /* Smaller padding for very small screens */
    }

    .step-number {
        font-size: 24px;
    }

    .step-title {
        font-size: 20px;
    }

    .step-description {
        font-size: 15px;
    }

    /* Ensure detail columns stack on very small screens */
    .how-to-step-details .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .step-image {
        width: 100%;
    }
}

/* Media query for general small screens (up to tablet portrait) */
@media (max-width: 767.98px) {

    /* Flex direction remains column by default for .step-card-inner */
    .step-image-wrapper {
        order: 1;
        /* Ensure image comes after content on small screens (can be swapped) */
    }

    .step-content {
        order: 2;
        /* Ensure content comes before image on small screens */
    }

    .step-card-inner.reverse-on-mobile .step-image-wrapper {
        order: 1;
        /* Keep order consistent on mobile even with reverse class */
    }

    .step-card-inner.reverse-on-mobile .step-content {
        order: 2;
    }

    /* Center text on smaller screens */
    .step-content,
    .how-to-step-details .col-md-6 {
        text-align: center;
    }

    .how-to-step-details .detail-heading,
    .how-to-step-details .detail-text {
        text-align: center;
    }

    .how-to-step-details .col-md-6 {
        text-align: center;
    }

    .step-image {
        width: 100%;
    }
}

/* Tablet portrait adjustments */
@media (max-width: 991.98px) and (min-width: 768px) {
    .step-content {
        max-width: 55%;
        /* Slightly more content space */
    }

    .step-image-wrapper {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

/* No specific changes for (max-width: 1024px) unless needed */
@media (max-width: 1024px) {

}

@media (max-width: 1200px) {

}