.diagram-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Central Logo/Brand */
.main-hub {
  width: 25%;
  height: 25%;
  background: #c00402;
  color: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
  border: 5px solid white;
  text-align: center;
}

/* Service Nodes */
.service-item {
  position: absolute;
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  text-decoration: none;
  color: #1a1a1a;
}

.service-item:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  color: #c80201 !important;
}

.service-item i { font-size: 1.8rem; color: #c80201; margin-bottom: 8px; }
.service-item span { font-size: 1.2rem; font-weight: 600; text-transform: uppercase; line-height: 16px; }

/* Circle Geometry (Responsive positioning) */
/*.pos-1 { top: 0; }*/
/*.pos-2 { right: 10%; top: 15%; }*/
/*.pos-6 { right: 0; left: 90%; top: 35%; }*/
/*.pos-7 { right: 0; left: 90%; top: 60%; }*/
/*.pos-3 { right: 10%; bottom: 5%; }*/
/*.pos-4 { left: 10%; bottom: 15%; }*/
/*.pos-5 { left: 10%; top: 15%; }*/
/*.pos-8 { left: 0; top: 40%; }*/
/*.pos-9 { bottom: 0; }*/


.pos-1 { top: 0; }
.pos-2 { right: 10%; top: 15%; }
.pos-3 { right: 0; left: 90%; top: 35%; }
.pos-4 { right: 0; left: 90%; top: 60%; }
.pos-5 { right: 10%; bottom: -5%; }
.pos-6 { bottom: -10%; }
.pos-7 { left: 5%; bottom: 0; }
.pos-8 { left: -5%; bottom: 22%; }
.pos-9 { left: 0; top: 35%; }
.pos-10 { left: 10%; top: 10%; }





/* Responsive adjustments */
@media (max-width: 576px) {
  .diagram-wrapper { height: auto; display: block; aspect-ratio: auto; }
  .main-hub { width: 150px; height: 150px; margin: 0 auto 30px; position: static; }
  .service-item { position: static; width: 100%; height: auto; border-radius: 10px; flex-direction: row; padding: 20px; margin-bottom: 10px; justify-content: start; }
  .service-item i { margin-bottom: 0; margin-right: 20px; }
}