.org-chart-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%;position: relative;}
.org-chart-wrapper:after {content:"";position: absolute;top: 60px;width: 1px;height: calc(100% - 60px);background: #CCCCCC;z-index: -1;left: 50%;}
.node-president {border: 1px solid #009BB41A;background: #009BB41A;max-width: 280px;height: 60px;padding: 16px 10px;box-sizing: border-box;width: 100%;text-align: center;border-radius: 100px;margin: 0 0 40px;position: relative;z-index: 2;}
.node-president > p {font-weight: 600;font-size: 20px;line-height: 140%;letter-spacing: 0;vertical-align: middle;color: #009BB4;}



.node-office { background-color: #009BB4; color: #ffffff; padding: 16px 10px; border-radius: 30px; text-align: center;max-width: 280px;width: 100%;box-sizing: border-box;margin: 0 0 56px;}
.office-main { font-weight: 600;font-size: 20px;line-height: 140%;letter-spacing: 0;vertical-align: middle;color: #FFFFFF;padding: 0 0 10px;position: relative;margin: 0 0 10px;}
.office-main:after {content:"";position: absolute;bottom: 0;width: 160px;height: 1px;background: #FFFFFF33;left: 50%;transform: translatex(-50%);}
.office-sub {font-weight: 600;font-size: 20px;line-height: 140%;letter-spacing: 0;vertical-align: middle;color: #fff;}


.middle-section { display: grid; grid-template-columns: 1fr 1fr; width: 100%; position: relative;padding: 0 60px;box-sizing: border-box;margin: 0 0 80px;align-items: end;}
.left-side { display: flex; justify-content: flex-start; align-items: center;position: relative;}
.right-side { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-end;}
.center-col { position: relative; display: flex; justify-content: center; }

.node-committee { position: relative; width: 100%;display: flex;justify-content: flex-end;}
.node-committee::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: #cbd5e1; }
.node-committee > p {background: #003B90;border-radius: 100px;padding: 16px 10px;max-width: 280px;width: 100%;text-align: center;color: #fff;position: relative;z-index: 10;box-sizing: border-box;font-weight: 600;font-size: 20px;line-height: 140%;letter-spacing: 0px;vertical-align: middle;}
.node-committee.border-blue > p { border: 1px solid #003B901A;background: #F4F8FC;color: #003B90;}


.card-planning { position: relative;max-width: 280px;width: 100%;z-index: 10;}
.card-planning .card-header {background: #003B90;padding: 16px 10px;height: 60px;box-sizing: border-box;margin: 0 0 15px;border-radius: 100px;text-align: center;font-weight: 600;font-size: 20px;line-height: 140%;letter-spacing: 0;vertical-align: middle;color: #fff;}
.card-planning .card-body {background: #F4F8FC;border: 1px solid #003B901A;border-radius: 20px;padding: 20px;}
.left-side::after { content: ""; position: absolute; right: 0; top: 51%; width: 100%; height: 1px; background-color: #cbd5e1; }


.committee-group { position: relative; display: flex; flex-direction: column; gap: 10px;width: 100%;align-items: flex-end;}
.committee-group .node-committee {padding: 0 0 10px;}
.committee-group .node-committee:last-child {padding: 0;}
.committee-group::after { content:"";position:absolute;left:0;right:auto;top:50%;height:1px;background-color:#cbd5e1;width: 100%;}
.committee-group > div {max-width: 280px;width: 100%;position: relative;}
.committee-group > div::before {content:"";position:absolute;left:-40px;top:30px;bottom:23px;width:40px;border:1px solid #cbd5e1;border-right:none;border-radius:12px 0 0 12px;background:transparent;}


.bottom-section { width: 100%; position: relative; }
.bottom-section::before {content:"";position:absolute;top:-40px;left:16.66%;right:16.66%;height:60px;border:1px solid #cbd5e1;border-bottom:none;border-radius:12px 12px 0 0;background:transparent;pointer-events:none;z-index: -1;}
.teams-box { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);; gap: 80px; border: 1px solid #e2e8f0; border-radius: 30px; padding: 40px 50px; background-color: #ffffff;z-index: 1;}
.team-card { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.team-header { position: relative; background-color: #ffffff;border: 1px solid #00000033;font-weight: 600;font-size: 20px;line-height: 140%;letter-spacing: 0;vertical-align: middle;color: #262626;border-radius: 100px;width: 100%;text-align: center;height: 60px;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
.team-body { background-color: #F7F7F7; border-radius: 16px; padding: 24px 20px; width: 100%;box-sizing: border-box;}

.org-chart-wrapper ul.list-chart > li {position: relative;font-weight: 400;font-size: 18px;line-height: 160%;letter-spacing: 0;vertical-align: middle;color: #545454;padding: 0 0 4px 16px;}
.org-chart-wrapper ul.list-chart > li:last-child {padding-bottom: 0;}
.org-chart-wrapper ul.list-chart > li:before {content: "";position: absolute;top: 13px;left: 0;width: 4px;height: 4px;background: #003B90;border-radius: 100%;}

@media (max-width: 1300px){
	.teams-box {gap: 20px;}
}


@media (max-width: 1024px){
	.node-president {max-width: unset;}
	.node-office {max-width: unset;}
	
	.middle-section {display: flex;flex-direction: column-reverse;gap: 20px;}
	.right-side {width: 100%;}
	.node-committee > p {max-width: unset;}
	.committee-group > div {max-width: unset;}
	.committee-group > div::before {display: none;}
	
	.left-side {width: 100%;} 
	.card-planning {max-width: unset;}
	.teams-box {padding: 20px;}
}

@media (max-width: 768px){
	.middle-section {padding: 0;margin: 0 0 40px;}
	.org-chart-wrapper:after {top: 47px;}
	
	.node-president {height: auto;padding: 10px;}
	.node-president > p {font-size: 18px;}
	.node-office {padding: 10px;height: auto;margin: 0 0 30px;}
	.office-main {font-size: 18px;}
	.office-sub {font-size: 18px;}
	
	.node-committee > p {padding: 10px;font-size: 16px;}
	.card-planning .card-header {padding: 10px;font-size: 16px;height: auto;}
	.org-chart-wrapper ul.list-chart > li {font-size: 14px;}
	.org-chart-wrapper ul.list-chart > li:before {top: 9px;}
	
	.teams-box {grid-template-columns: repeat(1, 1fr);}
	.bottom-section::before {display: none;}
	.team-header {font-size: 18px;height: auto;padding: 10px;}
}