/* ==========================================================
   Nagpurwala Pro - Premium Header
========================================================== */

/* ---------- Topbar ---------- */

.np-topbar{
    background:#0f172a;
    color:#ffffff;
    font-size:14px;
}

.np-topbar .container{
    max-width:1320px;
    margin:0 auto;
    padding:10px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.np-topbar-left,
.np-topbar-right{
    display:flex;
    align-items:center;
    gap:18px;
}

.np-topbar a{
    color:#ffffff;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:6px;
}

.np-topbar a:hover{
    color:#60a5fa;
}

.np-post-property-btn{
    background:#0d6efd;
    color:#fff;
    padding:8px 18px;
    border-radius:6px;
    font-weight:600;
}

.np-post-property-btn:hover{
    background:#084298;
    color:#fff;
}

/* ---------- Header ---------- */

.np-header{
    background:#ffffff;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:9999;
}

.np-header .container{
    max-width:1320px;
    margin:0 auto;
    padding:0 20px;
    min-height:82px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

/* ---------- Logo ---------- */

.np-logo{
    flex:0 0 220px;
}

.np-logo img{
    max-width:220px;
    max-height:55px;
    width:auto;
    height:auto;
    display:block;
}

/* ---------- Navigation ---------- */

.np-nav{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

.np-menu{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
    list-style:none;
    margin:0;
    padding:0;
}

.np-menu li{
    position:relative;
    list-style:none;
    white-space:nowrap;
}

.np-menu li a{
    display:block;
    padding:28px 0;
    color:#1f2937;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}

.np-menu li a:hover,
.np-menu .current-menu-item>a{
    color:#0d6efd;
}

/* ---------- Actions ---------- */

.np-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.np-actions button{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#f3f4f6;
    cursor:pointer;
    transition:.25s;
    display:flex;
    align-items:center;
    justify-content:center;
}

.np-actions button:hover{
    background:#0d6efd;
    color:#fff;
}

/* ---------- Search Popup ---------- */

.np-search-popup{
    position:fixed;
    inset:0;
    display:none;
    z-index:99999;
}

.np-search-popup.active{
    display:block;
}

.np-search-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.70);
}

.np-search-wrapper{
    position:relative;
    max-width:900px;
    margin:80px auto;
    background:#fff;
    padding:40px;
    border-radius:12px;
    z-index:2;
}

.np-search-close{
    position:absolute;
    top:15px;
    right:15px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    cursor:pointer;
}

/* ---------- Sticky ---------- */

.np-header.sticky{
    animation:headerDown .3s ease;
}

@keyframes headerDown{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(0);
    }

}

/* ---------- Responsive ---------- */

@media(max-width:992px){

    .np-topbar{
        display:none;
    }

    .np-nav{
        display:none;
    }

    .np-mobile-toggle{
        display:flex !important;
    }

    .np-logo{
        flex:1;
    }

}

@media(max-width:768px){

    .np-header .container{
        min-height:70px;
        padding:0 15px;
    }

    .np-logo img{
        max-height:46px;
    }

    .np-search-wrapper{
        margin:40px 15px;
        padding:25px;
    }

}

@media(max-width:480px){

    .np-actions{
        gap:8px;
    }

    .np-actions button{
        width:38px;
        height:38px;
    }

}


.np-header{

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        background .30s ease;

}

.np-header.sticky{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#ffffff;

    box-shadow:0 10px 30px rgba(0,0,0,.10);

    animation:npHeaderDown .35s ease;

}

.np-header.np-header-hide{

    transform:translateY(-100%);

}

@keyframes npHeaderDown{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}