@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-ngo-green { background-color: #10B981; }
    .bg-ngo-blue { background-color: #1E3A8A; }
    .bg-ngo-light { background-color: #F8FAFC; }
    
    .text-ngo-green { color: #10B981; }
    .text-ngo-blue { color: #1E3A8A; }
    
    .border-ngo-green { border-color: #10B981; }
    
    .font-sans-ngo { font-family: 'Inter', sans-serif; }
    
    .btn-ngo {
        @apply inline-flex items-center justify-center bg-[#10B981] text-white font-semibold rounded-full py-3 px-8 hover:bg-[#059669] hover:shadow-lg hover:shadow-emerald-500/30 transition-all duration-300;
    }
    
    .btn-ngo-outline {
        @apply inline-flex items-center justify-center border-2 border-[#10B981] text-[#10B981] font-semibold rounded-full py-3 px-8 hover:bg-[#10B981] hover:text-white transition-all duration-300;
    }

    .btn-donate {
        @apply inline-flex items-center justify-center bg-[#EF4444] text-white font-bold rounded-full py-3 px-8 hover:bg-[#DC2626] hover:shadow-lg hover:shadow-red-500/30 transition-all duration-300 animate-pulse hover:animate-none;
    }
    
    .nav-link {
        @apply text-slate-600 hover:text-[#10B981] font-medium transition-colors duration-300;
    }
    .nav-link.active {
        @apply text-[#10B981] font-bold;
    }

    .project-card {
        @apply bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl border border-slate-100 transition-all duration-300 group flex flex-col h-full;
    }
}

/* Progress Bar Custom */
.progress-bar-bg {
    @apply w-full bg-slate-100 rounded-full h-2.5 mb-2 overflow-hidden;
}
.progress-bar-fill {
    @apply bg-[#10B981] h-2.5 rounded-full;
}