<!-- ════════════════════════════════════════════════════════
     NAVBAR — FULL RESPONSIVE UPDATED
════════════════════════════════════════════════════════ -->

<nav class="navbar" id="navbar">

    <!-- BRAND -->

    <a href="index.php" class="nav-brand">

        <img
            src="index/assets/icons/icon-192.png"
            alt="Labor Chowk"
            class="main-logo"
        >

        <div class="brand-text">

            <div class="brand-title">
                LaborChowk
            </div>

            <div class="brand-sub">
                Work Marketplace
            </div>

        </div>

    </a>

    <!-- DESKTOP MENU -->

    <div class="nav-links">

        <a href="#how" class="nav-link">
            Kaise Kaam Karta Hai
        </a>

        <a href="#roles" class="nav-link">
            Roles
        </a>

        <a href="#categories" class="nav-link">
            Categories
        </a>

        <a href="login.php" class="nav-btn">
            Login
        </a>

        <a href="register.php" class="nav-btn register-btn">
            Register Karein
        </a>

        <button
            id="installAppBtn"
            class="install-app-btn">

            📲 Install App

        </button>

    </div>

    <!-- HAMBURGER -->

    <button
        class="hamburger"
        onclick="toggleMenu()">

        ☰

    </button>

</nav>

<!-- MOBILE MENU -->

<div class="mobile-menu" id="mobileMenu">

    <a href="#how" class="mobile-link">
        Kaise Kaam Karta Hai
    </a>

    <a href="#roles" class="mobile-link">
        Roles
    </a>

    <a href="#categories" class="mobile-link">
        Categories
    </a>

    <a href="login.php" class="mobile-btn">
        Login
    </a>

    <a href="register.php" class="mobile-btn">
        Register Karein
    </a>

    <button
        id="installAppBtnMobile"
        class="mobile-btn install-mobile">

        📲 Install App

    </button>

</div>

<!-- ════════════════════════════════════════════════════════
     CSS
════════════════════════════════════════════════════════ -->

<style>

/* RESET */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* NAVBAR */

.navbar{

    width:100%;

    height:88px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 24px;

    background:#09090e;

    border-bottom:1px solid rgba(255,255,255,.08);

    position:sticky;
    top:0;

    z-index:9999;

    overflow:hidden;
}

/* BRAND */

.nav-brand{

    display:flex;
    align-items:center;

    gap:12px;

    text-decoration:none;

    min-width:0;
}

/* LOGO */

.main-logo{

    width:54px;
    height:54px;

    min-width:54px;

    object-fit:contain;

    border-radius:12px;

    display:block;
}

/* TEXT */

.brand-text{

    display:flex;
    flex-direction:column;

    overflow:hidden;
}

.brand-title{

    color:#ffffff;

    font-size:30px;
    font-weight:800;

    line-height:1;

    white-space:nowrap;

    font-family:'Syne',sans-serif;
}

.brand-sub{

    color:#9ca3af;

    font-size:13px;

    margin-top:4px;

    white-space:nowrap;
}

/* NAV LINKS */

.nav-links{

    display:flex;
    align-items:center;

    gap:16px;
}

.nav-link{

    color:#e5e7eb;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:.3s;

    white-space:nowrap;
}

.nav-link:hover{

    color:#ff7a00;
}

/* BUTTONS */

.nav-btn,
.install-app-btn{

    border:none;

    text-decoration:none;

    padding:12px 18px;

    border-radius:14px;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;

    display:flex;
    align-items:center;
    justify-content:center;

    white-space:nowrap;
}

/* LOGIN */

.nav-btn{

    background:#ff7a00;

    color:#fff;
}

.nav-btn:hover{

    background:#ff922b;

    transform:translateY(-2px);
}

/* INSTALL */

.install-app-btn{

    background:linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );

    color:#fff;
}

.install-app-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 24px rgba(168,85,247,.25);
}

/* HAMBURGER */

.hamburger{

    display:none;

    background:none;
    border:none;

    color:#fff;

    font-size:28px;

    cursor:pointer;
}

/* MOBILE MENU */

.mobile-menu{

    display:none !important;

    position:absolute;

    top:88px;

    left:0;

    width:100%;

    flex-direction:column;

    gap:14px;

    padding:20px;

    background:#09090e;

    border-top:1px solid rgba(255,255,255,.08);

    z-index:9998;
}

/* ACTIVE */

.mobile-menu.active{

    display:flex !important;
}

/* MOBILE LINKS */

.mobile-link{

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:600;
}

/* MOBILE BUTTONS */

.mobile-btn{

    background:#ff7a00;

    color:#fff;

    border:none;

    text-decoration:none;

    padding:14px;

    border-radius:14px;

    font-size:15px;
    font-weight:700;

    text-align:center;

    cursor:pointer;
}

/* INSTALL MOBILE */

.install-mobile{

    background:linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );
}

/* LARGE SCREEN */

@media(max-width:1200px){

    .brand-title{

        font-size:24px;
    }

    .nav-links{

        gap:12px;
    }

    .nav-link{

        font-size:14px;
    }

    .nav-btn,
    .install-app-btn{

        padding:10px 14px;

        font-size:13px;
    }
}

/* TABLET + MOBILE */

@media(max-width:992px){

    .navbar{

        height:76px;

        padding:0 16px;
    }

    .main-logo{

        width:46px;
        height:46px;

        min-width:46px;
    }

    .brand-title{

        font-size:20px;
    }

    .brand-sub{

        font-size:11px;
    }

    .nav-links{

        display:none !important;
    }

    .hamburger{

        display:block;
    }
}

/* SMALL MOBILE */

@media(max-width:576px){

    .navbar{

        height:70px;

        padding:0 14px;
    }

    .nav-brand{

        gap:10px;

        max-width:80%;
    }

    .main-logo{

        width:40px;
        height:40px;

        min-width:40px;
    }

    .brand-title{

        font-size:17px;
    }

    .brand-sub{

        font-size:10px;
    }

    .hamburger{

        font-size:24px;
    }

    .mobile-menu{

        padding:16px;
    }
}

</style>

<!-- ════════════════════════════════════════════════════════
     JS
════════════════════════════════════════════════════════ -->

<script>

function toggleMenu(){

    document
        .getElementById('mobileMenu')
        .classList
        .toggle('active');
}

</script>