.sitemap-tree {
margin: 0 auto;
max-width: 900px;
}

.tree-node {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

.tree-node::before {
content: '';
position: absolute;
top: 0;
left: -25px;
border-left: 3px solid #e2e8f0;
height: 100%;
}

.tree-node::after {
content: '';
position: absolute;
top: 22px;
left: -25px;
border-top: 3px solid #e2e8f0;
width: 25px;
}

.tree-node:last-child::before {
height: 22px;
}

.tree-node > .node-content {
padding: 1rem 1.5rem;
margin: 0.5rem 0;
background: white;
border-radius: 15px;
border: 3px solid #e2e8f0;
transition: all 0.4s ease;
cursor: pointer;
position: relative;
z-index: 1;
display: block;
text-decoration: none;
color: inherit;
font-weight: 500;
}

.tree-node > .node-content:hover {
border-color: #1e3c72;
transform: translateX(8px) translateY(-2px);
box-shadow: 0 8px 25px rgba(30, 60, 114, 0.25);
}

.children {
margin-left: 50px;
margin-top: 0.5rem;
}

.root {
margin-left: 0;
}

.root::before,
.root::after {
display: none;
}

.toggle-btn {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.3);
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
font-weight: bold;
padding: 10px;
}

.toggle-btn:hover {
background: rgba(255, 255, 255, 0.5);
transform: translateY(-50%) scale(1.1);
}

.toggle-btn::after {
content: '−';
color: white;
}

.collapsed .toggle-btn::after {
content: '+';
}

.collapsed .children {
display: none;
}

/* Custom Classes for Different Node Types */
.tree-node.home > .node-content {
background: linear-gradient(135deg, #1e3c72, #2a5298);
color: white;
font-weight: 700;
font-size: 1.2rem;
border: none;
}

.tree-node.home > .node-content:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(30, 60, 114, 0.4);
}

.tree-node.about > .node-content {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-weight: 600;
border: none;
}

.tree-node.about > .node-content:hover {
background: linear-gradient(135deg, #764ba2, #667eea);
}

.tree-node.admission > .node-content {
background: linear-gradient(135deg, #f093fb, #f5576c);
color: white;
font-weight: 600;
border: none;
}

.tree-node.admission > .node-content:hover {
background: linear-gradient(135deg, #f5576c, #f093fb);
}

.tree-node.why-kcis > .node-content {
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: white;
font-weight: 600;
border: none;
}

.tree-node.why-kcis > .node-content:hover {
background: linear-gradient(135deg, #00f2fe, #4facfe);
}

.tree-node.academics > .node-content {
background: linear-gradient(135deg, #43e97b, #38f9d7);
color: white;
font-weight: 600;
border: none;
}

.tree-node.academics > .node-content:hover {
background: linear-gradient(135deg, #38f9d7, #43e97b);
}

.tree-node.media > .node-content {
background: linear-gradient(135deg, #fa709a, #fee140);
color: white;
font-weight: 600;
border: none;
}

.tree-node.media > .node-content:hover {
background: linear-gradient(135deg, #fee140, #fa709a);
}

.tree-node.contact > .node-content {
background: linear-gradient(135deg, #a8edea, #fed6e3);
color: #2d3748;
font-weight: 600;
border: none;
}

.tree-node.contact > .node-content:hover {
background: linear-gradient(135deg, #fed6e3, #a8edea);
}

.tree-node.location > .node-content {
background: linear-gradient(135deg, #ffecd2, #fcb69f);
color: #2d3748;
font-weight: 600;
border: none;
}

.tree-node.location > .node-content:hover {
background: linear-gradient(135deg, #fcb69f, #ffecd2);
}

.tree-node.city > .node-content {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-weight: 500;
border: none;
font-size: 1rem;
}

.tree-node.city > .node-content:hover {
background: linear-gradient(135deg, #764ba2, #667eea);
}

.tree-node.branch > .node-content {
background: linear-gradient(135deg, #ff9a9e, #fecfef);
color: #2d3748;
font-size: 0.95rem;
font-weight: 500;
border: none;
}

.tree-node.branch > .node-content:hover {
background: linear-gradient(135deg, #fecfef, #ff9a9e);
}

.tree-node.leaf > .node-content {
background: #f8fafc;
color: #4a5568;
font-size: 0.95rem;
font-weight: 500;
border-color: #cbd5e0;
}

.tree-node.leaf > .node-content:hover {
background: #edf2f7;
border-color: #1e3c72;
}

.node-link {
display: block;
text-decoration: none;
color: inherit;
width: 100%;
height: 100%;
}

.node-link:hover {
text-decoration: none;
color: inherit;
}

.icon {
margin-right: 0.75rem;
font-size: 1.1em;
}

@media (max-width: 768px) {
body {
padding: 1rem;
}

.container {
padding: 2rem;
}

.header h1 {
font-size: 2.2rem;
}

.children {
margin-left: 35px;
}

.tree-node::before {
left: -20px;
}

.tree-node::after {
left: -20px;
width: 20px;
}

.tree-node > .node-content {
padding: 0.8rem 1rem;
font-size: 0.9rem;
}
}