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

.navbar{

position:sticky;

top:0;

left:0;

width:100%;

z-index:9999;

background:#111827;

box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

height:72px;

}

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

.logo{

display:flex;

align-items:center;

gap:10px;

font-size:34px;

font-weight:700;

color:#FFD700;

letter-spacing:1px;

}

.logo img{

height:48px;

width:auto;

}

.logo span{

color:#fff;

}

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

.nav-menu{

display:flex;

align-items:center;

gap:10px;

}

.nav-menu li{

position:relative;

}

.nav-menu a{

display:block;

padding:12px 18px;

font-size:16px;

font-weight:600;

color:#fff;

border-radius:8px;

transition:.35s;

}

.nav-menu a:hover{

background:#FFD700;

color:#111827;

transform:translateY(-2px);

}

.nav-menu a.active{

background:#FFD700;

color:#111827;

}

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

.nav-btn{

background:#2563eb;

color:#fff!important;

padding:12px 22px;

border-radius:8px;

}

.nav-btn:hover{

background:#1d4ed8!important;

color:#fff!important;

}

/* ==========================
HAMBURGER
========================== */

.menu-btn{

display:none;

width:48px;

height:48px;

border:none;

background:#FFD700;

border-radius:10px;

cursor:pointer;

font-size:22px;

font-weight:bold;

color:#111827;

transition:.3s;

}

.menu-btn:hover{

transform:scale(1.05);

}

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

@media(max-width:992px){

.menu-btn{

display:flex;

justify-content:center;

align-items:center;

}

.nav-menu{

position:absolute;

top:72px;

left:0;

width:100%;

background:#111827;

display:none;

flex-direction:column;

padding:20px;

gap:10px;

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

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

}

.nav-menu.show{

display:flex;

animation:slideDown .3s ease;

}

.nav-menu li{

width:100%;

}

.nav-menu a{

width:100%;

padding:14px;

border-radius:8px;

}

}

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

@media(max-width:576px){

.navbar .container{

height:65px;

}

.logo{

font-size:26px;

}

.logo img{

height:38px;

}

.menu-btn{

width:42px;

height:42px;

font-size:20px;

}

.nav-menu{

top:65px;

padding:15px;

}

}

/* ==========================
ANIMATION
========================== */

@keyframes slideDown{

0%{

opacity:0;

transform:translateY(-15px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* Scroll Effect */

.navbar.scrolled{

box-shadow:0 8px 25px rgba(0,0,0,.20);

transition:.3s;

}

/* Menu Animation */

.menu-btn.active{

transform:rotate(90deg);

transition:.3s;

}

#liveClock{

color:#FFD700;

font-size:15px;

font-weight:600;

}