body {
            font-family: 'Inter', sans-serif;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Montserrat', sans-serif;
        }

        .glass-nav {
            background: rgba(20, 83, 45, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .text-shadow {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* Smooth Page Transitions - Optimized */
        .page-section {
            opacity: 0;
            transform: translate3d(0, 20px, 0);
            display: none;
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
            will-change: opacity, transform;
        }

        .page-section.active {
            opacity: 1;
            transform: translate3d(0, 0, 0);
            display: block;
            animation: fadeIn 0.3s ease-out forwards;
        }

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

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Scroll Reveal - Optimized */
        .reveal {
            opacity: 0;
            transform: translate3d(0, 30px, 0);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
            will-change: opacity, transform;
        }

        .reveal.active {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        .reveal-delay-100 {
            transition-delay: 0.1s;
        }

        .reveal-delay-200 {
            transition-delay: 0.2s;
        }

        .reveal-delay-300 {
            transition-delay: 0.3s;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #166534;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #14532d;
        }

        /* ========== PROJECT DETAIL PAGE ENHANCEMENTS ========== */

        /* Title Gradient Animation */
        .project-title-gradient {
            background: linear-gradient(135deg, #14532d 0%, #16a34a 50%, #22c55e 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientShift 6s ease infinite;
            will-change: background-position;
        }

        @keyframes gradientShift {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }

        /* Entrance Animations */
        .animate-slide-up {
            animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
            will-change: opacity, transform;
        }

        .animate-slide-right {
            animation: slideRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
            will-change: opacity, transform;
        }

        .animate-slide-left {
            animation: slideLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
            will-change: opacity, transform;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translate3d(0, 30px, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes slideRight {
            from {
                opacity: 0;
                transform: translate3d(-30px, 0, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes slideLeft {
            from {
                opacity: 0;
                transform: translate3d(30px, 0, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        /* Staggered Animation Delays */
        .delay-100 {
            animation-delay: 0.1s;
        }

        .delay-200 {
            animation-delay: 0.2s;
        }

        .delay-300 {
            animation-delay: 0.3s;
        }

        .delay-400 {
            animation-delay: 0.4s;
        }

        .delay-500 {
            animation-delay: 0.5s;
        }

        .delay-600 {
            animation-delay: 0.6s;
        }

        /* Stat Card Animations */
        .stat-card {
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(22, 163, 74, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .stat-card:hover::before {
            left: 100%;
        }

        .stat-icon {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .stat-card:hover .stat-icon {
            transform: scale(1.2) rotate(5deg);
        }

        /* Image Enhancements */
        .project-image-before {
            position: relative;
            overflow: hidden;
        }

        .project-image-before::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, rgba(22, 163, 74, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .project-image-before:hover::after {
            opacity: 1;
        }

        .project-image-after {
            position: relative;
            overflow: hidden;
        }

        .project-image-after::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(22, 163, 74, 0.15), transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .project-image-after:hover::before {
            opacity: 1;
        }

        /* Floating Decorative Orbs - Optimized */
        .floating-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(40px);
            opacity: 0.25;
            animation: float 15s ease-in-out infinite;
            pointer-events: none;
            will-change: transform;
        }

        .floating-orb-1 {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #16a34a, #22c55e);
            top: -100px;
            right: -100px;
            animation-delay: 0s;
        }

        .floating-orb-2 {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #14532d, #16a34a);
            bottom: -50px;
            left: -50px;
            animation-delay: 5s;
        }

        @keyframes float {

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

            33% {
                transform: translate3d(30px, -30px, 0) scale(1.05);
            }

            66% {
                transform: translate3d(-20px, 20px, 0) scale(0.95);
            }
        }

        /* Progress Bar Animation */
        .progress-bar {
            position: relative;
            height: 4px;
            background: rgba(22, 163, 74, 0.1);
            border-radius: 2px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #16a34a, #22c55e);
            border-radius: 2px;
            animation: progressFill 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transform-origin: left;
            will-change: transform;
        }

        @keyframes progressFill {
            from {
                transform: scaleX(0);
            }

            to {
                transform: scaleX(1);
            }
        }

        /* Icon Pulse Animation */
        .icon-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }
        }

        /* Badge Shine Effect */
        .badge-shine {
            position: relative;
            overflow: hidden;
        }

        .badge-shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
            transform: rotate(45deg);
            animation: shine 3s ease-in-out infinite;
        }

        @keyframes shine {
            0% {
                transform: translateX(-100%) translateY(-100%) rotate(45deg);
            }

            100% {
                transform: translateX(100%) translateY(100%) rotate(45deg);
            }
        }

        /* Glow Effect */
        .glow-on-hover {
            transition: all 0.3s ease;
        }

        .glow-on-hover:hover {
            box-shadow: 0 0 20px rgba(22, 163, 74, 0.4), 0 0 40px rgba(22, 163, 74, 0.2);
        }

        /* Number Counter Animation */
        @keyframes countUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .count-up {
            animation: countUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* Divider Line Animation */
        .animated-divider {
            position: relative;
            height: 2px;
            background: linear-gradient(90deg, transparent, #16a34a, transparent);
            animation: dividerGlow 2s ease-in-out infinite;
        }

        @keyframes dividerGlow {

            0%,
            100% {
                opacity: 0.3;
            }

            50% {
                opacity: 0.8;
            }
        }