/* :root {
    --radius: min(35vw, 280px);
}

.solution-network {
    position: relative;
    width: min(90vw, 650px);
    height: min(90vw, 650px);
    margin: 60px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2563eb;
    color: white;
    padding: 18px 30px;
    border-radius: 40px;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

.platform-node {
    position: absolute;
    background: white;
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    text-align: center;
    min-width: 170px;
    transform: translate(-50%, -50%);
}

.orbit1 {
    transform: rotate(0deg) translate(var(--radius)) rotate(0deg);
}

.orbit2 {
    transform: rotate(51.4deg) translate(var(--radius)) rotate(-51.4deg);
}

.orbit3 {
    transform: rotate(102.8deg) translate(var(--radius)) rotate(-102.8deg);
}

.orbit4 {
    transform: rotate(154.2deg) translate(var(--radius)) rotate(-154.2deg);
}

.orbit5 {
    transform: rotate(205.6deg) translate(var(--radius)) rotate(-205.6deg);
}

.orbit6 {
    transform: rotate(257deg) translate(var(--radius)) rotate(-257deg);
}

.orbit7 {
    transform: rotate(308.4deg) translate(var(--radius)) rotate(-308.4deg);
}

.network-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.network-lines line {
    stroke: #2563eb;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.6;
} */

/* Add this to your style.css tag or stylesheet */

.solution-bg-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* ADD YOUR MAIN SECTION BACKGROUND IMAGE HERE */
    background-image: url('../../images/solutions/solutionsBg1.jpg');

    background-size: cover;
    /* or use 'contain' / '100% 100%' depending on pattern */
    background-position: center center;
    /* background-repeat: no-repeat; */

    /* Set your desired low opacity here */
    opacity: 0.4;
    /* Only 5% visible. Increase/Decrease as needed */

    z-index: 1;
    /* Keep it below the z-10 content wrapper */
    pointer-events: none;
    /* Crucial: clicks must pass through it */
}

#carekonnect-solution .grid {
    perspective: 1500px;
    backface-visibility: hidden;
}

/* Pre-hide cards to prevent flashing, but keep them in the layout */
.bento-card {
    opacity: 0;
    will-change: transform, opacity;
}

/* Ensure images cover their area properly */
.bento-card img {
    pointer-events: none;
    /* Prevents images from breaking the mousemove event */
}

/* .bento-card {
    transition: background-color 0.3s ease, border-color 0.3s ease;
    transform-style: preserve-3d;
} */