/* =========================================================
   PRODUCTION READY PREMIUM DESKTOP NAVBAR
========================================================= */

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

.container-custom{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:0 18px;
}

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

.header-navbar{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e293b 35%,
            #312e81 70%,
            #4338ca 100%
        );

    backdrop-filter:blur(22px);

    border-top:
        1px solid rgba(255,255,255,.04);

    border-bottom:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 18px 50px rgba(0,0,0,.35);

    transition:
        background .35s ease,
        box-shadow .35s ease;
}

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

.header-navbar::before{

    content:'';

    position:absolute;

    top:-220px;
    right:-140px;

    width:460px;
    height:460px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(99,102,241,.20),
            transparent 72%
        );

    pointer-events:none;
}

.header-navbar::after{

    content:'';

    position:absolute;

    bottom:-180px;
    left:-140px;

    width:380px;
    height:380px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(14,165,233,.14),
            transparent 72%
        );

    pointer-events:none;
}

/* =========================================================
   SCROLL EFFECT
========================================================= */

.modern-header.scrolled .header-navbar{

    background:
        linear-gradient(
            135deg,
            rgba(15,23,42,.97),
            rgba(30,41,59,.98),
            rgba(49,46,129,.97)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.42);
}

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

.navbar-wrapper{

    position:relative;

    z-index:5;

    min-height:88px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;
}

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

.brand-logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    flex-shrink:0;

    max-width:260px;

    min-width:auto;

    transition:.35s ease;
}

.brand-logo:hover{

    transform:translateY(-2px);
}

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

.logo-icon{

    width:58px;
    height:58px;

    min-width:58px;

    border-radius:18px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb,
            #1d4ed8
        );

    box-shadow:
        0 14px 32px rgba(37,99,235,.35);

    transition:.35s ease;
}

/* INNER LIGHT */

.logo-icon::before{

    content:'';

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16),
            transparent
        );
}

.logo-icon img{

    width:34px;
    height:34px;

    object-fit:contain;

    position:relative;

    z-index:2;
}

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

.logo-text{

    display:flex;

    flex-direction:column;

    min-width:0;
}

.logo-text h2{

    margin:0;

    font-size:20px;

    line-height:1.05;

    font-weight:900;

    color:#ffffff;

    white-space:nowrap;

    letter-spacing:-0.3px;
}

.logo-text span{

    margin-top:4px;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:rgba(255,255,255,.68);

    white-space:nowrap;
}

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

.nav-container{

    flex:1;

    min-width:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;
}

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

.main-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:2px;

    flex-wrap:nowrap;

    min-width:0;

    overflow:hidden;
}

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

.main-nav a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:46px;

    padding:0 12px;

    border-radius:13px;

    overflow:hidden;

    white-space:nowrap;

    text-decoration:none;

    color:rgba(255,255,255,.88);

    font-size:13px;

    font-weight:700;

    letter-spacing:.2px;

    transition:.35s ease;

    flex-shrink:1;
}

/* =========================================================
   HOVER LIGHT EFFECT
========================================================= */

.main-nav a::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transition:.6s ease;
}

.main-nav a:hover::before{

    left:100%;
}

/* =========================================================
   ACTIVE LINE
========================================================= */

.main-nav a::after{

    content:'';

    position:absolute;

    left:50%;
    bottom:6px;

    transform:translateX(-50%);

    width:0;

    height:3px;

    border-radius:50px;

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #38bdf8
        );

    transition:.35s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after{

    width:60%;
}

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

.main-nav a:hover,
.main-nav a.active{

    color:#ffffff;

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

    transform:translateY(-2px);
}

/* =========================================================
   ACTION BUTTONS
========================================================= */

.nav-actions{

    display:flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;
}

/* =========================================================
   BUTTONS
========================================================= */

.action-btn{

    position:relative;

    min-width:auto;

    height:42px;

    padding:0 15px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    overflow:hidden;

    white-space:nowrap;

    text-decoration:none;

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.2px;

    transition:.35s ease;

    box-shadow:
        0 12px 28px rgba(0,0,0,.18);
}

/* =========================================================
   BUTTON SHINE
========================================================= */

.action-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        );

    transition:.6s ease;
}

.action-btn:hover::before{

    left:100%;
}

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

.action-btn:hover{

    transform:
        translateY(-3px)
        scale(1.02);

    color:#ffffff;
}

/* =========================================================
   BUTTON COLORS
========================================================= */

.student-btn{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );
}

.parent-btn{

    background:
        linear-gradient(
            135deg,
            #059669,
            #047857
        );
}

.dept-btn{

    background:
        linear-gradient(
            135deg,
            #ea580c,
            #c2410c
        );
}

/* =========================================================
   MOBILE ELEMENTS HIDE
========================================================= */

.mobile-toggle,
.mobile-overlay{

    display:none !important;
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(min-width:1400px){

    .navbar-wrapper{

        gap:36px;
    }

    .main-nav{

        gap:6px;
    }

    .main-nav a{

        padding:0 16px;

        font-size:14px;
    }

    .action-btn{

        padding:0 18px;

        font-size:13px;
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1200px){

    .navbar-wrapper{

        gap:14px;
    }

    .brand-logo{

        max-width:220px;
    }

    .logo-text h2{

        font-size:18px;
    }

    .main-nav a{

        padding:0 10px;

        font-size:12px;
    }

    .action-btn{

        padding:0 12px;

        font-size:11px;
    }
}