/* Start custom CSS for html, class: .elementor-element-da413f3 */:root{
  --blue:#0b3f63;
  --blue2:#083d62;
  --ink:#0f172a;
  --muted:#475569;
  --line:rgba(11,63,99,.55);
  --card:rgba(255,255,255,.78);
  --stroke:rgba(148,163,184,.55);
  --shadow: 0 18px 55px rgba(2,6,23,.12);
  --shadow2: 0 10px 22px rgba(2,6,23,.10);
}

.org-modern{
  max-width: 1280px;
  margin: 44px auto;
  padding: 0 18px;
  font-family: Arial, sans-serif;
  color: var(--ink);
}

.org-modern-header{
  text-align: center;
  margin-bottom: 26px;
}

.org-modern-title{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: var(--blue2);

  position: relative;
  display: inline-block;
  padding-bottom: 12px;

  opacity: 0;
  transform: translateY(10px);
  animation: orgFadeUp .7s ease forwards;
}

.org-modern-title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 96px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg,#083d62,#0b3f63,#083d62);
  animation: orgUnderline .8s ease .25s forwards;
}

.org-modern-sub{
  margin-top: 7px;
  font-size: 13px;
  color: var(--muted);

  opacity: 0;
  transform: translateY(8px);
  animation: orgFadeUp .7s ease .15s forwards;
}

/* --- Level layout --- */
.org-row{
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* --- Modern card --- */
.org-card{
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;

  padding: 14px 16px;
  border-radius: 22px;

  background: var(--card);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: var(--shadow);
  min-width: 340px;

  opacity: 0;
  transform: translateY(16px);
  animation: orgCardIn .7s ease forwards;
}

.org-card.wide{ min-width: 600px; }

.org-avatar{
  width: 88px;
  height: 88px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
  box-shadow: var(--shadow2);
  flex: 0 0 88px;
  border: 3px solid rgba(255,255,255,.9);
  outline: 2px solid rgba(11,63,99,.22);
  outline-offset: 2px;
}

.org-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Text */
.org-info{ padding-right: 6px; }
.org-name{
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
  line-height: 1.15;
}
.org-role{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
  font-weight: 600;
}

/* Tag jabatan */
.org-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,63,99,.10);
  color: var(--blue);
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 8px;
}
.org-dot{
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--blue);
}

/* Highlight top leader */
.org-card.top{
  background: linear-gradient(135deg, rgba(8,61,98,.94), rgba(11,63,99,.94));
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.org-card.top .org-role{ color: rgba(255,255,255,.86); }
.org-card.top .org-tag{
  background: rgba(255,255,255,.16);
  color: #fff;
}
.org-card.top .org-dot{ background:#fff; }
.org-card.top .org-avatar{ outline-color: rgba(255,255,255,.35); }

/* --- Connectors --- */
.org-gap{ height: 16px; }

.org-conn{
  position: relative;
  width: 100%;
  height: 48px;
  opacity: 0;
  animation: orgLineIn .7s ease forwards;
}
.org-conn .v{
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  height: 48px;
  width: 0;
  border-left: 3px solid var(--line);
}

/* Branch to 3 */
.org-conn.branch3{ height: 84px; }
.org-conn.branch3 .v{ height: 26px; }
.org-conn.branch3 .h{
  position:absolute;
  left: 9%;
  right: 9%;
  top: 26px;
  border-top: 3px solid var(--line);
}
.org-conn.branch3 .d1,
.org-conn.branch3 .d2,
.org-conn.branch3 .d3{
  position:absolute;
  top: 26px;
  height: 58px;
  border-left: 3px solid var(--line);
}
.org-conn.branch3 .d1{ left: 9%; }
.org-conn.branch3 .d2{ left: 50%; transform: translateX(-50%); }
.org-conn.branch3 .d3{ right: 9%; }

/* Branch to 2 */
.org-conn.branch2{ height: 84px; }
.org-conn.branch2 .v{ height: 26px; }
.org-conn.branch2 .h{
  position:absolute;
  left: 27%;
  right: 27%;
  top: 26px;
  border-top: 3px solid var(--line);
}
.org-conn.branch2 .d1,
.org-conn.branch2 .d2{
  position:absolute;
  top: 26px;
  height: 58px;
  border-left: 3px solid var(--line);
}
.org-conn.branch2 .d1{ left: 27%; }
.org-conn.branch2 .d2{ right: 27%; }

/* --- Stagger timing (opening animation) --- */
.org-a1{ animation-delay: .25s; }
.org-a2{ animation-delay: .55s; }
.org-a3{ animation-delay: .65s; }
.org-a4{ animation-delay: .75s; }
.org-a5{ animation-delay: 1.00s; }
.org-a6{ animation-delay: 1.10s; }
.org-a7{ animation-delay: 1.20s; }
.org-a8{ animation-delay: 1.45s; }
.org-a9{ animation-delay: 1.55s; }
.org-a10{ animation-delay: 1.85s; }

.org-l1{ animation-delay: .40s; }
.org-l2{ animation-delay: .50s; }
.org-l3{ animation-delay: .92s; }
.org-l4{ animation-delay: 1.30s; }
.org-l5{ animation-delay: 1.70s; }

/* Keyframes */
@keyframes orgFadeUp{
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes orgUnderline{
  to{ transform: translateX(-50%) scaleX(1); }
}
@keyframes orgCardIn{
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes orgLineIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1180px){
  .org-row{ flex-wrap: wrap; }
  .org-card, .org-card.wide{ min-width: min(760px, 100%); }
  /* simplify connectors on small screens */
  .org-conn.branch3 .h,
  .org-conn.branch3 .d1,
  .org-conn.branch3 .d3,
  .org-conn.branch2 .h,
  .org-conn.branch2 .d1,
  .org-conn.branch2 .d2{
    display:none;
  }
  .org-conn .v{ height: 32px; }
  .org-conn{ height: 32px; }
  .org-conn.branch3, .org-conn.branch2{ height: 32px; }
}

@media (max-width: 520px){
  .org-avatar{ width: 76px; height: 76px; flex-basis: 76px; }
  .org-name{ font-size: 16px; }
  .org-role{ font-size: 12px; }
}/* End custom CSS */