* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: #cdd5d8;
            color: #333;
            min-height: 100vh;
            overflow: hidden;
        }
        
       header {
    background: #cdd5d8;
    color: #4b6382;
    font-weight: bold;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #262d33;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}
        
        .nav-buttons {
            display: flex;
            gap: 10px;
        }
        
        .nav-btn {
            background: #071739;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .nav-btn:hover {
            background: #071739;
        }
        
        .nav-btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
        }
        
        h1 {
            font-weight: 400;
            font-size: 22px;
            margin: 0;
            flex-grow: 1;
            text-align: center;
            font-weight: bold;
        }
        
        .container {
            display: flex;
            height: calc(100vh - 52px);
        }
        
        .sidebar {
            width: 300px;
            background: #4b6382;
            color: white;
            overflow-y: auto;
            padding: 20px 0;
            z-index: 5;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }
        
        .sidebar h2 {
            padding: 0 20px 15px;
            font-size: 18px;
            font-weight: 500;
            border-bottom: 1px solid #262d33;
            margin-bottom: 15px;
        }
        
        .tree-menu {
            list-style: none;
            padding-left: 0;
        }
        
        .tree-menu ul {
            list-style: none;
            padding-left: 20px;
            display: none;
        }
        
        .tree-menu li {
            margin-bottom: 5px;
            position: relative;
        }
        
        .tree-menu a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 10px 20px 10px 30px;
            transition: all 0.2s;
            border-left: 4px solid transparent;
            /* font-weight: bold; */
        }
        
        .tree-menu a:hover, .tree-menu a.active {
            background: #7497c9;
            border-left: 4px solid #fffb0a;
        }
        
        .has-children > a:after {
            content: "▼";
            font-size: 10px;
            margin-left: 8px;
            position: absolute;
            right: 15px;
        }
        
        .has-children.expanded > a:after {
            content: "▲";
        }
        
        .has-children.expanded > ul {
            display: block;
        }
        
        .content {
            flex: 1;
            overflow: hidden;
            background: #1a2530;
            position: relative;
        }
        
        .slide-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .slide-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
        
    

 


        
.youtube-btn.hidden {
    display: none;
}
        
        .youtube-icon {
            margin-right: 8px;
            font-weight: bold;
        }
        
        /* Mobile responsiveness */
        @media (max-width: 900px) {
            .container {
                flex-direction: column;
                height: auto;
            }
            
            .sidebar {
                width: 100%;
                height: auto;
                max-height: 40vh;
            }
            
            .content {
                height: 60vh;
            }
            
         
            
            header {
                flex-direction: column;
                gap: 10px;
            }
            
            .nav-buttons {
                order: 2;
            }
            
            h1 {
                order: 1;
            }
        }

        /* Add this to your existing CSS */

.has-children.expanded > ul {
    display: block;
    background: #106fd4; /* Slightly different color for expanded sub-menus */
    border-left: 2px solid #071739;
    margin: 5px 0;
    border-radius: 0 4px 4px 0;
}

.has-children.expanded > ul li:last-child {
    margin-bottom: 0;
}

.has-children.expanded > ul a {
    padding-left: 40px; /* Slightly more indentation for nested items */
    border-left: 2px solid transparent;
}

.has-children.expanded > ul a:hover {
    background: #7497c9;
    border-left: 2px solid #fffb0a;
}

/* More subtle version */
.has-children.expanded > ul {
    display: block;
    background: #3e516b; /* Very subtle difference from the main background */
    margin: 3px 0;
    border-radius: 0 3px 3px 0;
     border-left: 2px solid #fffb0a;
}

.has-children.expanded > ul a {
    padding-left: 35px;
}





.tpak-btn.hidden {
    display: none;
}




.youtube-btn.hidden, .tpak-btn.hidden {
    display: none;
}

.youtube-icon {
    margin-right: 5px;
    font-weight: bold;
}

/* Header buttons styling */
.youtube-btn, .tpak-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    white-space: nowrap;
    position: static; /* Remove absolute positioning */
    transform: none; /* Remove transform */
}

.youtube-btn {
    background: #ff0000;
    color: white;
}

.youtube-btn:hover {
    background: #cc0000;
    transform: translateY(-1px); /* Only move up on hover, not sideways */
}

.tpak-btn {
    background: #ff0000;
    color: white;
}

.tpak-btn:hover {
    background: #cc0000;
    transform: translateY(-1px); /* Only move up on hover, not sideways */
}

.youtube-btn.hidden, .tpak-btn.hidden {
    display: none;
}

.youtube-icon {
    margin-right: 5px;
    font-weight: bold;
}