.organization {
  padding: 60px 0;
}

.org-tree {
  text-align: center;
}

/* NODE */
.org-node {
  position: relative;
  padding: 20px 10px;
}

/* CARD */
.org-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  min-width: 200px;
  display: inline-block;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 2;
}

.org-card.leader {
  background: linear-gradient(135deg, #2c7be5, #00c6ff);
  color: #fff;
}

/* ========================= */
/* CHILDREN CONTAINER */
/* ========================= */
.org-children {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 40px;
  padding-top: 30px;
}

/* VERTICAL LINE FROM PARENT */
.org-children::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30px;
  background: #ccc;
}

/* HORIZONTAL LINE */
.org-children::after {
  content: '';
  position: absolute;
  top: 30px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #ccc;
}

/* ========================= */
/* EACH CHILD */
/* ========================= */
.org-node {
  flex: 1;
  text-align: center;
}

/* LINE DOWN TO CARD */
.org-node::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: #ccc;
}

/* REMOVE LINE FOR ROOT */
.org-node.root::before {
  display: none;
}

/* ========================= */
/* GROUP SECTION */
/* ========================= */
.org-group {
  margin-top: 50px;
  text-align: center;
}

.org-group h3 {
  margin-bottom: 20px;
}

/* GRID MEMBERS */
.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* ========================= */
/* MOBILE */
/* ========================= */
@media(max-width:768px) {

  .org-children {
    flex-direction: column;
    align-items: center;
  }

  .org-children::after {
    display: none;
    /* remove horizontal line */
  }

  .org-node {
    width: 100%;
  }

  .org-node::before {
    height: 25px;
  }
}

/* ========================= */
/* COLLAPSE */
/* ========================= */
.org-toggle {
  cursor: pointer;
  font-size: 12px;
  margin-top: 6px;
  display: inline-block;
  color: #2c7be5;
}

.org-children.collapsed {
  display: none;
}

/* icon toggle */
.org-toggle::after {
  content: '▼';
  margin-left: 6px;
  font-size: 10px;
}

.org-toggle.collapsed::after {
  content: '▶';
}

/* ========================= */
/* GROUP STYLE */
/* ========================= */
.org-card.group {
  background: #f1f5f9;
  font-weight: bold;
}

/* ========================= */
/* MOBILE IMPROVEMENT */
/* ========================= */
@media(max-width:768px) {

  .org-card {
    width: 100%;
    min-width: unset;
  }

  .org-children {
    margin-top: 20px;
    padding-top: 20px;
  }

  .org-node {
    padding: 10px 0;
  }
}