* { font-family: 'Tajawal', sans-serif; }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        
        @keyframes pulse-gold {
            0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.4); }
            50% { box-shadow: 0 0 0 15px rgba(212, 168, 67, 0); }
        }
        
        @keyframes sparkle {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }
        
        @keyframes rotate-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }
        
        .animate-shimmer {
            background: linear-gradient(90deg, #D4A843 0%, #FFE680 50%, #D4A843 100%);
            background-size: 200% auto;
            animation: shimmer 3s linear infinite;
        }
        
        .animate-pulse-gold {
            animation: pulse-gold 2s ease-in-out infinite;
        }
        
        .animate-sparkle {
            animation: sparkle 2s ease-in-out infinite;
        }
        
        .animate-rotate-slow {
            animation: rotate-slow 20s linear infinite;
        }
        
        .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; }
        
        .gold-gradient {
            background: linear-gradient(135deg, #D4A843 0%, #B8860B 50%, #D4A843 100%);
        }
        
        .diamond-gradient {
            background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 50%, #B2EBF2 100%);
        }
        
        .silver-gradient {
            background: linear-gradient(135deg, #E0E0E0 0%, #9E9E9E 50%, #BDBDBD 100%);
        }
        
        .text-gold-gradient {
            background: linear-gradient(135deg, #D4A843 0%, #FFE680 50%, #D4A843 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .text-diamond-gradient {
            background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 50%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .text-silver-gradient {
            background: linear-gradient(135deg, #E0E0E0 0%, #FFFFFF 50%, #BDBDBD 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(212, 168, 67, 0.2);
        }
        
        .glass-dark {
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(212, 168, 67, 0.2);
        }
        
        .product-card:hover .product-image {
            transform: scale(1.05);
        }
        
        .hero-bg {
            background: linear-gradient(135deg, #02216b 0%, #1e293b 50%, #0f172a 100%);
           
        }
        
        .gradient-bg{
            background: linear-gradient(135deg, #02216b 0%, #1e293b 50%, #0f172a 100%);
             padding-top:50px;
        }
        
        .branch-card {
            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
        }
        
        .category-card {
            transition: all 0.4s ease;
        }
        
        .category-card:hover {
            transform: translateY(-8px);
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1e293b; }
        ::-webkit-scrollbar-thumb { background: #D4A843; border-radius: 4px; }
        
        /* Phone ring animation */
        .phone-ring {
            animation: pulse-gold 1.5s ease-in-out infinite;
        }
        
        /* Category Tabs */
        .category-tab {
            transition: all 0.3s ease;
        }
        
        .category-tab.active {
            background: linear-gradient(135deg, #D4A843 0%, #B8860B 100%);
            color: white;
        }
        
        /* WhatsApp Button Pulse */
        @keyframes pulse-whatsapp {
            0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
            50% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
        }
        
        .whatsapp-pulse {
            animation: pulse-whatsapp 2s ease-in-out infinite;
        }