.one-wheel-interactive-icon,.two-wheel-interactive-icon,.three-wheel-interactive-icon,.four-wheel-interactive-icon,.five-wheel-interactive-icon,.six-wheel-interactive-icon,.seven-wheel-interactive-icon,.eight-wheel-interactive-icon,.path-ja-work-interactive-icon,.path-klient-interactive-icon,.path-marka-firmy-interactive-icon,.path-strategia-marki-interactive-icon,.ja-svg-interactive-icon,.time-interactive-icon {
  pointer-events: none;}

.interactive-map-block svg { width: 100%; height: auto; display: block; }
.interactive-map-block .active { fill: #19261D !important; stroke: #333 !important; stroke-width: 1.5px !important; }
.interactive-map-block #path-klient.active,.interactive-map-block #path-marka-firmy.active{ fill: #31294F !important; stroke: #31294F !important; stroke-width: 1.5px !important; }
.interactive-map-block #path-ja-work.active,.interactive-map-block #path-strategia-marki.active{ fill: #1E494F !important; stroke: #1E494F !important; stroke-width: 1.5px !important; }
.interactive-map-block #ja-svg.active,.interactive-map-block #time-svg.active{ fill: #294030 !important; stroke: #294030 !important; stroke-width: 1.5px !important; }

#cx-life #one-svg:hover, #cx-life #two-svg:hover, #cx-life #three-svg:hover, #cx-life #four-svg:hover, #cx-life #five-svg:hover, #cx-life #six-svg:hover, #cx-life #seven-svg:hover, #cx-life #eight-svg:hover,#cx-life #ja-svg:hover,#cx-life #time-svg:hover{fill: #D3F0DC;}

#cx-life #one-svg.active + .one-wheel-interactive-icon,#cx-life #one-svg.active ~ .one-wheel-interactive-icon,
#cx-life #two-svg.active + .two-wheel-interactive-icon,#cx-life #two-svg.active ~ .two-wheel-interactive-icon,
#cx-life #five-svg.active + .five-wheel-interactive-icon,#cx-life #five-svg.active ~ .five-wheel-interactive-icon,
#cx-life #six-svg.active + .six-wheel-interactive-icon,#cx-life #six-svg.active ~ .six-wheel-interactive-icon,
#cx-life #seven-svg.active + .seven-wheel-interactive-icon,#cx-life #seven-svg.active ~ .seven-wheel-interactive-icon{
fill: #D3F0DC ;
stroke: #D3F0DC ;}
#cx-life #three-svg.active + .three-wheel-interactive-icon,#cx-life #three-svg.active ~ .three-wheel-interactive-icon,
#cx-life #four-svg.active + .four-wheel-interactive-icon,#cx-life #four-svg.active ~ .four-wheel-interactive-icon,
#cx-life #eight-svg.active + .eight-wheel-interactive-icon,#cx-life #eight-svg.active ~ .eight-wheel-interactive-icon 
{stroke: #D3F0DC ;}
#cx-life #ja-svg.active + .ja-svg-interactive-icon,#cx-life #ja-svg.active ~ .ja-svg-interactive-icon{fill:#D3F0DC;}
#cx-life #time-svg.active + .time-interactive-icon,#cx-life #time-svg.active ~ .time-interactive-icon{fill:#D3F0DC;}


#cx-work #one-svg:hover, #cx-work #two-svg:hover, #cx-work #three-svg:hover, #cx-work #four-svg:hover, #cx-work #five-svg:hover, #cx-work #six-svg:hover, #cx-work #path-ja-work:hover, #cx-work #path-strategia-marki:hover{fill: #d5f1f5;}
#cx-work #three-svg.active + .three-wheel-interactive-icon,#cx-work #three-svg.active ~ .three-wheel-interactive-icon,
#cx-work #six-svg.active + .six-wheel-interactive-icon,#cx-work #six-svg.active ~ .six-wheel-interactive-icon{
fill: #d5f1f5 ;
stroke: #d5f1f5;}
#cx-work #one-svg.active + .one-wheel-interactive-icon,#cx-work #one-svg.active ~ .one-wheel-interactive-icon,
#cx-work #two-svg.active + .two-wheel-interactive-icon,#cx-work #two-svg.active ~ .two-wheel-interactive-icon,
#cx-work #four-svg.active + .four-wheel-interactive-icon,#cx-work #four-svg.active ~ .four-wheel-interactive-icon,
#cx-work #five-svg.active + .five-wheel-interactive-icon,#cx-work #five-svg.active ~ .five-wheel-interactive-icon
{stroke: #d5f1f5;}
#cx-work #two-svg.active + .two-wheel-interactive-icon.fill-color,#cx-work #two-svg.active ~ .two-wheel-interactive-icon.fill-color{fill:#19261d;}
#cx-work #path-ja-work.active + .path-ja-work-interactive-icon,#cx-work #path-ja-work.active ~ .path-ja-work-interactive-icon{stroke:#D5F1F5;}
#cx-work #path-strategia-marki.active + .path-strategia-marki-interactive-icon,#cx-work #path-strategia-marki.active ~ .path-strategia-marki-interactive-icon{fill:#D5F1F5;}



#cx-business #one-svg:hover, #cx-business #two-svg:hover, #cx-business #three-svg:hover, #cx-business #four-svg:hover, #cx-business #five-svg:hover, #cx-business #six-svg:hover, #cx-business #seven-svg:hover, #cx-business #eight-svg:hover,#cx-business #path-klient:hover,#cx-business #path-marka-firmy:hover{fill: #DFD6FF;}
#cx-business #one-svg.active + .one-wheel-interactive-icon path,#cx-business #one-svg.active ~ .one-wheel-interactive-icon path,
#cx-business #two-svg.active + .two-wheel-interactive-icon path,#cx-business #two-svg.active ~ .two-wheel-interactive-icon path,
#cx-business #three-svg.active + .three-wheel-interactive-icon path,#cx-business #three-svg.active ~ .three-wheel-interactive-icon path,
#cx-business #four-svg.active + .four-wheel-interactive-icon path,#cx-business #four-svg.active ~ .four-wheel-interactive-icon path,
#cx-business #five-svg.active + .five-wheel-interactive-icon path,#cx-business #five-svg.active ~ .five-wheel-interactive-icon path,
#cx-business #six-svg.active + .six-wheel-interactive-icon path,#cx-business #six-svg.active ~ .six-wheel-interactive-icon path {
  fill: #DFD6FF;
  stroke: #DFD6FF;
}
#cx-business #path-klient.active + .path-klient-interactive-icon path,#cx-business #path-klient.active ~ .path-klient-interactive-icon path {stroke: #DFD6FF;}
#cx-business #path-marka-firmy.active + .path-marka-firmy-interactive-icon path,#cx-business #path-marka-firmy.active ~ .path-marka-firmy-interactive-icon path { fill: #DFD6FF; }


.info-panel {
  min-height: 160px;
  opacity: 1;
  transition: opacity 0.4s ease; /* płynne przejście */
}

.info-panel.fade-out {
  opacity: 0;
}
.dynamic-group { font-size: 20px;padding: 12px 20px;border-radius:12px;}
.system-life .dynamic-group {background: #8FC9A2;}
.system-work .dynamic-group {background: #8DC8D0;}
.system-business .dynamic-group {background: #AD99FD;}
.dynamic-group img.dynamic-image{height:35px;}

@media only screen and (max-width:768px) {
.map-dots { display: flex; gap: 6px; }
.map-dot  { width:10px; height:10px;border:solid 1px #13100B; border-radius:50%; background:#fff; cursor:pointer; }
.map-dot.active { background:#19261D; }
}

@media only screen and (max-width:500px) {
.interactive-map-block svg { width: 90%;margin:auto}
.col-md-6.map-container{ max-width: 125%; width: 125%; margin-left: -12.5%; }
}