@font-face {
            font-family: 'Jameel Noori Nastaleeq';
            src: url('../lang/Jameel Noori Nastaleeq Regular.ttf') format('truetype'),
                 url('../lang/Jameel Noori Nastaleeq.woff') format('woff');
        }

        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        :lang(ur) {
            font-family: 'Jameel Noori Nastaleeq', serif !important;
        }

        .navbar {
            background: #000;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
        }

        .logo {
            font-size: 30px;
            font-weight: bold;
        }

        .logo a {
            color: white;
            text-decoration: none;
        }

        .nav-list {
            display: flex;
            flex-direction: row;
            align-items: center;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-list li {
            position: relative;
        }

        .nav-list li > span,
        .nav-list li > a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
            cursor: pointer;
        }

        .nav-list li > span:hover,
        .nav-list li > a:hover {
            background-color: #333;
        }

        .dropdown-wrapper {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: black;
            border: 1px solid #555;
            z-index: 1000;
            flex-direction: row;
            color: white;
        }

        .nav-list li:hover .dropdown-wrapper {
            display: flex;
        }

        .parent-list,
        .child-box {
            width: 200px;
            background: black;
            color: white;
        }

        .parent-list ul,
        .child-box ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .parent-list li,
        .child-box li {
            padding: 10px 15px;
            border-bottom: 1px solid #333;
        }

        .parent-list li:hover,
        .child-box li:hover {
            background: #222;
        }
         .parent-list,
        .child-box {
            width: 200px;
            max-height: 300px;       
            overflow-y: auto;        
            background: black;
            color: white;
        }
        
        .parent-list::-webkit-scrollbar,
        .child-box::-webkit-scrollbar {
            width: 8px; 
            height: 8px;
        }

        .parent-list::-webkit-scrollbar-track,
        .child-box::-webkit-scrollbar-track {
            background: transparent;
        }

        .parent-list::-webkit-scrollbar-thumb,
        .child-box::-webkit-scrollbar-thumb {
            background-color: rgb(255, 255, 255); /* light and subtle */
            border-radius: 10px;
        }

.parent-list::-webkit-scrollbar-thumb:hover,
.child-box::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

        .arrow {
            float: right;
        }

        .child-box {
            position: absolute;
            left: 100%;
            top: 0;
            display: none;
            white-space: nowrap;
            height: auto;
            transition: top 0.2s ease, height 0.2s ease;
        }

        .btn-info,
        .btn-warning {
            padding: 6px 12px;
            font-size: 14px;
            border-radius: 4px;
        }

        #menuToggle {
            display: none;
            font-size: 28px;
            color: white;
            cursor: pointer;
        }

        @media screen and (max-width: 768px) {
            .nav-list {
                display: none;
                flex-direction: column;
                width: 100%;
                background: #000;
                margin-top: 10px;
            }

            .nav-list.show {
                display: flex !important;
            }

            .dropdown-wrapper {
                position: static;
                flex-direction: column;
                width: 100%;
            }

            .parent-list,
            .child-box {
                width: 100%;
            }

            .parent-list li,
            .child-box li,
            .parent-list li a,
            .child-box li a {
                color: white !important;
            }

            #menuToggle {
                display: block;
            }

            .child-box {
                position: static;
                display: block;
                top: auto;
                left: auto;
            }
        }