/* ===================================================================
   NAVBAR ICONS ENHANCEMENT
   Animated icons with proper spacing
   =================================================================== */

/* Main Navigation Links - Icon Styling */
.navbar nav ul li a i {
    margin-right: 8px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-block;
}

/* Icon Animations on Hover */
.navbar nav ul li a:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* Specific Icon Animations */
.navbar nav ul li a:hover i.fa-house {
    animation: bounce-icon 0.6s ease;
}

.navbar nav ul li a:hover i.fa-circle-info {
    animation: rotate-icon 0.6s ease;
}

.navbar nav ul li a:hover i.fa-tags {
    animation: swing-icon 0.6s ease;
}

.navbar nav ul li a:hover i.fa-wrench {
    animation: shake-icon 0.6s ease;
}

.navbar nav ul li a:hover i.fa-images {
    animation: pulse-icon 0.6s ease;
}

.navbar nav ul li a:hover i.fa-newspaper {
    animation: flip-icon 0.6s ease;
}

.navbar nav ul li a:hover i.fa-envelope {
    animation: tada-icon 0.6s ease;
}

.navbar nav ul li a:hover i.fa-user {
    animation: wobble-icon 0.6s ease;
}

/* Active Link Icon */
.navbar nav ul li a.activ i {
    color: #0ea5e9;
    transform: scale(1.1);
}

/* Mega Menu Icons */
.mega-meniu h3 i {
    margin-right: 10px;
    color: #0ea5e9;
    transition: all 0.3s ease;
}

.mega-meniu ul li a i {
    margin-right: 10px;
    transition: all 0.3s ease;
    display: inline-block;
    width: 20px;
    text-align: center;
}

.mega-meniu ul li a:hover i {
    transform: translateX(5px) scale(1.2);
    color: #0ea5e9;
}

/* Dropdown Menu Icons */
.dropdown-menu li a i {
    margin-right: 10px;
    transition: all 0.3s ease;
    display: inline-block;
    width: 20px;
    text-align: center;
}

.dropdown-menu li a:hover i {
    transform: translateX(3px) scale(1.15);
    color: #0ea5e9;
}

/* Animation Keyframes */
@keyframes bounce-icon {

    0%,
    100% {
        transform: translateY(0) scale(1.2);
    }

    50% {
        transform: translateY(-8px) scale(1.2);
    }
}

@keyframes rotate-icon {
    0% {
        transform: rotate(0deg) scale(1);
    }

    100% {
        transform: rotate(360deg) scale(1.2);
    }
}

@keyframes swing-icon {

    0%,
    100% {
        transform: rotate(0deg) scale(1.2);
    }

    25% {
        transform: rotate(15deg) scale(1.2);
    }

    75% {
        transform: rotate(-15deg) scale(1.2);
    }
}

@keyframes shake-icon {

    0%,
    100% {
        transform: translateX(0) scale(1.2);
    }

    25% {
        transform: translateX(-5px) scale(1.2);
    }

    75% {
        transform: translateX(5px) scale(1.2);
    }
}

@keyframes pulse-icon {

    0%,
    100% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1.4);
    }
}

@keyframes flip-icon {
    0% {
        transform: perspective(400px) rotateY(0);
    }

    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}

@keyframes tada-icon {
    0% {
        transform: scale(1.2) rotate(0deg);
    }

    10%,
    20% {
        transform: scale(1.3) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale(1.3) rotate(3deg);
    }

    40%,
    60%,
    80% {
        transform: scale(1.3) rotate(-3deg);
    }

    100% {
        transform: scale(1.2) rotate(0deg);
    }
}

@keyframes wobble-icon {

    0%,
    100% {
        transform: translateX(0) scale(1.2);
    }

    15% {
        transform: translateX(-5px) rotate(-5deg) scale(1.2);
    }

    30% {
        transform: translateX(4px) rotate(3deg) scale(1.2);
    }

    45% {
        transform: translateX(-3px) rotate(-3deg) scale(1.2);
    }

    60% {
        transform: translateX(2px) rotate(2deg) scale(1.2);
    }

    75% {
        transform: translateX(-1px) rotate(-1deg) scale(1.2);
    }
}

/* Mobile Menu Icons */
@media (max-width: 768px) {
    .navbar nav ul li a i {
        margin-right: 12px;
        font-size: 1.1em;
    }

    .mega-meniu ul li a i,
    .dropdown-menu li a i {
        margin-right: 12px;
    }
}

/* Icon Color Variations for Better Visual Hierarchy */
.navbar nav ul li a i.fa-house {
    color: #f59e0b;
}

.navbar nav ul li a i.fa-circle-info {
    color: #3b82f6;
}

.navbar nav ul li a i.fa-tags {
    color: #ef4444;
}

.navbar nav ul li a i.fa-wrench {
    color: #8b5cf6;
}

.navbar nav ul li a i.fa-images {
    color: #ec4899;
}

.navbar nav ul li a i.fa-newspaper {
    color: #14b8a6;
}

.navbar nav ul li a i.fa-envelope {
    color: #f97316;
}

.navbar nav ul li a i.fa-user {
    color: #06b6d4;
}

/* On hover, icons become primary color */
.navbar nav ul li a:hover i {
    color: #0ea5e9 !important;
}

/* Active link keeps its color */
.navbar nav ul li a.activ i {
    color: #0ea5e9 !important;
}