.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;
    }
}


/* marquee */
.marquee_wrapper { overflow: hidden; }

.marquee-row {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.marquee-row + .marquee-row { margin-top: 24px; }

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee-ltr 45s linear infinite;
}
.marquee-track.reverse { animation-name: marquee-rtl; }
.marquee-track:hover  { animation-play-state: paused; }

/* spacing goes on the slide, NOT gap on the track —
   gap adds one extra space that breaks the seamless loop */
.marquee-row .slide {
    flex: 0 0 auto;
    padding: 0 19px;
    margin: 0 !important;   /* kills leftover inline margins */
}
.marquee-row .customer_logos {
    height: 50px;
    width: auto;
    object-fit: contain;
}

/* right → left (your current behaviour) */
@keyframes marquee-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* left → right */
@keyframes marquee-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}












.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;
}

.service_item .icon {
    background-color: #332853 !important;
}

.fun_fact_area {
    background: linear-gradient(26deg, #261e3f 0%, #5a4891 100%);
}

/* .promo_dash_img {
    background: rgba(51, 16, 98, 0.056);
} */

.app_promo_area {
    background: linear-gradient(26deg, #261e3f 0%, #5a4891 100%);
    padding-top: 80px;
}


.to-engage-card-color{
    background-color: #261e3f;
}

.customer_logos{
    width:150px; height:100px; object-fit:contain; margin-right:20px;
}

.promo_dash_img {
    background: white;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    /* .saas_btn {
        font-size: 0.8rem;
    } */
    .customer_logos{
        width:100px; 
        height:150px;
    }
}








.carousel-control-next {
    right: -10%;
}

.carousel-control-prev {
    left: -10%;
}






.promo_dash_img img{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/* mobile */
@media screen and (max-width: 600px) {

  .carousel-control-next {
    right: -5%;
   }

    .carousel-control-prev {
     left: -5%;
    }

}




.cs_p_batch_success{
    border-radius:30px; background-color:#DFFCE7; width:max-content; color:#187842; font-weight:bold;
}
.cs_p_batch_danger{
    border-radius:30px; background-color:#FCE8E8; width:max-content; color:#B81F20; font-weight:bold;
}
.cs_trust_img{
    border-radius:20px; height:450px; object-fit:cover; border:solid 0.5px gray;
}
.cs_vs_batch{
    top: 55%;left: 50%; transform: translate(-50%, -50%); border-radius:40px; border:solid 3px #eeeeee; font-weight:bold; background-color:#f9f9f9; height:100px; width:100px;
}
@media screen and (max-width: 600px) {
    .cs_vs_batch{
        height: 40px;
        width: 40px;
    }
    .cs_vs_batch > h3{
        font-size: 11px;
    }
    .cs_trust_img {
        width: 95%;
        height: 300px;
    }
    .cs_p_batch_danger, .cs_p_batch_success{
        font-size: 13px;
    }
    .cs_crm_logos{
        width: 60px !important;
    }
}



.video-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        cursor: pointer;
        border-radius: 20px;
        overflow: hidden;
}
.video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
}
.play-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
}
@media (max-width: 768px) {
    .video-wrapper{
        height:450px;
    }
}



.highlighted-text {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMjAwMTA5MDQvL0VOIgogICAgICAgICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+Cgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgICB3aWR0aD0iMWluIiBoZWlnaHQ9IjAuNWluIgogICAgIHZpZXdCb3g9IjAgMCAzMDAgMTUwIj4KICA8cGF0aAogICAgICAgIGZpbGw9IiNmYmNkMGQiIHN0cm9rZT0ibm9uZSIKICAgICAgICBkPSJNIDEyLjAwLDQ4LjAwCiAgICAgICAgICAgQyAxMi4wMCw1MC4wOSAxMS43OSw1NC45OSAxMi42MCw1Ni43MgogICAgICAgICAgICAgMTUuNTksNjMuMTggMjYuMDksNTYuNjQgMzMuMDAsNjMuMDAKICAgICAgICAgICAgIDMwLjg0LDYzLjE4IDIzLjA1LDYzLjg3IDIxLjgwLDY1LjAyCiAgICAgICAgICAgICAxOC4wMiw2Ny44OCAyMS4yOSw3Ni4zNSAyMS44MCw4MC4wMAogICAgICAgICAgICAgMjEuODAsODAuMDAgMjEuODAsODYuMDAgMjEuODAsODYuMDAKICAgICAgICAgICAgIDIxLjgwLDg2LjAwIDQwLjAwLDg3LjAwIDQwLjAwLDg3LjAwCiAgICAgICAgICAgICAzOS45Myw4OC44OCA0MC4wNiw5MS4wNCAzOC45OCw5Mi42OQogICAgICAgICAgICAgMzcuNTEsOTQuOTMgMzUuMTUsOTQuNzUgMzIuNTksOTYuMjAKICAgICAgICAgICAgIDI4LjMzLDk4LjYxIDI2Ljg3LDEwMi4yMiAyNy4zNCwxMDcuMDAKICAgICAgICAgICAgIDI3LjM0LDEwNy4wMCAzMC4wMiwxMjMuNDEgMzAuMDIsMTIzLjQxCiAgICAgICAgICAgICAzMS44MiwxMjUuNzUgNDAuMDEsMTI3Ljk1IDQzLjAwLDEyOC4wMAogICAgICAgICAgICAgNDMuMDAsMTI4LjAwIDg3LjAwLDEyOC4wMCA4Ny4wMCwxMjguMDAKICAgICAgICAgICAgIDg4LjA4LDEyMS41NiA5MS4xNiwxMjEuODAgOTcuMDAsMTIyLjA0CiAgICAgICAgICAgICA5Ny4wMCwxMjIuMDQgMTA5LjAwLDEyMy4wMCAxMDkuMDAsMTIzLjAwCiAgICAgICAgICAgICAxMDkuMDAsMTIzLjAwIDEyOC4wMCwxMjMuMDAgMTI4LjAwLDEyMy4wMAogICAgICAgICAgICAgMTI4LjAwLDEyMy4wMCAxODIuMDAsMTIyLjAwIDE4Mi4wMCwxMjIuMDAKICAgICAgICAgICAgIDE5NC41OCwxMjEuOTcgMTg4LjQyLDExOS4wMyAyMDEuMDAsMTE5LjAwCiAgICAgICAgICAgICAyMDEuMDAsMTE5LjAwIDI0My4wMCwxMTkuMDAgMjQzLjAwLDExOS4wMAogICAgICAgICAgICAgMjQzLjAwLDExOS4wMCAyNTguMDAsMTE4LjAwIDI1OC4wMCwxMTguMDAKICAgICAgICAgICAgIDI1OS41MywxMDkuMTAgMjY2LjAxLDExMy4zNyAyNzAuNDAsMTA5LjE1CiAgICAgICAgICAgICAyNzIuNjEsMTA3LjAzIDI3Mi4zMCwxMDAuODUgMjcyLjAwLDk4LjAwCiAgICAgICAgICAgICAyNzIuMDAsOTguMDAgMjgwLjAwLDk3LjAwIDI4MC4wMCw5Ny4wMAogICAgICAgICAgICAgMjgwLjAwLDk0LjEwIDI4MC4yNiw4OC41NSAyNzkuMjYsODYuMDIKICAgICAgICAgICAgIDI3Ni40OSw3OC45OCAyNjQuNjMsNzYuODggMjU4LjAwLDc2LjAwCiAgICAgICAgICAgICAyNjUuMTUsNjkuMTkgMjc2LjQwLDczLjAzIDI3NC44NSw2Mi4wNAogICAgICAgICAgICAgMjc0LjQ3LDU5LjM1IDI3My43Myw1OC44NSAyNzIuMDAsNTcuMDAKICAgICAgICAgICAgIDI4MS42OCw1My43NyAyODEuMDAsNTQuMjggMjgxLjAwLDQ0LjAwCiAgICAgICAgICAgICAyODEuMDAsNDQuMDAgMjU4LjAwLDQyLjM4IDI1OC4wMCw0Mi4zOAogICAgICAgICAgICAgMjUwLjAwLDQwLjg0IDI1MS40OCwzOC4wMyAyMzUuMDAsMzguMDAKICAgICAgICAgICAgIDIzNS4wMCwzOC4wMCAxODkuMDAsMzkuMDAgMTg5LjAwLDM5LjAwCiAgICAgICAgICAgICAxODkuMDAsMzkuMDAgMTc3LjAwLDM5LjgyIDE3Ny4wMCwzOS44MgogICAgICAgICAgICAgMTc3LjAwLDM5LjgyIDE1OS4wMCwzOC4wMCAxNTkuMDAsMzguMDAKICAgICAgICAgICAgIDE1OS4wMCwzOC4wMCAxMjguMDAsMzguMDAgMTI4LjAwLDM4LjAwCiAgICAgICAgICAgICAxMTYuOTAsMzguMDIgMTIwLjE2LDM5LjQwIDExMy4wMCw0MC42NwogICAgICAgICAgICAgMTEzLjAwLDQwLjY3IDk3LjAwLDQyLjE3IDk3LjAwLDQyLjE3CiAgICAgICAgICAgICA5Ny4wMCw0Mi4xNyA4Ny4wMCw0My44MyA4Ny4wMCw0My44MwogICAgICAgICAgICAgODcuMDAsNDMuODMgNTcuMDAsNDUuMDAgNTcuMDAsNDUuMDAKICAgICAgICAgICAgIDU3LjAwLDQ1LjAwIDMyLjAwLDQ4LjAwIDMyLjAwLDQ4LjAwCiAgICAgICAgICAgICAzMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCBaIiAvPgo8L3N2Zz4K');
    background-position: 50% 50%;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    background-repeat: no-repeat;
    background-size: cover;
}