* {
            font-family: 'Inter', sans-serif;
        }
        
        [dir="rtl"] * {
            font-family: 'Cairo', sans-serif;
        }
        
        body {
            background-color: #050508;
            color: #ffffff;
            overflow-x: hidden;
        }

        /* Animated Background */
        .bg-gradient-mesh {
            background: 
                radial-gradient(ellipse at 0% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 100% 0%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
            position: fixed;
            inset: 0;
            z-index: -2;
            animation: meshMove 15s ease-in-out infinite;
        }

        @keyframes meshMove {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(20px, -20px) scale(1.05); }
            66% { transform: translate(-10px, 10px) scale(0.98); }
        }

        /* Glassmorphism Cards */
        .glass-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
        }

        .glass-card:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(139, 92, 246, 0.2);
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(139, 92, 246, 0.1);
        }

        /* Neon Glow Effects */
        .neon-border {
            position: relative;
        }

        .neon-border::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(6, 182, 212, 0.5));
            opacity: 0;
            transition: opacity 0.3s;
            z-index: -1;
            filter: blur(12px);
        }

        .neon-border:hover::before {
            opacity: 0.6;
        }

        /* Button Glow */
        .btn-glow {
            background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #06b6d4 100%);
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
        }

        .btn-glow:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 40px rgba(139, 92, 246, 0.5), 0 0 60px rgba(6, 182, 212, 0.3);
        }

        .btn-glow::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .btn-glow:hover::after {
            opacity: 1;
        }

        /* Purple Glow for specific elements */
        .purple-glow {
            box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
        }

        /* Text Gradient */
        .text-gradient {
            background: linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Scroll Reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }

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

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

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

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #8b5cf6, #06b6d4);
            border-radius: 4px;
        }

        /* Navigation */
        .nav-blur {
            background: rgba(5, 5, 8, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* 3D Isometric Effect */
        .isometric {
            transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
            transition: transform 0.5s;
        }

        .isometric:hover {
            transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
        }

        /* Floating Animation */
        .float {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        /* Pulse Glow */
        .pulse-glow {
            animation: pulseGlow 3s ease-in-out infinite;
        }

        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); }
            50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.4); }
        }

        /* Grid Pattern */
        .grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
        }

        /* Service Card Icon Container */
        .icon-container {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.1));
            border: 1px solid rgba(139, 92, 246, 0.2);
        }

        /* Portfolio Card */
        .portfolio-card {
            position: relative;
            overflow: hidden;
        }

        .portfolio-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .portfolio-card:hover::after {
            opacity: 1;
        }

        .portfolio-card:hover img {
            transform: scale(1.1);
        }

        /* Why Choose Us Card */
        .why-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s;
        }

        .why-card:hover {
            background: rgba(139, 92, 246, 0.05);
            border-color: rgba(139, 92, 246, 0.3);
            transform: translateY(-3px);
        }

        /* Ripple Effect */
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: scale(0);
            animation: ripple-animation 0.6s ease-out;
            pointer-events: none;
        }

        @keyframes ripple-animation {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* Typing Effect */
        .typing-cursor::after {
            content: '|';
            animation: blink 1s infinite;
            color: #8b5cf6;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        /* Gradient Border */
        .gradient-border {
            position: relative;
            background: rgba(255, 255, 255, 0.02);
        }

        .gradient-border::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(6, 182, 212, 0.5));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        /* RTL Support with proper spacing */
        [dir="rtl"] {
            direction: rtl;
        }
        

        /* Increase line height for Arabic text */
        [dir="rtl"] p,
        [dir="rtl"] h1,
        [dir="rtl"] h2,
        [dir="rtl"] h3 {
            line-height: 1.8;
        }

        footer * {
    direction: ltr !important;
    text-align: left;
}

.fa-brands,
.fa-solid,
.fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900;
}