﻿
    /* ===== PREMIUM DROPDOWN CARD MENU ===== */
    .navbar .drop-down > ul {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 2px solid rgba(16, 185, 129, 0.2) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
        border-radius: 16px !important;
        padding: 12px !important;
        margin-top: 8px !important;
        animation: dropdownFadeIn 0.3s ease-out;
    }
    
    @keyframes dropdownFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .navbar .drop-down > ul li {
        margin: 4px 0 !important;
    }
    
    .navbar .drop-down > ul a {
        padding: 12px 20px !important;
        border-radius: 12px !important;
        color: #064e3b !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .navbar .drop-down > ul a:hover {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: white !important;
        transform: translateX(5px) !important;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
    }
    
    .navbar .drop-down > ul a:before {
        content: "→";
        font-weight: bold;
        opacity: 0;
        transition: all 0.3s ease;
    }
    
    .navbar .drop-down > ul a:hover:before {
        opacity: 1;
    }
    
    .navbar .dropdown-divider {
        border-top: 2px solid rgba(16, 185, 129, 0.2) !important;
        margin: 12px 0 !important;
    }
    
    .navbar .drop-down .drop-down > ul {
        left: 100%;
        top: 0;
        margin-left: 8px !important;
    }
    
    .navbar .badge {
        padding: 4px 10px !important;
        border-radius: 12px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
        animation: pulse 2s infinite !important;
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }
