.flow-widget-container {
    background: #ffffff;
    border-radius: 1.5rem;
    max-width: 900px;
    /* box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.01); */
    position: relative;
    overflow: hidden;
    /* border: 1px solid #f1f5f9; */
}

/* Subtle background pattern */
.bg-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.content-layer {
    position: relative;
    z-index: 10;
}

/* --- CARD STYLES --- */
.process-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #dee2e6;
    z-index: 5;
}

.process-card .icon-svg {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
    display: inline-block;
    fill: currentColor;
}

.process-card span {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* --- SCENARIO 1: The Glitchy/Bad Path (Left) --- */

.bad-card {
    border-bottom: 4px solid #cbd5e1;
}

.bad-card:hover {
    transform: translateY(-2px);
}

.bad-card.final {
    border-bottom-color: #dc3545;
    background: #fffafa;
}

/* VERTICAL BAD CONNECTOR */
.connector-bad-vertical {
    width: 6px;
    height: 50px; /* Fixed height for vertical flow */
    background: repeating-linear-gradient(180deg, #e9ecef, #e9ecef 10px, transparent 10px, transparent 20px);
    margin: 0.5rem 0;
    position: relative;
}

.packet-bad-vertical {
    position: absolute;
    top: 0;
    left: -4px; /* Center on 6px width: (6-14)/2 = -4 */
    width: 14px;
    height: 14px;
    background: #adb5bd;
    border-radius: 2px;
    animation: stutter-move-vertical 4s infinite linear;
}

@keyframes stutter-move-vertical {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    30% { top: 40%; }
    40% { top: 40%; }
    60% { top: 60%; }
    70% { top: 60%; }
    100% { top: 100%; opacity: 0; }
}

.icon-wobble {
    animation: slight-wobble 4s infinite ease-in-out;
    color: #6c757d; 
}

.final .icon-shake {
    color: #dc3545 !important; 
    animation: chaotic-shake 2.5s infinite;
}

@keyframes slight-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

@keyframes chaotic-shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* --- SCENARIO 2: The Smooth/Good Path (Right) --- */

.good-card {
    border-bottom: 4px solid #720496;
    animation: card-float 6s infinite ease-in-out;
}

.good-card:nth-child(1) { animation-delay: 0s; }
.good-card:nth-child(3) { animation-delay: 1s; } 

.good-card.final {
    border-bottom-color: #198754;
    background: #f0fdf4;
    box-shadow: 0 10px 15px -3px rgba(25, 135, 84, 0.2);
}

@keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* VERTICAL GOOD CONNECTOR */
.connector-good-vertical {
    width: 8px;
    height: 50px;
    background: #facffc;
    border-radius: 4px;
    margin: 0.5rem 0;
    position: relative;
    overflow: hidden;
}

.stream-good-vertical {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, transparent, #720496, transparent);
    animation: stream-flow-vertical 1.5s infinite ease-in-out;
}

@keyframes stream-flow-vertical {
    0% { top: -40%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.icon-pulse {
    color: #720496;
}

.final .icon-glow {
    color: #198754;
    filter: drop-shadow(0 0 5px rgba(25, 135, 84, 0.5));
    animation: bulb-pulse 2s infinite ease-in-out;
}

@keyframes bulb-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(25, 135, 84, 0.5)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 15px rgba(25, 135, 84, 0.8)); }
}

/* Floating particles */
.particle {
    position: absolute;
    background: #198754;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.particle-container {
    position: absolute;
    top: -20px; right: -20px;
    width: 60px; height: 60px;
}

.particle:nth-child(1) { width: 6px; height: 6px; animation: pop-up 2s infinite 0.2s; left: 50%; top: 50%; }
.particle:nth-child(2) { width: 4px; height: 4px; animation: pop-up 2s infinite 0.6s; left: 30%; top: 40%; }
.particle:nth-child(3) { width: 5px; height: 5px; animation: pop-up 2s infinite 0.9s; left: 70%; top: 60%; }

@keyframes pop-up {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(0, -30px) scale(1); opacity: 0; }
}

/* Custom Text Colors */
.text-slate-500 { color: #64748b; }
.text-slate-700 { color: #334155; }

/* Column Labels */
.col-label {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* VS Separator Styles */
.vs-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 1rem;
}

.vs-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: #cbd5e1;
    font-style: italic;
    background: white;
    padding: 0.5rem;
    border-radius: 50%;
    z-index: 2;
}

.vs-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 80%;
    background: #f1f5f9;
    z-index: 1;
}

/* Mobile tweaks: on very small screens, Stack them */
@media (max-width: 576px) {
    .main-layout {
        flex-direction: column;
    }
    .vs-container {
        height: 50px;
        width: 100%;
    }
    .vs-line {
        width: 80%;
        height: 2px;
    }
}












.solution-widget-container {
    background: #ffffff;
    border-radius: 1.5rem;
    max-width: 1000px;
    position: relative;
    overflow: hidden;
    /* border: 1px solid #f1f5f9; */
}

/* Subtle background pattern */
.bg-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(#e9d5ff 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.content-layer {
    position: relative;
    z-index: 10;
}

/* --- CARD STYLES --- */
.solution-card {
    background: white;
    border-radius: 1rem; 
    padding: 2rem 1.5rem;
    width: 140px; 
    height: 140px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Base border */
    border: 1px solid #f1f5f9;
    
    /* UPDATED: Border bottom width 4px */
    border-bottom-width: 4px; 
    border-bottom-style: solid;
    
    opacity: 0; 
    animation: fade-up 0.8s ease-out forwards;
    position: relative;
}

/* Specific border accents */
.card-1 { 
    border-bottom-color: #720496; 
    animation-delay: 0.2s; 
}
.card-2 { 
    border-bottom-color: #9d4edd; 
    animation-delay: 1.2s; 
}
.card-3 { 
    border-bottom-color: #198754; 
    animation-delay: 2.2s; 
}

.solution-card .icon-svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
    fill: currentColor; /* Ensures the fill takes the text color */
}

/* UPDATED: Font size 13.5px */
.solution-card h5 {
    font-size: 13.5px;
    font-weight: 700;
    color: #475569; 
    margin-bottom: 0;
    text-align: center;
    line-height: 1.4;
}

/* --- CONNECTORS (ARROWS) --- */
.connector-wrapper {
    flex-grow: 1;
    height: 6px; 
    background: #f1f5f9;
    margin: 0 1.5rem;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    align-self: center;
}

.connector-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #720496, #9d4edd);
    border-radius: 10px;
    animation: fill-line 1s ease-in-out forwards;
}

.connector-wrapper:nth-of-type(2) .connector-fill {
        background: linear-gradient(90deg, #9d4edd, #198754);
}

.line-1 { animation-delay: 0.6s; }
.line-2 { animation-delay: 1.6s; }

/* --- ANIMATIONS --- */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fill-line {
    from { width: 0%; }
    to { width: 100%; }
}

@keyframes chat-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.card-3 .icon-svg {
    animation: chat-pulse 2s infinite ease-in-out 2.5s; 
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .solution-row {
        flex-direction: column !important;
        gap: 2rem;
    }
    .solution-card {
        width: 100%;
        max-width: 280px;
        height: 180px;
    }
    .connector-wrapper {
        width: 6px;
        height: 40px;
        margin: 0;
    }
    .connector-fill {
        width: 100%;
        height: 0%;
        top: 0;
        animation: fill-line-vertical 1s ease-in-out forwards;
    }
    @keyframes fill-line-vertical {
        from { height: 0%; }
        to { height: 100%; }
    }
}








.service_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 270px;
}