/* ==========================================================
   BusinessPlatform - Site Styles
   Minimal custom CSS on top of Bootstrap 5.3
   Theme: Dark Brown / Rust / Cream / Charcoal
   ========================================================== */

/* ----------------------------------------------------------
   Root Variables
   ---------------------------------------------------------- */
   :root {
    --bp-text: #eeeeee;
    --bp-radius: 1.25rem;
    --bp-transition: all 0.3s ease;
}

/* ----------------------------------------------------------
   Base
   ---------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: #111111;
    
    font-size:1.2rem;
    color: var(--bp-text);
    line-height: 1.7;
}

/* Menu */
.topmenu-btn {
    anchor-name: --top-menu;
    position : absolute;
    top : 1rem;
    right : 1rem;
    font-size: 3rem;
    background-color: transparent;
    color :#fff;
}

.topmenu-body {
    position: absolute;
    position-anchor: --top-menu;
    position-area: start end;
}

.header-img {
    height: 4rem;
    width:auto;
}

.section-hero {
    background-image: url("/Images/Backgrounds/bg1.jpg");
    background-size: cover;
    min-height: 100vh;
}

.section-primary {
    min-height : 60vh;
    
    /* Dark blue / charcoal gradient */
   background:
        radial-gradient(
            circle at top right,
            rgba(59, 130, 246, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(245, 158, 11, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0b1120 0%,
            #111827 45%,
            #1f2937 100%
        );

    color: #ffffff;
}

.orbit-wrap {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 360px;
    margin: 40px auto;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    overflow: hidden;
    background: radial-gradient(circle at center, #222, #050505);
}

.orbit-node {
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);
    transition:
        transform 0.1s linear,
        opacity 0.1s linear;

    user-select: none;
    text-align: center;

    width: 140px;
    height: 140px;

    color: #f5f5f5;
}

.orbit-node i {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 10px;

    text-shadow:
        0 0 12px rgba(0,0,0,0.6),
        0 0 24px rgba(0,0,0,0.35);
}

.orbit-node span {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}



/* =========================
   DEVICE NODE
   ========================= */

.node-device i {
    color: #4fc3ff;

    filter:
        drop-shadow(0 0 8px rgba(79,195,255,0.8))
        drop-shadow(0 0 18px rgba(79,195,255,0.4));
}

.node-device span {
    color: #cfefff;
}



/* =========================
   QUEUE NODE
   ========================= */

.node-queue i {
    color: #ffb84d;

    filter:
        drop-shadow(0 0 8px rgba(255,184,77,0.8))
        drop-shadow(0 0 18px rgba(255,184,77,0.45));
}

.node-queue span {
    color: #ffe4b8;
}



/* =========================
   SERVICE NODE
   ========================= */

.node-service i {
    color: #78ff9f;

    filter:
        drop-shadow(0 0 8px rgba(120,255,159,0.8))
        drop-shadow(0 0 18px rgba(120,255,159,0.45));
}

.node-service span {
    color: #d9ffe6;
}



/* =========================
   OPTIONAL HOVER EFFECT
   ========================= */

.orbit-node:hover {
    transform:
        translate(-50%, -50%)
        scale(1.08) !important;
}



/* =========================
   OPTIONAL PULSE ANIMATION
   ========================= */

@keyframes nodePulse {

    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.25);
    }

    100% {
        filter: brightness(1);
    }
}

.node-device i,
.node-queue i,
.node-service i {
    animation: nodePulse 4s ease-in-out infinite;
}