body {
        font-family: Arial, sans-serif;
        margin: 0;
    }

    /* Main container */
    header {
        background: white;
        color: white;
        padding: 10px;
        text-align: center;
    }

     /* Second hamburger menu 
    .second-menu {
        position: fixed;
        top: 50px; // below main menu //
        right: 10px;
        background: #444;
        color: white;
        padding: 10px;
        border-radius: 5px;
        transition: transform 0.3s ease, opacity 0.3s ease;
        z-index: 999;
    }
    */
    /* Hidden state Desktop
    .second-menu.hidden {
        transform: translateY(-20px);
        opacity:1;
        pointer-events:all;
    }
    */
    /* Second menu container */
    .second-menu {
        background: #3CC78F;
        display: flex;
        justify-content: right;
        gap: 15px;
        padding: 10px;
        transition: top 0.3s; /* Transition effect when sliding down (and up) */
    }

    .second-menu a {
        color: lightyellow;
        text-decoration: none;
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding: 5px 10px;
        transition: background 0.3s;
    }

    .second-menu a:hover {
        /*background: #666;*/
        color: black; /* New text color on hover */
        background-color: transparent; /* Ensure background stays unchanged */
    }


    /* Desktop: hide toggle button */
    .menu-toggle {
        display: none;
    }

     .toggle-btn {
        display: none;
     }

    /* Mobile styles */
    @media (max-width: 768px) {
        
        .second-menu {
            display: flex; 
            flex-direction: column;
            position: absolute;
            top: 50px;
            right: 10px;
            background: #3CC78F;
            width: 120px; 
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        /* Hidden state */
        .second-menu.hidden {
            transform: translateY(-20px);
            opacity: 0;
            pointer-events: none;
        }
       

        /* Hamburger button */
        
        .second-menu.show {
            display: flex;
        }

       
        .menu-toggle {
            display: block;
            position: absolute;
            top: 10px;
            right: 10px;
            background: #3CC78F;
            color: lightyellow;
            border: none;
            padding: 8px;
            cursor: pointer;
            font-size: 18px;
            border-radius: 4px;
        }

        .second-menu.collapsed {
            width: 120px; 
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
        }

    
        .toggle-btn {
            display: flex;
            background-color: #3CC78F;
            color: lightyellow;
            border: none;
            width: 100%;
            padding: 12px;
            cursor: pointer;
            font-size: 18px;
            text-align: left;
        }
        
    }

  

    /* Hover effect: change only text color */
    /* nav ul li a:hover {*/
    /* color: orange; /* New text color on hover */
    /* background-color: transparent; }/* Ensure background stays unchanged */
    
   

    /* Main content */
    .content {
        flex: 1;
        padding: 20px;
    }

    /* Responsive behavior 
    @media (max-width: 768px) {
        body {
            flex-direction: column;
        }
        .sidebar {
            width: 100%;
            height: auto;
        }
        .sidebar.collapsed {
            width: 120px; 
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        .content {
            margin-left: 0;
        }
    }
    */