/* UMID Network Section Styles */
:root{
  --cream: #F5F5F5;
  --teal: #048c7f;
  --teal-dark: #025043;
}

#networkSection{
  width:100%;
  min-height:600px;
  height:auto;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 4px 30px rgba(4,140,127,0.08);
  padding:20px;
  padding-bottom:40px;
  overflow:hidden;
}

#networkSection h2{
  margin-top:20px;
  font-size:1.5rem;
  letter-spacing:1px;
  z-index:10;
  position:relative;
  color:var(--teal-dark);
}

/* Top central node */
.main-node{
  position:relative;
  margin-top:40px;
  margin-bottom:-20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16px;
  width:220px;
  border-radius:18px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(14px);
  border:2px solid rgba(4,140,127,0.4);
  box-shadow:0 8px 24px rgba(4,140,127,0.15);
  z-index:100;
  cursor:pointer;
  transition:transform 0.3s ease;
  text-decoration:none;
  color:inherit;
}

.main-node:hover{
  transform:scale(1.05);
}

.main-node img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:10px;
  border:4px solid rgba(4,140,127,0.3);
}

.main-node .label{
  font-weight:700;
  color:var(--teal-dark);
  text-align:center;
}

/* Horizontal scroller */
.scroll-area{
  position:relative;
  width:100%;
  max-width:100%;
  height:320px;
  margin-top:40px;
  margin-bottom:20px;
  overflow-x:hidden;
  overflow-y:visible;
  z-index:1;
}

.scroll-area::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
}

.strip{
  position:absolute;
  left:0;top:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:60px;
  padding:0 120px;
  will-change:transform;
  clip-path:inset(-100px -9999px -100px -9999px);
}

/* Prevent horizontal overflow */
#networkSection .node,
#networkSection .main-node{
  flex-shrink:0;
}

.node{
  width:180px;
  flex:0 0 180px;
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(255,255,255,0.3);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(4,140,127,0.08);
  cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration:none;
  color:inherit;
  z-index:10;
  position:relative;
}

.node:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 8px 26px rgba(4,140,127,0.12);
  background:rgba(255,255,255,0.9);
}

.node img{
  width:100px;
  height:100px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:8px;
  border:3px solid rgba(4,140,127,0.3);
}

.node .label{
  font-size:0.9rem;
  font-weight:600;
  color:var(--teal-dark);
  text-align:center;
}

svg.connector-lines{
  position:absolute;
  top:-2px;
  left:-10px;
  width:calc(100% + 100px);
  height:calc(100% + 100px);
  pointer-events:none;
  z-index:50;
  overflow:visible;
}

svg.connector-lines path{
  vector-effect:non-scaling-stroke;
}

.connector-line{
  stroke:rgba(4,140,127,0.4);
  stroke-width:2.5;
  fill:none;
  filter:drop-shadow(0 2px 4px rgba(4,140,127,0.1));
}

@media(max-width:768px){
  #networkSection{
    min-height:500px;
    padding:15px;
  }
  .node{width:150px;flex:0 0 150px;}
  .node img{width:80px;height:80px;}
  .main-node{
    width:180px;
  }
  .main-node img{
    width:100px;
    height:100px;
  }
}