
<style>

/* =========================================================
   IDEYFINDHOUSE NAVIGATION
   ========================================================= */

.iff-nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;

    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   SCROLLING MENU
   ========================================================= */

.iff-scrollmenu {

    display: flex;
    align-items: center;

    width: 100%;

    gap: 8px;

    padding: 9px 15px;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    box-sizing: border-box;
}


/* Hide scrollbar - Chrome / Safari / Android */

.iff-scrollmenu::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   NAVIGATION ITEMS
   ========================================================= */

.iff-nav-item {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 15px;

    border-radius: 999px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    background: rgba(255, 255, 255, 0.92);

    color: #1f2937;

    font-size: 14px;

    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.045);

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ICON SPACING
   ========================================================= */

.iff-nav-item i {

    margin-right: 6px;

    font-size: 14px;

}


/* =========================================================
   HOVER
   ========================================================= */

.iff-nav-item:hover {

    background: #064e3b;

    color: #ffffff;

    border-color: #064e3b;

    box-shadow:
        0 4px 12px rgba(6, 78, 59, 0.18);

    transform: translateY(-1px);

}


/* =========================================================
   ACTIVE / CURRENT PAGE
   ========================================================= */

.iff-nav-item.active,
.iff-nav-item.currentPage {

    background: #064e3b !important;

    color: #ffffff !important;

    border-color: #064e3b !important;

    font-weight: 600;

    box-shadow:
        0 4px 12px rgba(6, 78, 59, 0.20);

}


/* =========================================================
   LOGIN
   ========================================================= */

.iff-login-btn {

    background: #eff6ff !important;

    color: #1d4ed8 !important;

    border-color: #bfdbfe !important;

    font-weight: 600;

}


.iff-login-btn:hover {

    background: #dbeafe !important;

    color: #1e40af !important;

    border-color: #93c5fd !important;

}


/* =========================================================
   SIGN UP
   ========================================================= */

.iff-signup-btn {

    background: #16a34a !important;

    color: #ffffff !important;

    border-color: #16a34a !important;

    font-weight: 600;

    box-shadow:
        0 3px 10px rgba(22, 163, 74, 0.18);

}


.iff-signup-btn:hover {

    background: #15803d !important;

    border-color: #15803d !important;

    color: #ffffff !important;

}


/* =========================================================
   ADVERTISER MENU
   ========================================================= */

.iff-ad-menu {

    background: #f8fafc;

    color: #334155;

}


.iff-ad-menu:hover {

    background: #064e3b;

    color: #ffffff;

}


/* =========================================================
   LOGOUT
   ========================================================= */

.iff-logout {

    color: #b91c1c !important;

}


.iff-logout:hover {

    background: #fee2e2 !important;

    color: #991b1b !important;

    border-color: #fecaca !important;

}


/* =========================================================
   GUEST LEAD BADGE
   ========================================================= */

#guestLeadBadge {

    position: absolute;

    top: -7px;

    right: -8px;

    min-width: 18px;

    height: 18px;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 0 5px;

    background: #dc2626;

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

    border-radius: 999px;

    border: 2px solid #ffffff;

    box-sizing: border-box;

}


/* =========================================================
   NOTIFICATION BELL
   ========================================================= */

.notifBell {

    position: relative;

    font-size: 18px;

    cursor: pointer;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .iff-scrollmenu {

        gap: 7px;

        padding: 8px 12px;

    }


    .iff-nav-item {

        min-height: 36px;

        padding: 8px 13px;

        font-size: 13px;

    }


    .iff-nav-item i {

        font-size: 13px;

        margin-right: 5px;

    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .iff-nav-item {

        padding: 7px 11px;

        font-size: 12px;

    }

}

</style>

