/*==================================================
TABLE OF CONTENTS
====================================================

1. Header
2. Navbar
3. Logo
4. Navigation
5. Navigation Links
6. Navigation Actions
7. Mobile Toggle
8. Header Scroll State

==================================================*/


/*==================================================
HEADER
==================================================*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    transition:var(--transition);

}


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

.navbar{

    width:min(100% - 30px,var(--container-width));

    height:78px;

    position:relative;

    margin:20px auto 0;

    padding:0 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:999px;

    overflow:visible;

    background:var(--glass);

border:1px solid var(--border-primary);

box-shadow:var(--shadow-sm);

    backdrop-filter:blur(20px);

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

    transition:var(--transition);



}


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

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



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

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    flex-shrink:0;

}

.logo img{
    width:60px;
    height:60px;
    object-fit:contain;
    border-radius:10px;
    display:block;
}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-title{

    font-family:var(--heading-font);

    font-size:1.35rem;

    font-weight:700;

    color:var(--text);

}

.logo-subtitle{

    margin-top:2px;

    font-size:.75rem;

    color:var(--text-light);

    letter-spacing:1px;

}


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

.nav-links{

    display:flex;

    align-items:center;

    gap:38px;

}




/*==================================================
NAVIGATION LINKS
==================================================*/

.nav-links a{

    position:relative;

    font-size:0.97rem;

    font-weight:500;

    color:var(--text-light);

    transition:var(--transition);

}

.nav-links a:hover{

    color:var(--primary-light);

text-shadow:var(--glow-primary);
}

.nav-links a::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:2px;

    background:

linear-gradient(

90deg,

var(--primary),

var(--secondary),

var(--primary)

);

    border-radius:50px;

    transform:translateX(-50%);

    transition:var(--transition);

}

.nav-links a:hover::before,

.nav-links a.active::before{

    width:100%;

}

.nav-links a.active{

    color:var(--primary-light);

text-shadow:var(--glow-primary);

}


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

.nav-dropdown{

    position:relative;

    display:flex;

    align-items:center;

}


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

.nav-dropdown-toggle{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    padding:0;

    border:0;

    outline:none;

    background:transparent;

    color:var(--text-light);

    font-family:var(--body-font);

    font-size:.97rem;

    font-weight:500;

    cursor:pointer;

    transition:var(--transition);

}

.nav-dropdown-toggle:hover{

    color:var(--primary-light);

    text-shadow:var(--glow-primary);

}


.nav-dropdown-toggle i{

    font-size:.65rem;

    transition:var(--transition);

}


/*==================================================
DROPDOWN TOGGLE ACTIVE
==================================================*/

.nav-dropdown.open .nav-dropdown-toggle{

    color:var(--primary-light);

    text-shadow:var(--glow-primary);

}

.nav-dropdown.open .nav-dropdown-toggle i{

    transform:rotate(180deg);

}


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

.nav-dropdown-menu{

    position:absolute;

    top:calc(100% + 22px);

    left:50%;

    width:270px;

    padding:10px;

    display:flex;

    flex-direction:column;

    gap:5px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translate(-50%,-10px);

    background:var(--surface);

    border:1px solid var(--border-primary);

    border-radius:16px;

    box-shadow:

        var(--shadow-lg),

        var(--glow-primary);

    backdrop-filter:blur(20px);

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

    transition:var(--transition);

    z-index:1100;

}


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

.nav-dropdown.open .nav-dropdown-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translate(-50%,0);

}


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

.nav-dropdown-menu a{

    position:relative;

    display:flex;

    align-items:center;

    gap:13px;

    width:100%;

    padding:13px 14px;

    border-radius:10px;

    color:var(--text-light);

    font-size:.88rem;

    font-weight:500;

    transition:var(--transition);

}


.nav-dropdown-menu a::before{

    display:none;

}


.nav-dropdown-menu a:hover{

    color:var(--primary-light);

    background:var(--glass-strong);

    box-shadow:

        inset 0 0 0 1px var(--border-primary),

        var(--glow-primary);

    text-shadow:none;

    transform:translateX(3px);

}


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

.nav-dropdown-menu a i{

    width:20px;

    color:var(--primary);

    font-size:.95rem;

    text-align:center;

    transition:var(--transition);

}


.nav-dropdown-menu a:hover i{

    color:var(--primary-light);

    text-shadow:var(--glow-primary);

}


/*==================================================
DROPDOWN TOP GLOW
==================================================*/

.nav-dropdown-menu::before{

    content:"";

    position:absolute;

    top:0;

    left:15%;

    width:70%;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--primary),

            var(--secondary),

            transparent

        );

}



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

.nav-actions{

    display:flex;

    align-items:center;

    gap:15px;

}


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

.menu-toggle{

    width:48px;

    height:48px;

    display:none;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:var(--white);

   background:var(--glass);

border:1px solid var(--border-primary);
    backdrop-filter:blur(15px);

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

    cursor:pointer;

    transition:var(--transition);

}

.menu-toggle:hover{

   background:var(--primary);

color:var(--body);

box-shadow:

var(--shadow-md),

var(--glow-primary);

}


.menu-toggle.active{

background:var(--primary);

color:var(--body);

box-shadow:var(--glow-primary);

}


/*==================================================
SCROLLED HEADER
==================================================*/

.header.scrolled .navbar{

    height:72px;

    margin-top:12px;

    background:rgba(6,11,20,.90);

border-color:var(--border-primary);

box-shadow:

var(--shadow-lg),

var(--glow-primary);

}


/*==================================================
NAVBAR BOTTOM LIGHT
==================================================*/

.header.scrolled .navbar::before{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:1px;

background:

linear-gradient(

90deg,

transparent,

var(--primary),

var(--secondary),

transparent

);

}