/* Connected workflow: the same three steps and original image animation. */
.index-five .nx-workflow { padding: 96px 0 104px; background: #fff; font-family: "Manrope", sans-serif; }
.nx-workflow .container { max-width: 1320px; padding-inline: 28px; }
.nx-workflow .container > .row:not(.nx-workflow-steps) { margin-inline: 0; }
.nx-workflow .container > .row > .col-lg-12 { padding-inline: 0; }
.nx-workflow .section-head { max-width: 850px; margin: 0 auto 62px; padding: 0; text-align: center; }
.nx-workflow .section-sub-title { justify-content: center; margin-bottom: 18px; }
.nx-workflow .section-sub-title .subtitle { color: #3855a3; text-transform: uppercase; letter-spacing: .16em; }
.nx-workflow .nx-workflow-steps { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.nx-workflow .nx-workflow-steps > [role="listitem"] { position: relative; width: auto; padding: 0; margin: 0; min-width: 0; }
.nx-workflow-path { position: absolute; z-index: 0; top: 35px; left: 0; width: 100%; height: 170px; overflow: visible; pointer-events: none; }
.nx-workflow-path path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nx-workflow-path-base { stroke: #dce5f3; stroke-width: 2; }
.nx-workflow-path-flow { stroke: #7397d4; stroke-width: 2.5; stroke-dasharray: 5 12; animation: nx-workflow-flow 12s linear infinite; }
.nx-workflow .single-services { position: relative; z-index: 1; height: 100%; }
.nx-workflow .single-services .services-inner { display: flex; flex-direction: column; align-items: center; overflow: visible; padding: 0; height: 100%; border-radius: 0; }
.nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded { flex-shrink: 0; width: 232px; height: 232px; padding: 12px; overflow: visible; isolation: isolate; background: #fff; border-radius: 50%; box-shadow: 0 12px 35px #102a5009; }
.nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded.border-top-left::after { inset: 0; z-index: 0; width: 100%; height: 100%; border: 2px dashed #b9cce9; background: transparent; animation: rotateIn-2 50s linear infinite; }
.nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded a { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded img { display: block; width: 100%; height: 100%; padding: 0; border-radius: 50%; object-fit: cover; }
.nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded .number-bg-round { inset: auto -4px 2px auto; z-index: 3; width: 52px; height: 52px; border: 5px solid #fff; border-radius: 17px; background: #173d7c; transform: rotate(-7deg); box-shadow: 0 6px 18px #173d7c1a; }
.nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded .number-bg-round span { margin: 0; color: #fff; font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1; transform: rotate(7deg); }
.nx-workflow [role="listitem"]:nth-of-type(2) .number-bg-round { background: #376b78 !important; }
.nx-workflow [role="listitem"]:nth-of-type(3) .number-bg-round { background: #655389 !important; }
.nx-workflow .services-content.services-content-style-1 { position: relative; flex: 1; width: 100%; margin: 34px 0 0; padding: 26px 23px; border: 1px solid #e1e9f4; border-radius: 20px; background: linear-gradient(145deg,#fcfdff,#f3f7fd); transition: transform 250ms ease,border-color 250ms ease,box-shadow 250ms ease; }
.nx-workflow .services-content.services-content-style-1::before { content: ''; position: absolute; top: -7px; left: calc(50% - 6px); width: 12px; height: 12px; border-left: 1px solid #e1e9f4; border-top: 1px solid #e1e9f4; background: #fbfdff; transform: rotate(45deg); }
.nx-workflow .services-content.services-content-style-1 .title { margin: 0 0 14px; min-height: 56px; color: #102a50; font-weight: 800; letter-spacing: -.025em; }
.nx-workflow .services-content.services-content-style-1 .description { margin: 0; color: #566c88; }
.nx-workflow a:focus-visible { outline: 3px solid #7295d1; outline-offset: 4px; }
@media (hover:hover) and (pointer:fine) {
 .nx-workflow .single-services:hover .services-content { transform: translateY(-4px); border-color: #b6c9e6; box-shadow: 0 12px 28px #102a5008; }
 .nx-workflow .single-services:hover .thumbnail.thumbnail-rounded.border-top-left::after { border-color: #527ab8; }
}
@keyframes nx-workflow-flow { to { stroke-dashoffset: -204; } }
@media (max-width: 991px) and (min-width: 768px) {
 .nx-workflow .nx-workflow-steps { gap: 18px; }
 .nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded { width: 180px; height: 180px; }
 .nx-workflow-path { top: 9px; height: 160px; }
 .nx-workflow .services-content.services-content-style-1 { padding: 24px 16px; }
 .nx-workflow .services-content.services-content-style-1 .title { min-height: 84px; }
}
@media (max-width: 767px) {
 .index-five .nx-workflow { padding: 64px 0 72px; }
 .nx-workflow .container { padding-inline: 22px; }
 .nx-workflow .section-head { margin-bottom: 42px; }
 .nx-workflow .nx-workflow-steps { grid-template-columns: minmax(0,1fr); gap: 42px; padding-left: 34px; }
 .nx-workflow-path { display: none; }
 .nx-workflow .nx-workflow-steps > [role="listitem"]::before { content: ''; position: absolute; top: 110px; left: -34px; z-index: 1; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #7698cf; box-shadow: 0 0 0 1px #c5d5ec; }
 .nx-workflow .nx-workflow-steps > [role="listitem"]:not(:last-child)::after { content: ''; position: absolute; top: 116px; left: -29px; width: 2px; height: calc(100% + 42px); background: repeating-linear-gradient(to bottom,#adc3e5 0 5px,transparent 5px 12px); }
 .nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded { width: 220px; height: 220px; }
 .nx-workflow .services-content.services-content-style-1 { margin-top: 28px; padding: 25px 20px; }
 .nx-workflow .services-content.services-content-style-1 .title { min-height: 0; }
}
@media (max-width: 360px) {
 .nx-workflow .single-services .services-inner .thumbnail.thumbnail-rounded { width: 200px; height: 200px; }
 .nx-workflow .services-content.services-content-style-1 { padding-inline: 16px; }
}
@media (prefers-reduced-motion:reduce) {
 .nx-workflow *, .nx-workflow *::before,.nx-workflow *::after { animation: none !important; transition: none !important; }
}
