.cycle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 80px 50px;
    min-height: 500px; /* Slightly increased to prevent overlap */
    flex-wrap: wrap;
}

/* Cycle Item Styling */
.cycle-item {
    position: absolute;
    width: 200px; /* Reduced for smaller screens */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* Icon Styling */
.cycle-item i {
    font-size: 28px;
    margin-bottom: 8px;
    display: block;
}

/* Milk Pouring Image */
.milk-image {
    width: 350px;
    z-index: 2;
    position: relative;
}

/* Positioning - Desktop */
.top-left { top: 10%; left: 15%; }
.middle-left { top: 50%; left: 10%; } /* Adjusted left margin */
.bottom-left { bottom: -50px; left: 40%; } /* Moved further down */

.top-right { top: 10%; right: 15%; }
.middle-right { top: 50%; right: 5%; }

/* Curved Line */
.curved-line {
    position: absolute;
    width: 85%;
    height: 115%; /* Reduced height for better fitting */
    border: 2px solid #7CB342;
    border-radius: 50%;
    z-index: -1;
}

/* Mobile View Adjustments */
@media only screen and (max-width: 768px) {
    .cycle-container {
        flex-direction: column;
        padding: 50px 20px;
        min-height: auto;
        position: relative;
    }

    .cycle-item {
        position: static; /* Removes absolute positioning */
        width: 100%;
        margin-bottom: 20px; /* Adds space between steps */
    }

    .cycle-item i {
        font-size: 24px; /* Smaller icons for mobile */
    }

    .milk-image {
        width: 180px; /* Smaller image */
        margin-bottom: 20px;
    }

    .curved-line {
        display: none; /* Hides the line on mobile to prevent overlap */
    }
}