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

.navbar{

width:100%;
position:fixed;
top:0;
left:0;

z-index:9999;

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

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

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

box-shadow:
0 4px 20px rgba(0,0,0,0.05);

transition:0.3s ease;
}

.nav-container{

max-width:1400px;

margin:auto;

padding:12px 40px;

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

gap:20px;
}

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

.logo{

display:flex;
align-items:center;

gap:12px;

text-decoration:none;

flex-shrink:0;
}

.logo i{

font-size:32px;

color:#6d28d9;
}

.logo span{

font-size:28px;
font-weight:800;

background:
linear-gradient(
135deg,
#4f46e5,
#7c3aed
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;
}

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

.nav-links{

display:flex;
align-items:center;

gap:35px;
}

.nav-links a,
.drop-btn{

text-decoration:none;

border:none;
background:none;

font-size:17px;
font-weight:600;

color:#111827;

cursor:pointer;

display:flex;
align-items:center;

gap:8px;

transition:0.3s;
}

.nav-links a:hover,
.drop-btn:hover{

color:#6d28d9;
}

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

.dropdown{
position:relative;
}

.mega-menu{

position:absolute;

top:70px;
left:0;

width:760px;

background:white;

border-radius:24px;

padding:35px;

display:none;

gap:40px;

box-shadow:
0 25px 60px rgba(0,0,0,0.12);

border:
1px solid #ececf2;
}

.dropdown.active .mega-menu{
display:flex;
}

.mega-column{
flex:1;
}

.mega-column h4{

font-size:22px;

margin-bottom:22px;

display:flex;
align-items:center;

gap:10px;
}

.mega-column a{

display:block;

margin-bottom:16px;

color:#4b5563;

font-weight:500;
}

.mega-column a:hover{
color:#6d28d9;
}

.small-menu{

width:260px;

flex-direction:column;
}

/* ================= RIGHT ================= */

.nav-right{

display:flex;
align-items:center;

gap:18px;
}

/* SEARCH */

.search-btn,
.theme-toggle{

width:44px;
height:44px;

border:none;

border-radius:50%;

background:#f3f4f6;

cursor:pointer;

font-size:18px;

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

transition:0.3s;
}

.search-btn:hover,
.theme-toggle:hover{

background:#ede9fe;

color:#6d28d9;

transform:
translateY(-2px)
rotate(12deg);
}

/* LOGIN */

.login-btn{

text-decoration:none;

color:#111827;

font-weight:600;
}

/* SIGNUP */

.signup-btn{

text-decoration:none;

padding:12px 24px;

border-radius:16px;

background:
linear-gradient(
135deg,
#4f46e5,
#7c3aed
);

color:white;

font-weight:700;

transition:0.3s;
}

.signup-btn:hover{

transform:translateY(-2px);
}

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

.menu-toggle{

display:none;

width:42px;
height:42px;

border:none;

border-radius:14px;

background:#f3f4f6;

cursor:pointer;

font-size:20px;

transition:0.3s;
}

.menu-toggle:hover{

background:#ede9fe;

color:#6d28d9;
}

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

@media(max-width:992px){

/* NAVBAR */

.navbar{
height:78px;
}

.nav-container{

padding:14px 18px;
}

/* LOGO */

.logo span{
font-size:22px;
}

.logo i{
font-size:28px;
}

/* MENU BTN */

.menu-toggle{

display:flex;

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

/* HIDE */

.search-btn,
.login-btn,
.signup-btn{

display:none;
}

/* MENU */

.nav-links{

position:fixed;

top:78px;
left:-100%;

width:100%;
height:calc(100vh - 78px);

background:white;

flex-direction:column;

align-items:flex-start;

padding:30px 24px;

gap:22px;

transition:0.35s ease;

overflow-y:auto;

z-index:9999;
}

.nav-links.active{
left:0;
}

/* LINKS */

.nav-links a,
.drop-btn{

width:100%;

font-size:20px;

padding:12px 0;
}

/* DROPDOWN */

.nav-item{
width:100%;
}

.mega-menu{

position:static;

width:100%;

display:none;

grid-template-columns:1fr;

padding:20px;

margin-top:10px;

border-radius:20px;

box-shadow:none;

background:#f9fafb;
}

.nav-item.active .mega-menu{
display:grid;
}

/* RIGHT */

.nav-right{

margin-left:auto;
}

}

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

@media(max-width:500px){

.nav-container{
padding:14px;
}

.logo span{
font-size:20px;
}

.logo i{
font-size:26px;
}

.menu-toggle,
.theme-toggle{

width:42px;
height:42px;

font-size:18px;
}

.nav-links{

padding:24px 18px;
}

.nav-links a,
.drop-btn{

font-size:18px;
}

}

/* ================= DARK MODE ================= */

body.dark-mode .navbar{

background:
rgba(2,6,23,0.92);

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

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

box-shadow:
0 4px 20px rgba(0,0,0,0.25);
}

/*body.dark-mode .nav-links{*/

/*background:#020617;*/
/*}*/

body.dark-mode .mega-menu{

background:#111827;

border:
1px solid rgba(255,255,255,0.05);
}

body.dark-mode .nav-links a,
body.dark-mode .drop-btn,
body.dark-mode .login-btn{

color:white;
}

body.dark-mode .mega-column a{

color:#cbd5e1;
}

body.dark-mode .mega-column a:hover{

color:white;
}

body.dark-mode .search-btn,
body.dark-mode .theme-toggle,
body.dark-mode .menu-toggle{

background:#1e293b;

color:white;
}

body.dark-mode .navbar .mega-column h4{
color:white !important;
}

body.dark-mode .navbar .mega-column h4 i{
color:#8b5cf6 !important;
}