.elementor-976 .elementor-element.elementor-element-2d039472:not(.elementor-motion-effects-element-type-background), .elementor-976 .elementor-element.elementor-element-2d039472 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-976 .elementor-element.elementor-element-2d039472{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-976 .elementor-element.elementor-element-2d039472 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-976 .elementor-element.elementor-element-2d039472 .elementor-heading-title{color:#FFFFFF;}.elementor-976 .elementor-element.elementor-element-721f0201{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-976 .elementor-element.elementor-element-65db4570{--display:flex;}.elementor-976 .elementor-element.elementor-element-87e6451{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}/* Start custom CSS for html, class: .elementor-element-777ce73f */.scripting {
    display: none;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-2d039472 *//* ---- Section shell ---- */
.solutions-section {
    padding: 100px 40px !important;
    background: linear-gradient(180deg, #060e1e 0%, #091529 40%, #060e1e 100%) !important;
    position: relative !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    color: #ffffff !important;
    overflow: hidden !important;
}
.solutions-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.3), transparent) !important;
}
/* subtle radial glow behind hub center */
.solutions-section::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 600px !important; height: 600px !important;
    background: radial-gradient(ellipse at center, rgba(0, 180, 216, 0.07) 0%, transparent 70%) !important;
    pointer-events: none !important;
}
.solutions-section .elementor-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ---- Section header ---- */
.solutions-section .sol-solutions-header .e-con-inner,
.solutions-section .elementor-widget-wrap > .e-con-boxed.e-con.e-parent:has(.e-heading-base):not(:has(.e-div-block-base)) .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 1060px !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    gap: 0 !important;
    --e-con-gap: 0px !important;
}
.solutions-section .sol-solutions-header .e-paragraph-base:first-child,
.solutions-section .elementor-widget-wrap > .e-con-boxed.e-con.e-parent:has(.e-heading-base):not(:has(.e-div-block-base)) .e-paragraph-base:first-child {
    display: inline-block !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #00b4d8 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 0 0 16px !important;
}
.solutions-section .sol-solutions-header .e-heading-base,
.solutions-section .elementor-widget-wrap > .e-con-boxed.e-con.e-parent:has(.e-heading-base):not(:has(.e-div-block-base)) .e-heading-base {
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 18px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
    text-wrap: balance !important;
}
.solutions-section .sol-solutions-header .e-paragraph-base:last-child,
.solutions-section .elementor-widget-wrap > .e-con-boxed.e-con.e-parent:has(.e-heading-base):not(:has(.e-div-block-base)) .e-paragraph-base:last-child {
    max-width: 980px !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.6 !important;
    margin: 0 auto !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ---- Hub container e-con-boxed ---- */
#sol-hub-root {
    position: relative !important;
    padding: 0 !important;
}
#sol-hub-root > .e-con-inner {
    padding: 0 !important;
}

/* Elementor edit-mode: shape divs and overlay UIs inside grid must not affect layout */
.sol-hub-grid > .elementor-shape,
.sol-hub-grid > .elementor-element-overlay {
    display: none !important;
}
.sol-node > .elementor-element-overlay,
.sol-node-front-body > .elementor-element-overlay,
.sol-node-back > .elementor-element-overlay,
.sol-hub-center-wrap > .elementor-element-overlay,
.sol-hub-center > .elementor-element-overlay {
    position: absolute !important;
    z-index: 10 !important;
}
.sol-hub-center .elementor-empty-view {
    display: none !important;
}

/* SVG wrapper — absolutely positioned over the grid */
.sol-hub-svg-wrap {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}
.sol-hub-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: visible !important;
}

/* ---- Hexagonal grid: 3 equal cols, 4 rows, named areas ---- */
.sol-hub-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    row-gap: 18px !important;
    column-gap: 52px !important;
    grid-template-areas:
        ". ntop ."
        "nltop nhub nrtop"
        "nlbot nhub nrbot"
        ". nbot ." !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Grid area assignments */
.sol-node--pos-top       { grid-area: ntop !important; }
.sol-node--pos-left-top  { grid-area: nltop !important; }
.sol-node--pos-left-bot  { grid-area: nlbot !important; }
.sol-hub-center-wrap     { grid-area: nhub !important; display: flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; }
.sol-node--pos-right-top { grid-area: nrtop !important; }
.sol-node--pos-right-bot { grid-area: nrbot !important; }
.sol-node--pos-bottom    { grid-area: nbot !important; }

/* ============================================================
   HUB CENTER
   ============================================================ */
.sol-hub-center {
    position: relative !important;
    width: 216px !important;
    height: 216px !important;
    min-width: 216px !important;
    min-height: 216px !important;
    max-width: 216px !important;
    max-height: 216px !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: center !important;
    background: #0a1632 !important;
    border: 2px solid rgba(0, 180, 216, 0.55) !important;
    box-shadow:
        0 0 0 1px rgba(0, 180, 216, 0.12),
        0 0 60px rgba(0, 180, 216, 0.2),
        inset 0 0 30px rgba(0, 180, 216, 0.1) !important;
    cursor: default !important;
    text-align: center !important;
    padding: 0 !important;
    gap: 0 !important;
    transition: box-shadow 0.28s ease, border-color 0.28s ease !important;
    overflow: hidden !important;
}

/* Animated concentric rings */
.sol-hub-ring {
    position: absolute !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 180, 216, 0.3) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    animation: hub-ring-pulse 3s ease-out infinite !important;
}
.sol-hub-ring-1 { inset: -18px !important; animation-delay: 0s !important; }
.sol-hub-ring-2 { inset: -36px !important; animation-delay: 1s !important; }
.sol-hub-ring-3 { inset: -54px !important; animation-delay: 2s !important; }

@keyframes hub-ring-pulse {
    0%   { opacity: 0.7; transform: scale(0.9); }
    80%  { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.05); }
}

.sol-hub-chip {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    z-index: 1 !important;
}
.sol-hub-chip .sol-hub-chip-image,
.sol-hub-chip img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    filter: saturate(1.05) contrast(1.03) !important;
}

.sol-hub-label {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
}
.sol-hub-sub {
    font-size: 0.68rem !important;
    color: rgba(0, 180, 216, 0.8) !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
}

/* ============================================================
   HUB HOVER STATES — receiving vs distributing
   ============================================================ */
/* Receiving (data coming in from a node) */
.sol-hub-center.hub--receiving {
    border-color: rgba(120, 230, 255, 0.95) !important;
    box-shadow: 0 0 50px rgba(0, 180, 216, 0.55), inset 0 0 70px rgba(0, 180, 216, 0.28) !important;
}
.sol-hub-center.hub--receiving .sol-hub-ring {
    animation: hub-ring-receive 1.2s ease-out infinite !important;
    border-color: rgba(0, 180, 216, 0.55) !important;
}
@keyframes hub-ring-receive {
    0%   { opacity: 0.8; transform: scale(1.05); }
    70%  { opacity: 0;   transform: scale(0.92); }
    100% { opacity: 0;   transform: scale(0.92); }
}

/* Distributing (data flowing out to a node) */
.sol-hub-center.hub--distributing {
    border-color: rgba(0, 200, 255, 0.9) !important;
    box-shadow: 0 0 100px rgba(0, 180, 216, 0.5), inset 0 0 20px rgba(0, 180, 216, 0.08) !important;
}
.sol-hub-center.hub--distributing .sol-hub-ring {
    animation: hub-ring-distribute 1.0s ease-out infinite !important;
    border-color: rgba(0, 200, 255, 0.6) !important;
}
@keyframes hub-ring-distribute {
    0%   { opacity: 0.75; transform: scale(0.88); }
    80%  { opacity: 0;    transform: scale(1.08); }
    100% { opacity: 0;    transform: scale(1.08); }
}

/* Both: combine both vibes (brighter + medium pace) */
.sol-hub-center.hub--both {
    border-color: rgba(83, 230, 255, 0.95) !important;
    box-shadow: 0 0 80px rgba(0, 180, 216, 0.5), inset 0 0 45px rgba(0, 180, 216, 0.18) !important;
}

/* ============================================================
   SOLUTION NODES — Elementor-compatible flat structure
   .sol-node > img.sol-node-img + .sol-node-front-body + .sol-node-back
   ============================================================ */
.sol-node {
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 230px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, rgba(13, 33, 71, 0.92) 0%, rgba(8, 18, 40, 0.98) 100%) !important;
    border: 1px solid rgba(0, 180, 216, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 180, 216, 0.08) !important;
    transition: transform 0.35s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.35s ease-in-out !important;
    padding: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}
/* Elementor edit-mode image widget wrapper — must not generate a box */
.sol-node > .elementor-element[style*="display: contents"],
.sol-node-front-body > .elementor-element[style*="display: contents"],
.sol-node-back > .elementor-element[style*="display: contents"],
.sol-hub-center > .elementor-element[style*="display: contents"] {
    display: contents !important;
}
.sol-node:hover,
.sol-node.sol-node--active {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 180, 216, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 180, 216, 0.12) !important;
}

/* Top-border accent line */
.sol-node::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    border-radius: 14px 14px 0 0 !important;
    pointer-events: none !important;
    z-index: 3 !important;
    background: linear-gradient(90deg, transparent 10%, rgba(0, 180, 216, 0.5) 50%, transparent 90%) !important;
}

/* ---- Image (inside .sol-node — may be wrapped by display:contents in edit mode) ---- */
.sol-node img.sol-node-img,
.sol-node .e-image-base,
.sol-node img.e-image-base {
    width: 100% !important;
    min-width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    filter: brightness(0.75) saturate(1.15) contrast(1.05) !important;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out !important;
    border-radius: 0 !important;
}
.sol-node:hover img.sol-node-img,
.sol-node:hover .e-image-base {
    transform: scale(1.08) !important;
    filter: brightness(0.85) saturate(1.2) contrast(1.05) !important;
}
/* Gradient overlay on image — smooth blend into card body */
.sol-node::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 145px !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(
        to bottom,
        rgba(8, 18, 40, 0.05) 0%,
        rgba(8, 18, 40, 0.3) 50%,
        rgba(8, 18, 40, 0.85) 85%,
        rgba(8, 18, 40, 1) 100%
    ) !important;
}

/* ---- Front body (title, tag, flow-dir) — in normal flow ---- */
.sol-node-front-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    flex: 1 !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
    transition: opacity 0.35s ease-in-out !important;
}
.sol-node:hover .sol-node-front-body,
.sol-node.sol-node--active .sol-node-front-body {
    opacity: 0 !important;
}

/* ---- Back face: absolute overlay, hidden by default ---- */
.sol-node-back {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    gap: 10px !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, rgba(0, 60, 120, 0.72) 0%, rgba(3, 10, 28, 0.99) 100%) !important;
    border: 1px solid rgba(0, 180, 216, 0.45) !important;
    opacity: 0 !important;
    z-index: 5 !important;
    text-align: center !important;
    transition: opacity 0.35s ease-in-out !important;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.85) !important;
}
/* Back: bright gradient bar */
.sol-node-back::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    border-radius: 14px 14px 0 0 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent 10%, #00b4d8 50%, transparent 90%) !important;
    box-shadow: 0 1px 8px rgba(0, 180, 216, 0.4) !important;
}
.sol-node:hover .sol-node-back,
.sol-node.sol-node--active .sol-node-back {
    opacity: 1 !important;
}

/* (sol-node-icon no longer used in Elementor DOM) */

.sol-node-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}
.sol-node-tag {
    font-size: 0.68rem !important;
    color: rgba(0, 200, 255, 0.8) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Flow direction indicator — subtle pill below the tag */
.sol-node-flow-dir {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: rgba(0, 200, 255, 0.6) !important;
    border: 1px solid rgba(0, 180, 216, 0.22) !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
    pointer-events: none !important;
    background: rgba(0, 180, 216, 0.05) !important;
    transition: color 0.3s, border-color 0.3s !important;
}
/* Brighter on hover (card is fading out at this point, but still visible briefly) */
.sol-node:hover .sol-node-flow-dir {
    color: rgba(0, 180, 216, 0.9) !important;
    border-color: rgba(0, 180, 216, 0.5) !important;
}
/* Featured node gets cyan accent */
.sol-node--featured .sol-node-flow-dir {
    color: rgba(83, 230, 255, 0.6) !important;
    border-color: rgba(83, 230, 255, 0.25) !important;
}

/* ---- Back face inner elements ---- */
.sol-node-back-icon {
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important;
    background: rgba(0, 180, 216, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    flex-shrink: 0 !important;
    transition: transform 0.35s ease-in-out, background 0.3s ease-in-out !important;
}
.sol-node:hover .sol-node-back-icon,
.sol-node.sol-node--active .sol-node-back-icon {
    transform: scale(1.25) !important;
    background: rgba(0, 180, 216, 0.22) !important;
}
.sol-node-back-icon svg {
    width: 24px !important; height: 24px !important;
    fill: #00b4d8 !important;
    display: block !important;
}
.sol-node-desc {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.82) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) !important;
}
.sol-node-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #00b4d8 !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 180, 216, 0.35) !important;
    background: transparent !important;
    padding: 0 0 2px !important;
    cursor: pointer !important;
    transition: color 0.2s, border-color 0.2s !important;
    margin-top: 0 !important;
}
.sol-node-cta:hover {
    color: #53e6ff !important;
    border-color: #53e6ff !important;
}

/* ---- Featured node (L&E) ---- */
.sol-node--featured {
    background: linear-gradient(160deg, rgba(0, 180, 216, 0.15) 0%, rgba(7, 24, 58, 0.98) 100%) !important;
    border-color: rgba(0, 212, 255, 0.55) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.35),
        0 0 32px rgba(0, 200, 255, 0.15),
        0 0 0 1px rgba(0, 212, 255, 0.25),
        inset 0 1px 0 rgba(0, 212, 255, 0.2) !important;
}
.sol-node--featured:hover {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(0, 200, 255, 0.22),
        0 0 0 1px rgba(0, 212, 255, 0.35),
        inset 0 1px 0 rgba(0, 212, 255, 0.25) !important;
}
.sol-node--featured::before {
    height: 3px !important;
    background: linear-gradient(90deg, transparent 5%, #53e6ff 50%, transparent 95%) !important;
}
.sol-node--featured .sol-node-back {
    border-color: rgba(0, 212, 255, 0.55) !important;
    background: linear-gradient(155deg, rgba(0, 180, 216, 0.22) 0%, rgba(5, 18, 46, 0.97) 100%) !important;
}
.sol-node--featured .sol-node-back::before {
    background: linear-gradient(90deg, transparent 5%, #53e6ff 50%, transparent 95%) !important;
    box-shadow: 0 1px 10px rgba(83, 230, 255, 0.5) !important;
}
.sol-node--featured .sol-node-title { color: #e0f9ff !important; }
.sol-node--featured .sol-node-tag { color: #53e6ff !important; }

/* Badge "Featured Use Case" — sits on top of the card image */
.sol-node-badge {
    position: absolute !important;
    top: 10px !important; right: 10px !important;
    z-index: 6 !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    color: #00e5ff !important;
    background: rgba(0, 16, 32, 0.8) !important;
    border: 1px solid rgba(0, 200, 255, 0.5) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    white-space: nowrap !important;
    backdrop-filter: blur(6px) !important;
    box-shadow: 0 2px 8px rgba(0, 200, 255, 0.15) !important;
}

/* ============================================================
   SVG CONNECTION LINES — static track (JS draws + controls opacity)
   Glowing dots and arrowheads are rendered entirely by scripts.js
   ============================================================ */
.sol-track {
    pointer-events: none !important;
    transition: stroke-opacity 0.28s ease, stroke-width 0.28s ease !important;
}
.sol-dot {
    pointer-events: none !important;
}

/* ============================================================
   SCROLL-REVEAL INTRO — hub section fades in on scroll
   ============================================================ */
/* Initial hidden state (added by JS via IntersectionObserver) */
.sol-hub-root.sol-hub--hidden .sol-node {
    opacity: 0 !important;
    transform: translateY(16px) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}
.sol-hub-root.sol-hub--hidden .sol-hub-center {
    opacity: 0 !important;
    transform: scale(0.88) !important;
    transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s !important;
}
/* Revealed state */
.sol-hub-root.sol-hub--visible .sol-node {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.sol-hub-root.sol-hub--visible .sol-hub-center {
    opacity: 1 !important;
    transform: scale(1) !important;
}
/* Stagger each node */
.sol-hub-root.sol-hub--visible .sol-node:nth-child(1) { transition-delay: 0.05s !important; }
.sol-hub-root.sol-hub--visible .sol-node:nth-child(2) { transition-delay: 0.12s !important; }
.sol-hub-root.sol-hub--visible .sol-node:nth-child(3) { transition-delay: 0.20s !important; }
.sol-hub-root.sol-hub--visible .sol-node:nth-child(5) { transition-delay: 0.28s !important; }
.sol-hub-root.sol-hub--visible .sol-node:nth-child(6) { transition-delay: 0.35s !important; }
.sol-hub-root.sol-hub--visible .sol-node:nth-child(7) { transition-delay: 0.42s !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .sol-hub-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "ntop ntop"
            "nltop nrtop"
            "nhub nhub"
            "nlbot nrbot"
            "nbot nbot" !important;
    }
    .sol-hub-center-wrap { justify-content: center !important; }
    .sol-hub-svg { display: none !important; }
}
@media (max-width: 600px) {
    .solutions-section { padding: 60px 20px !important; }
    .sol-hub-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "ntop"
            "nltop"
            "nlbot"
            "nhub"
            "nrtop"
            "nrbot"
            "nbot" !important;
        gap: 16px !important;
    }
    .sol-hub-center { width: 160px !important; height: 160px !important; }
    .sol-hub-ring-1 { inset: -12px !important; }
    .sol-hub-ring-2 { inset: -24px !important; }
    .sol-hub-ring-3 { display: none !important; }
    .solutions-section .sol-solutions-header .e-heading-base,
    .solutions-section .elementor-widget-wrap > .e-con-boxed.e-con.e-parent:has(.e-heading-base):not(:has(.e-div-block-base)) .e-heading-base {
        font-size: 1.9rem !important;
        white-space: normal !important;
        text-wrap: balance !important;
    }
}/* End custom CSS */