/* Seamless Grey Strip & Networking Section - Match Website Background */

/* Explore section - White background */
.overview-section {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Explore section containers - White background */
.overview-section .container,
.overview-section .services-grid,
.overview-section .service-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Match grey strip to transition from white to website background */
.overview-section + *,
.network-hero-section + *,
.overview-section ~ div:not(.network-node):not(.network-particle):not(.network-connection-point):not(.nav-container):not(.popup-container):not(.brand-selector),
.network-hero-section ~ div:not(.network-node):not(.network-particle):not(.network-connection-point):not(.nav-container):not(.popup-container):not(.brand-selector) {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    background-color: #f8f9fa !important;
    background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Networking section background - Match website background */
.network-hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    background-color: #f8f9fa !important;
    background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Network containers - Match website background */
.network-hero-section .container,
.network-hero-section .network-container,
.network-hero-section .animation-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    background-color: #f8f9fa !important;
    background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Network SVG and elements - Ensure visibility on matched background */
.network-hero-section svg,
.network-hero-section .network-svg {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove all shadows, borders, gradients, and dividers */
.overview-section + *,
.network-hero-section + *,
.overview-section ~ *,
.network-hero-section ~ *,
.network-hero-section * {
    box-shadow: none !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Match pseudo-elements to surrounding background */
.overview-section::after,
.network-hero-section::before {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    background-color: #f8f9fa !important;
    background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any divider elements */
.overview-section hr,
.network-hero-section hr,
.overview-section .divider,
.network-hero-section .divider,
.overview-section .line,
.network-hero-section .line,
.overview-section + hr,
.network-hero-section + hr,
.overview-section + .divider,
.network-hero-section + .divider,
.overview-section + .line,
.network-hero-section + .line {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: none !important;
    height: 1px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Match any container backgrounds */
.overview-section .container,
.network-hero-section .container,
.overview-section .network-container,
.network-hero-section .network-container {
    background: inherit !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure body background matches */
body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    background-color: #f8f9fa !important;
    background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* Remove any visual separators */
.overview-section *,
.network-hero-section *,
.overview-section + *,
.network-hero-section + * {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Make transition completely seamless */
.overview-section,
.network-hero-section,
.overview-section + *,
.network-hero-section + * {
    position: relative !important;
    z-index: 1 !important;
}

/* Keep network nodes visible with proper contrast */
.network-node,
.network-particle,
.network-connection-point {
    background: rgba(128, 128, 128, 0.8) !important;
    border: 2px solid rgba(96, 96, 96, 0.9) !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    isolation: isolate !important;
}

/* Network lines - Ensure visibility on matched background */
.network-loop-line-bg {
    stroke: rgba(108, 117, 125, 0.3) !important;
    stroke-width: 2 !important;
    fill: none !important;
    opacity: 1 !important;
}

.network-loop-line-main {
    stroke: rgba(108, 117, 125, 0.6) !important;
    stroke-width: 3 !important;
    fill: none !important;
    opacity: 1 !important;
}

.network-loop-line-accent {
    stroke: rgba(108, 117, 125, 0.4) !important;
    stroke-width: 1.5 !important;
    fill: none !important;
    opacity: 1 !important;
}