.scroll-wrapper {
    /* height: 350vh; */
    /* height: 100vh; */
    position: relative;
    background-color: #FEFFF5;
    /* margin-bottom: 50px; */
}

.work-steps-section {
    background-color: #FEFFF5;
    color: #080808;
    position: sticky;
    top: 0;
    min-height: 100vh;
    /* Ensures content isn't cut off on smaller screens */
    width: 100%;
    display: flex;
    align-items: center;
    /* Vertically center content when it fits within 100vh */
    overflow: hidden;
    /* Hide any accidental overflow */
    padding-bottom: 20px;
    /* Add some space at the bottom of the sticky section */
}

.container-custom {
    width: 100%;
    max-width: 100%;
    padding: 50px;
    /* Combined padding: top/bottom 50px, left/right 15px */
    box-sizing: border-box;
    /* Include padding in element's total width/height */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    /* Aligns items to the start of the cross-axis */
}

.column-left {
    flex: 0 0 40%;
    /* Default to full width on small screens */
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    /* Center text on small screens */
}

.column-right {
    flex: 0 0 60%;
    /* Default to full width on small screens */
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    align-self: flex-start;
    margin-top: 30px;
    /* Space between columns when stacked on small screens */
}

.row-custom {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.column-small {
    padding: 0 15px;
    box-sizing: border-box;
    width: 100%;
    /* Ensure it takes full width within its row on small screens */
}

.column-large {
    flex: 0 0 100%;
    /* Default to full width on small screens */
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

.How_work {
    font-family: OpenSauceOne;
    width: max-content;
    /* Allows text to dictate width */
    margin: 0 auto 15px auto;
    /* Center it horizontally and add bottom margin */
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    border-radius: 10px;
    padding: 8px 16px;
    background: #EA43351A;
}

.how_h3 {
    font-family: sans-serif;
    font-size: 36px;
    /* Adjusted for mobile */
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 20px;
}

.timeline {
    position: relative;
    padding-left: 50px;
    /* Space for circles to the left of the timeline path */
    padding-top: 20px;
    /* Space from the top of the timeline container to the first step */
}

.timeline::before {
    content: '';
    position: absolute;
    left: 25px;
    /* Line's X-position (25px from timeline's left edge) */
    top: 20px;
    /* Line starts at the same level as the content's top padding */
    width: 3px;
    /* Height: From its `top` position down to the bottom of its parent. */
    height: calc(100% - 20px);
    background: linear-gradient(to bottom, #f44336, #e53935);
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform 2s ease-out, opacity 2s ease-out;
}

.timeline.show-line::before {
    transform: scaleY(1);
    opacity: 1;
}

.timeline-step {
    position: relative;
    /* Padding-left ensures content is right of the circle and has a gap */
    padding: 0 0 20px 60px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    width: 100%;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.timeline-step.visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-step::before {
    content: attr(data-step);
    position: absolute;
    /* This calculation places the circle's left edge at (line's X - circle radius) from timeline's edge.
       Then, subtract timeline.padding-left to get its position relative to timeline-step.
       Target line X = 25px. Circle radius = 20px (for 40px width). Timeline padding-left = 50px.
       ((25 - 20) - 50) = (5 - 50) = -45px
    */
    left: -45px;
    top: 5%;
    /* Vertically centers relative to timeline-step's height */
    transform: translateY(-50%);
    /* Adjusts for circle's own height to perfectly center */
    background-color: #f44336;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    opacity: 0;
}

.timeline-step.visible::before {
    animation: circleSlide 0.8s ease-out forwards;
}

.timeline-title h4 {
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
    /* Adjusted for mobile */
    font-size: 24px;
    /* Adjusted for mobile */
    font-family: OpenSauceOne;
}

.timeline-description p {
    margin-top: 5px;
    /* Adjusted margin-top */
    margin-bottom: 0;
    font-family: OpenSauceOne;
    font-size: 15px;
    /* Adjusted for mobile */
}

/* Timeline Strip and Circle Animations */
@keyframes timelineGrow {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes circleSlide {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.5);
    }

    /* Start above and smaller */
    60% {
        opacity: 1;
        transform: translateY(5px) scale(1.1);
    }

    /* Overshoot for bounce effect */
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    /* End at centered position */
}

.strong_custom {
    font-family: OpenSauceOne;
    font-weight: 700;
    font-size: 15px;
    /* Adjusted for mobile */
    line-height: 20px;
    vertical-align: middle;
    color: #080808;
    display: block;
    margin-bottom: 8px;
    /* Adjusted margin */
}

.strong_para {
    font-family: OpenSauceOne;
    font-weight: 400;
    font-size: 14px;
    /* Adjusted for mobile */
    line-height: 20px;
    /* Adjusted for mobile */
    vertical-align: middle;
    color: #333333CC;
}

.Drawing_p {
    font-family: OpenSauceOne;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #080808B2;
    text-align: center;
}

/* Floating Icon */
.floating-icon {
    text-align: center;
    /* Center on small screens */
    margin-top: 30px;
    /* Adjusted margin */
}

.floating-icon img {
    max-width: 80%;
    /* Smaller on mobile */
    height: auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Placeholder for space */
.h-500 {
    height: 500px;
    background-color: #f0f0f0;
}

/* --- Media Queries for Breakpoints (min-width applies styles upwards) --- */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container-custom {
        padding: 60px 20px;
        /* Slightly more padding */
    }

    .how_h3 {
        font-size: 40px;
    }

    .timeline-title h4 {
        font-size: 26px;
    }

    .strong_custom {
        font-size: 16px;
    }

    .strong_para {
        font-size: 15px;
    }

    /* Timeline elements unchanged from base as 40px circles and 25px line position still fit */
    .floating-icon img {
        max-width: 90%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container-custom {
        padding: 60px 30px;
        /* More padding */
    }

    .column-left {
        flex: 0 0 40%;
        /* Go back to two columns */
        max-width: 50%;
        text-align: left;
        /* Align text left */
    }

    .column-right {
        flex: 0 0 60%;
        /* Go back to two columns */
        max-width: 80%;
        margin-top: 0;
        /* No margin when side-by-side */
    }

    .how_h3 {
        font-size: 45px;
    }

    .How_work {
        margin: 0 0 15px 0;
        /* Align left */
    }

    .timeline {
        padding-left: 80px;
        /* More space for circles */
    }

    .timeline::before {
        left: 45px;
        /* Line's X-position (45px from timeline's left edge) */
        top: 22.5px;
        /* Matches half height of 45px circle, keeping top start consistent */
        height: calc(100% - 22.5px);
        /* Adjust height to match new top */
    }

    .timeline-step {
        /* Keep consistent padding-left, or adjust if 45px circle needs more space */
        padding: 0 0 20px 60px;
        width: 80%;
        /* Wider steps on desktop */
    }

    .timeline-step::before {
        left: -57.5px;
        width: 45px;
        top: 20px;
        height: 45px;
        font-size: 22px;
        transform: translateY(-50%);
        /* Still ensures vertical centering */
    }

    .timeline-title h4 {
        font-size: 28px;
    }

    .strong_custom {
        font-size: 16px;
    }

    .strong_para {
        font-size: 16px;
    }

    .floating-icon {
        text-align: start;
        /* Align left */
    }

    .floating-icon img {
        max-width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container-custom {
        padding: 50px;
        /* Larger padding */
    }

    .how_h3 {
        font-size: 50px;
    }

    .timeline-title h4 {
        font-size: 30px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container-custom {
        padding: 60px;
        /* Even larger padding */
    }
}