/* --- CRITICAL FIX: Manual Color Definitions --- */
        .bg-primary {
            background-color: #10B981 !important;
        }

        .bg-secondary {
            background-color: #4F46E5 !important;
        }

        .bg-accent {
            background-color: #FEF3C7 !important;
        }

        .bg-warm {
            background-color: #FFF1F2 !important;
        }

        .bg-dark {
            background-color: #1E293B !important;
        }

        .text-primary {
            color: #10B981 !important;
        }

        .text-secondary {
            color: #4F46E5 !important;
        }

        .text-dark {
            color: #1E293B !important;
        }

        .border-primary {
            border-color: #10B981 !important;
        }

        .border-secondary {
            border-color: #4F46E5 !important;
        }

        /* Custom Utilities */
        .hero-bg {
            background-image: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(79, 70, 229, 0.85)), url('https://images.unsplash.com/photo-1576765608535-5f04d1e3f281?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
        }

        /* --- FLIP CARD CSS (Necessary for Tailwind 2.x) --- */
        .perspective-1000 {
            perspective: 1000px;
        }

        .transform-style-3d {
            transform-style: preserve-3d;
        }

        .backface-hidden {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .rotate-y-180 {
            transform: rotateY(180deg);
        }

        /* Trigger flip on group hover */
        .group:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        /* Smooth Mobile Menu Transition */
        #mobile-menu {
            transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }

        #mobile-menu.open {
            max-height: 500px;
            opacity: 1;
        }

        .step-line::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 20px;
            width: 2px;
            background: #e5e7eb;
            z-index: -1;
        }

        /* Cursor Blink Animation for Typing Effect */
        .cursor-blink {
            border-right: 4px solid #FCD34D;
            animation: blink 0.75s step-end infinite;
        }

        @keyframes blink {

            from,
            to {
                border-color: transparent
            }

            50% {
                border-color: #FCD34D
            }
        }