/* ==================================================
DM HEALTH TECHNOLOGY
ULTIMATE ENTERPRISE NAVBAR 2026
================================================== */

:root{

    --primary:#0A84FF;
    --secondary:#00D4FF;
    --dark:#041E42;

    --text:#0F172A;
    --muted:#64748B;

    --white:#FFFFFF;

    --glass:
    rgba(255,255,255,.78);

    --glass-border:
    rgba(255,255,255,.65);

}

/* ==================================================
NAVBAR
================================================== */

.premium-navbar{

    position:sticky;
    top:0;

    z-index:9999;

    padding:16px 0;

    background:
    rgba(255,255,255,.82);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border-bottom:
    1px solid rgba(15,23,42,.05);

    transition:
    all .35s ease;

}

/* Scroll */

.premium-navbar.scrolled{

    padding:10px 0;

    background:
    rgba(255,255,255,.92);

    box-shadow:
    0 10px 40px rgba(15,23,42,.06);

}

/* ==================================================
CONTAINER
================================================== */

.premium-navbar .container-fluid{

    max-width:1600px;

    padding-left:32px;
    padding-right:32px;

}

/* ==================================================
LOGO
================================================== */

.brand-wrapper{

    display:flex;
    align-items:center;
    gap:14px;

}

.brand-icon{

    width:56px;
    height:56px;

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

    border-radius:18px;

    color:#fff;

    font-size:1.4rem;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:
    0 12px 25px rgba(10,132,255,.22);

    transition:.35s ease;

}

.premium-brand:hover .brand-icon{

    transform:
    translateY(-3px);

}

.brand-content{

    display:flex;
    flex-direction:column;

}

.brand-title{

    color:var(--text);

    font-size:1.2rem;

    font-weight:900;

}

.brand-subtitle{

    font-size:.72rem;

    color:var(--muted);

    letter-spacing:1.5px;

    font-weight:700;

}

/* ==================================================
MENU WRAPPER
================================================== */

.menu-glass-wrapper{

    padding:8px;

    border-radius:24px;

    background:
    rgba(255,255,255,.55);

    border:
    1px solid rgba(255,255,255,.70);

    box-shadow:
    0 10px 30px rgba(15,23,42,.05);

}

/* ==================================================
NAV LINKS
================================================== */

.navbar-nav{

    gap:6px;

}

.nav-link{

    position:relative;

    display:flex;
    align-items:center;
    gap:8px;

    padding:
    12px 18px !important;

    border-radius:14px;

    color:var(--muted) !important;

    font-size:.95rem;

    font-weight:700;

    transition:
    all .25s ease;

}

.nav-link i{

    font-size:1rem;

}

/* Hover */

.nav-link:hover{

    color:var(--text) !important;

    background:
    rgba(10,132,255,.06);

    transform:
    translateY(-2px);

}

/* Active */

.nav-link.active{

    color:
    var(--primary) !important;

    background:
    linear-gradient(
    135deg,
    rgba(10,132,255,.10),
    rgba(0,212,255,.10));

}

.nav-link.active::after{

    content:"";

    position:absolute;

    bottom:-6px;
    left:50%;

    transform:
    translateX(-50%);

    width:24px;
    height:4px;

    border-radius:50px;

    background:
    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

}

/* ==================================================
DROPDOWN
================================================== */

.dropdown-menu{

    border:none;

    padding:12px;

    border-radius:20px;

    background:
    rgba(255,255,255,.96);

    backdrop-filter:blur(24px);

    box-shadow:
    0 20px 50px rgba(15,23,42,.10);

    animation:
    dropdownSoft .25s ease;

}

@keyframes dropdownSoft{

    from{

        opacity:0;

        transform:
        translateY(10px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.dropdown-item{

    padding:12px 14px;

    border-radius:12px;

    font-weight:700;

    transition:.25s ease;

}

.dropdown-item:hover{

    background:
    rgba(10,132,255,.08);

    transform:
    translateX(4px);

}

/* ==================================================
BADGE
================================================== */

.navbar-badge{

    display:flex;
    align-items:center;
    gap:10px;

    padding:
    12px 18px;

    border-radius:50px;

    background:
    rgba(34,197,94,.08);

    color:#15803D;

    font-size:.88rem;

    font-weight:700;

}

.badge-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#22C55E;

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:
        0 0 0 0 rgba(34,197,94,.45);

    }

    70%{

        box-shadow:
        0 0 0 10px rgba(34,197,94,0);

    }

    100%{

        box-shadow:
        0 0 0 0 rgba(34,197,94,0);

    }

}

/* ==================================================
CTA BUTTON
================================================== */

.btn-navbar-contact{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:#fff;

    font-weight:800;

    padding:
    14px 24px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:
    0 12px 25px rgba(10,132,255,.25);

    transition:.3s ease;

}

.btn-navbar-contact:hover{

    color:#fff;

    transform:
    translateY(-3px);

    box-shadow:
    0 18px 40px rgba(10,132,255,.35);

}

/* ==================================================
ACTIONS
================================================== */

.navbar-actions{

    display:flex;
    align-items:center;
    gap:16px;

}

/* ==================================================
TOGGLER
================================================== */

.custom-toggler{

    width:30px;

}

.custom-toggler span{

    display:block;

    height:3px;

    margin:5px 0;

    border-radius:20px;

    background:
    var(--primary);

}

/* ==================================================
RESPONSIVE
================================================== */

@media(max-width:1200px){

    .menu-glass-wrapper{

        margin-top:20px;
        margin-bottom:20px;

    }

    .navbar-actions{

        flex-direction:column;

        width:100%;

    }

    .navbar-badge,
    .btn-navbar-contact{

        width:100%;

        justify-content:center;

    }

}