/* Scroll Connection Section Styling - Informatics Theme */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400..600;1,400..600&display=swap');

.scroll-connection-master {
    --strokeDashoffset: 0;
    --tabletVerticaloffset: 0px;
    background: transparent;
    /* Background moved to pseudo-element */
    color: #FFFFFF;
    position: relative;
    width: 100%;
    z-index: 1;
}

.scroll-connection-master::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f172a;
    z-index: -2;
    /* Behind everything */
}

/* Ensure Slider Section is NOT covered by the background effects */
#split-slider-main {
    position: relative;
    z-index: 100;
    /* Higher than background effects */
    background: #000 !important;
}

/* Ensure Header and Footer are on top and solid */
header,
.page-header,
.rd-navbar-wrap,
.rd-navbar,
.rd-navbar-fixed,
.rd-navbar-static,
.rd-navbar--is-stuck,
.rd-navbar-inner,
.rd-navbar-panel,
.pre-footer-corporate,
.footer-corporate,
.bg-overlay-darkest {
    position: relative !important;
    z-index: 9999 !important;
    background-color: #0f172a !important;
    /* Match master background color */
    color: #FFFFFF !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure navbar wrap is also at the very top */
.rd-navbar-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Navbar Menu Links - White Text & Theme Hover */
.rd-navbar-nav li a,
.rd-navbar-toggle,
.rd-navbar-search-toggle,
.rd-navbar-inner i,
.rd-navbar-inner span {
    color: #FFFFFF !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.rd-navbar-nav li a:hover,
.rd-navbar-nav li.active a,
.rd-navbar-toggle:hover,
.rd-navbar-search-toggle:hover {
    color: #10b200 !important;
    /* Theme Green */
}

/* Dropdown Menu Styling */
.rd-navbar-dropdown {
    background-color: #1e293b !important;
    /* Slightly lighter slate */
    border: 1px solid rgba(16, 178, 0, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.rd-navbar-dropdown li a {
    color: #cbd5e1 !important;
    /* Light slate text */
}

.rd-navbar-dropdown li a:hover {
    background-color: rgba(16, 178, 0, 0.1) !important;
    color: #10b200 !important;
}

/* Specific fix for transparent navbar */
.rd-navbar_transparent {
    background-color: #0f172a !important;
}

/* Background components - Fixed positioning for centering */
#world3d-pinned {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    /* Behind content, in front of background pseudo-element */
    perspective: 1500px;
    width: 90vw;
    max-width: 1400px;
    filter: blur(1.5px);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

#tablet-pinned {
    transform-style: preserve-3d;
    transform-origin: center center;
    transform: rotateY(20deg) rotateX(5deg);
    position: relative;
    display: block;
    width: 100%;
    height: 80vh;
    background-color: #1e293b;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
    will-change: transform;
}

#tablet-pinned:before {
    position: absolute;
    left: 100px;
    top: 40px;
    right: 40px;
    bottom: 40px;
    content: "";
    display: block;
    background-color: #0f172a;
    border-radius: 20px;
    border: 1px solid rgba(16, 178, 0, 0.2);
}

#svgPaths-pinned {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotateY(25deg);
    z-index: -1;
    /* Behind content */
    width: 800px;
    max-width: 100%;
    height: 150vh;
    filter: blur(0.5px);
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

@media (min-width: 992px) {
    #svgPaths-pinned {
        transform: translate(10vw, -50%) rotateY(25deg);
    }
}

#svgPaths-pinned use {
    fill: none;
    stroke: url(#cl1-global);
    stroke-linecap: round;
    stroke-width: var(--dot);
    stroke-dashoffset: var(--strokeDashoffset, 0);
}

#svgPaths-pinned use[href="#linePath01-global"] {
    --dot: 20px;
    --gap: 60px;
    stroke-dasharray: var(--dot) var(--gap) 150px var(--gap) var(--dot) var(--gap) 400px var(--gap) var(--dot) var(--gap) 200px var(--gap) var(--dot) 20000px;
}

#svgPaths-pinned use[href="#linePath02-global"] {
    --dot: 30px;
    --gap: 80px;
    stroke-dasharray: var(--dot) var(--gap) 200px var(--gap) var(--dot) var(--gap) 500px var(--gap) var(--dot) var(--gap) 250px var(--gap) var(--dot) 20000px;
}

#svgPaths-pinned use[href="#linePath03-global"] {
    --dot: 25px;
    --gap: 50px;
    stroke-dasharray: var(--dot) var(--gap) 180px var(--gap) var(--dot) var(--gap) 350px var(--gap) var(--dot) var(--gap) 180px var(--gap) var(--dot) 20000px;
}

#svgPaths-pinned use[href="#linePath04-global"] {
    --dot: 40px;
    --gap: 90px;
    stroke-dasharray: var(--dot) var(--gap) 150px var(--gap) var(--dot) var(--gap) 300px var(--gap) var(--dot) 20000px;
}

/* Typing reveal classes */
.word-char {
    display: inline-block;
    opacity: 0;
}

/* Override existing section backgrounds to show the connection effect */
.scroll-connection-master section {
    background: transparent !important;
    position: relative;
    z-index: 1;
    /* Above effect */
}

.scroll-connection-master .card {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Keep backdrop filter only for prominent elements where it adds most value */
#slider-caption-box,
.card-header {
    backdrop-filter: blur(8px);
}

.scroll-connection-master .text-dark {
    color: #cbd5e1 !important;
}

.scroll-connection-master .text-muted {
    color: #94a3b8 !important;
}

.scroll-connection-master .heading-decorated::before {
    background: #10b200 !important;
}

.scroll-connection-master .post-inline__link a {
    color: #34d399 !important;
}

.scroll-connection-master .post-inline__link a:hover {
    color: #10b200 !important;
}