/* Filter Section Styles - Updated for New Design */
.content-item {
    transition: all 0.5s ease-in-out;
    display: none !important;
}

.content-item.active {
    display: grid !important;
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Filter Button Styles - Simplified */
.filter-btn {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.filter-btn.active {
    background: #9eb873  !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 10px 25px rgba(158, 184, 115, 0.3) !important;
}

/* Content Animation */
.content-item img {
    transition: transform 0.7s ease-in-out;
}

.content-item:hover img {
    transform: scale(1.05);
}

/* Override Tailwind classes when needed */
.from-dark\/40 {
    --tw-gradient-from: rgba(17, 24, 39, 0.4);
}

.via-primary\/20 {
    --tw-gradient-via: rgba(var(--color-primary), 0.2);
}

.border-primary\/20 {
    border-color: rgba(var(--color-primary), 0.2);
}

/* Animation classes */
[data-aos] {
    opacity: 0;
    transition: all 0.8s ease-in-out;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-right"] {
    transform: translateX(-50px);
}

[data-aos="fade-left"] {
    transform: translateX(50px);
}

[data-aos].aos-animate {
    transform: translateX(0);
}