<style>
        :root {
            --primary: #2563eb;
            --secondary: #7c3aed;
            --tertiary: #06b6d4;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --info: #3b82f6;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --bg-light: #f8fafc;
            --bg-card: #ffffff;
            --border-light: #e5e7eb;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { 
                opacity: 0; 
                transform: translateY(30px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        @keyframes pulseGlow {
            0%, 100% { 
                box-shadow: 0 0 20px rgba(37, 99, 235, 0.3); 
            }
            50% { 
                box-shadow: 0 0 30px rgba(37, 99, 235, 0.6); 
            }
        }
        
    
  
        
        .service-card {
            transition: all 0.3s ease;
        }
        
        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .nav-link:hover {
            color: var(--primary);
            transition: color 0.2s ease;
        }
        
        .hero-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }
        
        .hero-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,<svg xmlns="https://s.coze.cn/image/w-VaWgMYHJI/" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,192L48,181.3C96,171,192,149,288,149.3C384,149,480,171,576,181.3C672,192,768,192,864,181.3C960,171,1056,149,1152,138.7C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        
        .animate-fade-in {
            animation: fadeIn 0.6s ease-in-out;
        }
        
        .animate-slide-up {
            animation: slideUp 0.8s ease-out;
        }
        
        .animate-pulse-glow {
            animation: pulseGlow 2s infinite;
        }
        
        .text-primary {
            --tw-text-opacity: 1 !important;
            color: rgb(37 99 235 / var(--tw-text-opacity, 1)) !important;
        }
        
        .bg-primary {
                --tw-bg-opacity: 1 !important;
                background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)) !important;
        }
        
        .border-primary {
            border-color: var(--primary) !important;
        }
        
        .text-secondary {
            color: var(--text-secondary) !important;
        }
        
        .bg-light {
            background-color: var(--bg-light) !important;
        }
        
        .bg-white {
            background-color: var(--bg-card) !important;
        }
        
        .shadow-card {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .shadow-card-hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .rounded-2xl {
            border-radius: 1rem;
        }
        
        .rounded-3xl {
            border-radius: 1.5rem;
        }
        
        .h-16 {
            height: 4rem;
        }
        
        .h-48 {
            height: 12rem;
        }
        
        .h-80 {
            height: 20rem;
        }
        
        .w-16 {
            width: 4rem;
        }
        
        .w-48 {
            width: 12rem;
        }
        
        .bg-blue-100 {
            background-color: #dbeafe;
        }
        
        .text-blue-600 {
            color: #2563eb;
        }
        
        .bg-green-100 {
            background-color: #d1fae5;
        }
        
        .text-green-600 {
            color: #059669;
        }
        
        .bg-purple-100 {
            background-color: #f3e8ff;
        }
        
        .text-purple-600 {
            color: #9333ea;
        }
        
        .bg-orange-100 {
            background-color: #ffedd5;
        }
        
        .text-orange-600 {
            color: #ea580c;
        }
        
        .bg-teal-100 {
            background-color: #ccfbf1;
        }
        
        .text-teal-600 {
            color: #0d9488;
        }
        
        .bg-pink-100 {
            background-color: #fce7f3;
        }
        
        .text-pink-600 {
            color: #db2777;
        }
        
        .text-blue-100 {
            color: #dbeafe;
        }
        
        .text-blue-200 {
            color: #bfdbfe;
        }
        
        .text-yellow-400 {
            color: #facc15;
        }
        
        .text-gray-400 {
            color: #9ca3af;
        }
        
        .bg-gray-900 {
            background-color: #111827;
        }
        
        .border-gray-800 {
            border-color: #1f2937;
        }
        
        .border-gray-200 {
            border-color: #e5e7eb;
        }
        
    
   
        .cursor-pointer {
            cursor: pointer;
        }
        
        .transition-colors {
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        }
        
        .transition-all {
            transition: all 0.15s ease-in-out;
        }
        
        .duration-300 {
            transition-duration: 0.3s;
        }
        
        .hover\:bg-blue-600:hover {
            background-color: #2563eb !important;
        }
        
        .hover\:bg-gray-100:hover {
            background-color: #f3f4f6 !important;
        }
        
      
        
        .hover\:text-primary:hover {
            color: var(--primary) !important;
        }
        
        .hover\:text-blue-600:hover {
            color: #2563eb !important;
        }
        
      
        
        .hover\:shadow-card-hover:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
  
        
        .hidden {
            display: none;
        }
        
        @media (max-width: 768px) {
            .hero-bg {
                background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
            }
        }
        @media (min-width: 992px) {
        #eac-certification {
            background-image: url(images/hero-1-bg-img.png);
        }
        }
        @media (max-width: 992px) {
        #eac-certification {
            background-image: url(images/hero-1-bg-img.png);
        }
        }
    </style>