/* Modern Navigation Color Options */
/* =============================== */

/* Option 1: Glassmorphism with Dark Gradient (RECOMMENDED) */
.nav-option-1 .top-nav {
    background: linear-gradient(135deg, 
        rgba(15, 15, 35, 0.95) 0%, 
        rgba(26, 26, 46, 0.95) 25%, 
        rgba(22, 33, 62, 0.95) 50%, 
        rgba(15, 52, 96, 0.95) 75%, 
        rgba(83, 52, 131, 0.95) 100%) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-top: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Option 2: Deep Purple Gradient */
.nav-option-2 .top-nav {
    background: linear-gradient(135deg, 
        rgba(44, 62, 80, 0.95) 0%, 
        rgba(76, 161, 175, 0.95) 50%, 
        rgba(142, 45, 226, 0.95) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Option 3: Warm Dark Gradient */
.nav-option-3 .top-nav {
    background: linear-gradient(135deg, 
        rgba(20, 30, 48, 0.95) 0%, 
        rgba(36, 59, 85, 0.95) 50%, 
        rgba(20, 30, 48, 0.95) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 2px solid rgba(102, 126, 234, 0.4) !important;
}

/* Option 4: Modern Blue-Purple */
.nav-option-4 .top-nav {
    background: linear-gradient(135deg, 
        rgba(17, 24, 39, 0.95) 0%, 
        rgba(30, 41, 59, 0.95) 25%, 
        rgba(55, 65, 81, 0.95) 50%, 
        rgba(75, 85, 99, 0.95) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(147, 197, 253, 0.3) !important;
}

/* Option 5: Vibrant Gradient (Bold Choice) */
.nav-option-5 .top-nav {
    background: linear-gradient(135deg, 
        rgba(30, 30, 30, 0.95) 0%, 
        rgba(102, 126, 234, 0.15) 25%, 
        rgba(247, 51, 252, 0.15) 50%, 
        rgba(30, 30, 30, 0.95) 100%) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-top: 2px solid rgba(102, 126, 234, 0.5) !important;
}

/* Mobile Menu Enhancements for all options */
@media (max-width: 767px) {
    .nav-option-1 .top-nav,
    .nav-option-2 .top-nav,
    .nav-option-3 .top-nav,
    .nav-option-4 .top-nav,
    .nav-option-5 .top-nav {
        border-top: none !important;
        border-right: 3px solid rgba(102, 126, 234, 0.6) !important;
    }
}

/* Desktop Navigation Bar (the horizontal one) */
@media (min-width: 768px) {
    /* Option 1: Glassmorphism */
    .nav-option-1 .top-nav {
        background: rgba(15, 15, 35, 0.8) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-top: 1px solid rgba(102, 126, 234, 0.3) !important;
    }
    
    /* Option 2: Deep Purple */
    .nav-option-2 .top-nav {
        background: rgba(44, 62, 80, 0.8) !important;
        border-top: 1px solid rgba(142, 45, 226, 0.4) !important;
    }
    
    /* Option 3: Warm Dark */
    .nav-option-3 .top-nav {
        background: rgba(20, 30, 48, 0.8) !important;
        border-top: 1px solid rgba(102, 126, 234, 0.4) !important;
    }
    
    /* Option 4: Modern Blue */
    .nav-option-4 .top-nav {
        background: rgba(17, 24, 39, 0.8) !important;
        border-top: 1px solid rgba(147, 197, 253, 0.3) !important;
    }
    
    /* Option 5: Vibrant */
    .nav-option-5 .top-nav {
        background: rgba(30, 30, 30, 0.8) !important;
        border-top: 2px solid rgba(102, 126, 234, 0.5) !important;
    }
}

/* Enhanced link colors for each option */
.nav-option-1 .nav > li > a:hover,
.nav-option-1 .nav > li.active > a {
    color: #667eea !important;
    text-shadow: 0 0 15px rgba(102, 126, 234, 0.6) !important;
}

.nav-option-2 .nav > li > a:hover,
.nav-option-2 .nav > li.active > a {
    color: #4facfe !important;
    text-shadow: 0 0 15px rgba(79, 172, 254, 0.6) !important;
}

.nav-option-3 .nav > li > a:hover,
.nav-option-3 .nav > li.active > a {
    color: #667eea !important;
    text-shadow: 0 0 15px rgba(102, 126, 234, 0.6) !important;
}

.nav-option-4 .nav > li > a:hover,
.nav-option-4 .nav > li.active > a {
    color: #93c5fd !important;
    text-shadow: 0 0 15px rgba(147, 197, 253, 0.6) !important;
}

.nav-option-5 .nav > li > a:hover,
.nav-option-5 .nav > li.active > a {
    color: #f733fc !important;
    text-shadow: 0 0 15px rgba(247, 51, 252, 0.6) !important;
}

/* Underline colors to match each option */
.nav-option-1 .nav > li > a::before {
    background: linear-gradient(90deg, #667eea, #764ba2) !important;
}

.nav-option-2 .nav > li > a::before {
    background: linear-gradient(90deg, #4facfe, #8e2de2) !important;
}

.nav-option-3 .nav > li > a::before {
    background: linear-gradient(90deg, #667eea, #764ba2) !important;
}

.nav-option-4 .nav > li > a::before {
    background: linear-gradient(90deg, #93c5fd, #3b82f6) !important;
}

.nav-option-5 .nav > li > a::before {
    background: linear-gradient(90deg, #667eea, #f733fc) !important;
}