Spaces:

fastpro
/

home-2

Running

App Files Files Community

home-2 / index3.html

joermd

Create index3.html

7202e00 verified about 1 year ago

Raw

History Blame Contribute Delete

151 kB

	<!DOCTYPE html>
	<html lang="ar" dir="rtl">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>فاست برو - حلول الذكاء الاصطناعي المتقدمة</title>
	<!-- Font Awesome CDN -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Roboto:wght@300;400;500;700&family=Tajawal:wght@300;400;500;700;900&display=swap" rel="stylesheet">
	<!-- Particles.js for Interactive Background -->
	<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
	<!-- Typed.js for Text Animation -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
	<!-- AOS Library for Scroll Animations -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
	<style>
	:root {
	--primary-color: #4facfe;
	--primary-gradient: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	--secondary-color: #36d1dc;
	--secondary-gradient: linear-gradient(to right, #36d1dc 0%, #5b86e5 100%);
	--accent-color: #ff6a88;
	--accent-gradient: linear-gradient(to right, #ff6a88 0%, #ff99ac 100%);
	--dark-color: #1d2b3a;
	--light-color: #f8fbff;
	--text-color: #334455;
	--bg-color: #ffffff;
	--card-bg: #f0f5ff;
	--footer-bg: #1a2b3c;
	--success-color: #2ee86a;
	--warning-color: #ffcc00;
	--info-color: #17a2b8;
	--transition: all 0.3s ease-in-out;
	--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	--card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	--button-shadow: 0 10px 20px rgba(79, 172, 254, 0.3);
	--gold-color: #ffd700;
	--royal-gold: linear-gradient(45deg, #ffd700, #ffed4e);
	}

	/* Dark Mode Variables */
	[data-theme="dark"] {
	--primary-color: #4facfe;
	--primary-gradient: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	--secondary-color: #36d1dc;
	--secondary-gradient: linear-gradient(to right, #36d1dc 0%, #5b86e5 100%);
	--accent-color: #ff6a88;
	--accent-gradient: linear-gradient(to right, #ff6a88 0%, #ff99ac 100%);
	--dark-color: #f0f5ff;
	--light-color: #1d2b3a;
	--text-color: #e0e0e0;
	--bg-color: #121a24;
	--card-bg: #1e2936;
	--footer-bg: #0c1218;
	--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	--card-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	--button-shadow: 0 10px 20px rgba(79, 172, 254, 0.2);
	}

	/* SPEEDY UNIVERSE Theme */
	[data-theme="cosmos"] {
	--primary-color: #7b2cbf;
	--primary-gradient: linear-gradient(to right, #7b2cbf 0%, #3a0ca3 100%);
	--secondary-color: #f72585;
	--secondary-gradient: linear-gradient(to right, #f72585 0%, #7209b7 100%);
	--accent-color: #4cc9f0;
	--accent-gradient: linear-gradient(to right, #4cc9f0 0%, #4361ee 100%);
	--dark-color: #e0fbfc;
	--light-color: #10002b;
	--text-color: #e0aaff;
	--bg-color: #240046;
	--card-bg: #3c096c;
	--footer-bg: #10002b;
	--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	--card-shadow: 0 5px 15px rgba(121, 41, 191, 0.3);
	--button-shadow: 0 10px 20px rgba(123, 44, 191, 0.4);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: background-color 0.3s, color 0.3s;
	}

	body {
	font-family: 'Cairo', 'Tajawal', 'Roboto', sans-serif;
	background-color: var(--bg-color);
	color: var(--text-color);
	overflow-x: hidden;
	}

	/* Language Specific Styles */
	[lang="ar"] {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	direction: rtl;
	}

	[lang="en"] {
	font-family: 'Roboto', sans-serif;
	direction: ltr;
	}

	h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	margin-bottom: 1rem;
	line-height: 1.3;
	color: var(--dark-color);
	}

	p {
	line-height: 1.6;
	margin-bottom: 1rem;
	}

	a {
	text-decoration: none;
	color: var(--primary-color);
	transition: var(--transition);
	}

	[data-theme="dark"] a, [data-theme="cosmos"] a {
	color: white;
	}

	a:hover {
	color: var(--secondary-color);
	}

	.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	}

	.section {
	padding: 80px 0;
	position: relative;
	overflow: hidden;
	}

	.section-title {
	text-align: center;
	margin-bottom: 50px;
	position: relative;
	}

	.section-title h2 {
	font-size: 2.5rem;
	display: inline-block;
	position: relative;
	z-index: 1;
	padding-bottom: 15px;
	}

	.section-title h2::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: var(--primary-gradient);
	border-radius: 2px;
	}

	.section-title h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background: var(--accent-gradient);
	border-radius: 2px;
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0%, 100% {
	opacity: 1;
	width: 40px;
	}
	50% {
	opacity: 0.5;
	width: 60px;
	}
	}

	/* Particles Background */
	#particles-js {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.5;
	pointer-events: none;
	}

	[data-theme="cosmos"] #particles-js {
	opacity: 0.8;
	}

	/* Star Background for Cosmos Theme */
	.stars-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	overflow: hidden;
	display: none;
	}

	[data-theme="cosmos"] .stars-container {
	display: block;
	}

	.star {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	animation: twinkle 5s infinite;
	}

	@keyframes twinkle {
	0% { opacity: 0.3; }
	50% { opacity: 1; }
	100% { opacity: 0.3; }
	}

	.shooting-star {
	position: absolute;
	width: 4px;
	height: 4px;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
	transform: rotate(45deg);
	animation: shoot 8s linear infinite;
	border-radius: 50%;
	box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.3);
	}

	@keyframes shoot {
	0% {
	transform: translateX(-100px) translateY(-100px) rotate(45deg);
	opacity: 1;
	}
	70% {
	opacity: 1;
	}
	100% {
	transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px)) rotate(45deg);
	opacity: 0;
	}
	}

	/* Header Styles */
	.header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	padding: 15px 0;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
	z-index: 100;
	transition: var(--transition);
	}

	[data-theme="dark"] .header {
	background-color: rgba(18, 26, 36, 0.95);
	}

	[data-theme="cosmos"] .header {
	background-color: rgba(36, 0, 70, 0.95);
	}

	.header.scrolled {
	padding: 10px 0;
	background-color: rgba(255, 255, 255, 0.98);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
	}

	[data-theme="dark"] .header.scrolled {
	background-color: rgba(18, 26, 36, 0.98);
	}

	[data-theme="cosmos"] .header.scrolled {
	background-color: rgba(36, 0, 70, 0.98);
	}

	.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.logo {
	display: flex;
	align-items: center;
	}

	.logo-image {
	width: 40px;
	height: 40px;
	margin-left: 10px;
	border-radius: 8px;
	object-fit: cover;
	}

	.logo-text {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--dark-color);
	}

	[data-theme="dark"] .logo-text, [data-theme="cosmos"] .logo-text {
	color: var(--dark-color);
	}

	/* Logo Animation Container */
	.logo-animated {
	display: inline-block;
	min-width: 150px;
	font-weight: 700;
	}

	/* Language Selector */
	.language-selector {
	position: relative;
	margin-left: 20px;
	}

	.current-lang {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 5px;
	background-color: var(--card-bg);
	color: var(--dark-color);
	transition: var(--transition);
	}

	[data-theme="dark"] .current-lang, [data-theme="cosmos"] .current-lang {
	color: white;
	}

	.current-lang:hover {
	background-color: var(--primary-color);
	color: white;
	}

	.current-lang img {
	width: 20px;
	height: 20px;
	margin-left: 5px;
	border-radius: 50%;
	}

	.lang-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 150px;
	background-color: var(--bg-color);
	border-radius: 5px;
	box-shadow: var(--card-shadow);
	overflow: hidden;
	display: none;
	z-index: 10;
	}

	.lang-option {
	display: flex;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	transition: var(--transition);
	}

	.lang-option:hover {
	background-color: var(--card-bg);
	}

	.lang-option img {
	width: 20px;
	height: 20px;
	margin-left: 10px;
	border-radius: 50%;
	}

	.nav-menu {
	display: flex;
	align-items: center;
	}

	.nav-list {
	display: flex;
	list-style: none;
	}

	.nav-item {
	margin: 0 15px;
	position: relative;
	}

	.nav-link {
	color: var(--dark-color);
	font-weight: 600;
	position: relative;
	padding: 5px 0;
	display: flex;
	align-items: center;
	}

	[data-theme="dark"] .nav-link, [data-theme="cosmos"] .nav-link {
	color: white;
	}

	.nav-link img {
	width: 20px;
	height: 20px;
	margin-left: 5px;
	border-radius: 50%;
	}

	.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary-gradient);
	transition: var(--transition);
	}

	.nav-link:hover::after,
	.nav-link.active::after {
	width: 100%;
	}

	.nav-link:hover {
	color: var(--primary-color);
	}

	[data-theme="dark"] .nav-link:hover, [data-theme="cosmos"] .nav-link:hover {
	color: var(--primary-color);
	}

	/* Theme Toggles */
	.theme-toggles {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1.2rem;
	color: var(--dark-color);
	transition: var(--transition);
	}

	[data-theme="dark"] .theme-toggle, [data-theme="cosmos"] .theme-toggle {
	color: white;
	}

	.theme-toggle:hover, .theme-toggle.active {
	background-color: var(--primary-color);
	color: white;
	transform: translateY(-3px);
	box-shadow: var(--button-shadow);
	}

	.cosmos-toggle {
	background: linear-gradient(45deg, #7b2cbf, #f72585);
	color: white;
	border: none;
	padding: 8px 12px;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.cosmos-toggle:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 10px 20px rgba(123, 44, 191, 0.4);
	}

	.cosmos-toggle.active {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 10px 20px rgba(123, 44, 191, 0.4);
	}

	/* Mobile Menu Button */
	.mobile-menu-btn {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	color: var(--dark-color);
	cursor: pointer;
	}

	[data-theme="dark"] .mobile-menu-btn, [data-theme="cosmos"] .mobile-menu-btn {
	color: white;
	}

	/* Mobile Menu */
	.mobile-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 80%;
	height: 100%;
	background-color: var(--bg-color);
	transition: var(--transition);
	z-index: 1000;
	box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
	overflow-y: auto;
	padding: 20px;
	}

	.mobile-menu.active {
	right: 0;
	}

	.mobile-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	[data-theme="dark"] .mobile-menu-header, [data-theme="cosmos"] .mobile-menu-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.mobile-menu-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	color: var(--dark-color);
	cursor: pointer;
	}

	[data-theme="dark"] .mobile-menu-close, [data-theme="cosmos"] .mobile-menu-close {
	color: white;
	}

	.mobile-menu-list {
	list-style: none;
	margin-bottom: 30px;
	}

	.mobile-menu-item {
	margin-bottom: 15px;
	}

	.mobile-menu-link {
	display: block;
	color: var(--dark-color);
	font-weight: 600;
	padding: 10px 0;
	transition: var(--transition);
	}

	[data-theme="dark"] .mobile-menu-link, [data-theme="cosmos"] .mobile-menu-link {
	color: white;
	}

	.mobile-menu-link:hover {
	color: var(--primary-color);
	transform: translateX(10px);
	}

	/* Mobile Languages */
	.mobile-languages {
	margin-bottom: 30px;
	}

	.mobile-languages-title {
	font-size: 1.1rem;
	margin-bottom: 15px;
	color: var(--dark-color);
	}

	[data-theme="dark"] .mobile-languages-title, [data-theme="cosmos"] .mobile-languages-title {
	color: white;
	}

	.mobile-language-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	}

	.mobile-language-option {
	display: flex;
	align-items: center;
	padding: 8px 15px;
	border-radius: 20px;
	background-color: var(--card-bg);
	color: var(--dark-color);
	cursor: pointer;
	transition: var(--transition);
	}

	[data-theme="dark"] .mobile-language-option, [data-theme="cosmos"] .mobile-language-option {
	color: white;
	}

	.mobile-language-option:hover {
	background-color: var(--primary-color);
	color: white;
	}

	.mobile-language-option.active {
	background-color: var(--primary-color);
	color: white;
	}

	.mobile-language-option img {
	width: 20px;
	height: 20px;
	margin-left: 8px;
	border-radius: 50%;
	}

	/* Mobile Themes */
	.mobile-themes {
	margin-top: 30px;
	}

	.mobile-themes-title {
	font-size: 1.1rem;
	margin-bottom: 15px;
	color: var(--dark-color);
	}

	[data-theme="dark"] .mobile-themes-title, [data-theme="cosmos"] .mobile-themes-title {
	color: white;
	}

	.mobile-theme-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	}

	.mobile-theme-option {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--card-bg);
	color: var(--dark-color);
	cursor: pointer;
	transition: var(--transition);
	}

	[data-theme="dark"] .mobile-theme-option, [data-theme="cosmos"] .mobile-theme-option {
	color: white;
	}

	.mobile-theme-option:hover {
	transform: translateY(-3px);
	box-shadow: var(--button-shadow);
	}

	.mobile-theme-option.active {
	background-color: var(--primary-color);
	color: white;
	}

	.mobile-cosmos-option {
	background: linear-gradient(45deg, #7b2cbf, #f72585);
	color: white;
	}

	/* Overlay */
	.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	}

	.overlay.active {
	opacity: 1;
	visibility: visible;
	}

	/* Hero Section */
	.hero {
	padding: 100px 0 80px;
	position: relative;
	overflow: hidden;
	}

	.hero-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
	}

	.hero-text {
	flex: 1;
	}

	.hero-title {
	font-size: 3rem;
	margin-bottom: 20px;
	color: var(--dark-color);
	background: var(--primary-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}

	[data-theme="cosmos"] .hero-title {
	background: linear-gradient(45deg, #f72585, #4cc9f0);
	-webkit-background-clip: text;
	background-clip: text;
	}

	.hero-subtitle {
	display: inline-block;
	background: var(--primary-gradient);
	color: white;
	padding: 8px 20px;
	border-radius: 30px;
	font-weight: 600;
	margin-bottom: 20px;
	box-shadow: var(--button-shadow);
	}

	[data-theme="cosmos"] .hero-subtitle {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	}

	.hero-description {
	color: var(--text-color);
	margin-bottom: 30px;
	font-size: 1.1rem;
	}

	.hero-buttons {
	display: flex;
	gap: 15px;
	}

	.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	transition: var(--transition);
	border: none;
	cursor: pointer;
	text-align: center;
	}

	.btn-primary {
	background: var(--primary-gradient);
	color: white;
	box-shadow: var(--button-shadow);
	}

	[data-theme="cosmos"] .btn-primary {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	}

	.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(79, 172, 254, 0.4);
	}

	[data-theme="cosmos"] .btn-primary:hover {
	box-shadow: 0 15px 30px rgba(123, 44, 191, 0.4);
	}

	.btn-outline {
	background: transparent;
	border: 2px solid var(--primary-color);
	color: var(--dark-color);
	}

	[data-theme="dark"] .btn-outline, [data-theme="cosmos"] .btn-outline {
	color: white;
	}

	[data-theme="cosmos"] .btn-outline {
	border-color: #7b2cbf;
	}

	.btn-outline:hover {
	background: var(--primary-gradient);
	color: white;
	transform: translateY(-3px);
	box-shadow: var(--button-shadow);
	border-color: transparent;
	}

	[data-theme="cosmos"] .btn-outline:hover {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	box-shadow: 0 15px 30px rgba(123, 44, 191, 0.4);
	}

	.hero-image {
	flex: 1;
	max-width: 500px;
	position: relative;
	}

	.hero-img {
	width: 100%;
	border-radius: 10px;
	box-shadow: var(--box-shadow);
	animation: float 6s ease-in-out infinite;
	}

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

	/* Typing Effect Container */
	.typing-effect-container {
	min-height: 60px;
	margin-bottom: 20px;
	}

	/* About Us Section */
	.about-us {
	background-color: var(--light-color);
	position: relative;
	overflow: hidden;
	}

	[data-theme="dark"] .about-us {
	background-color: var(--bg-color);
	}

	[data-theme="cosmos"] .about-us {
	background: linear-gradient(to bottom, #240046, #3c096c);
	}

	.about-content {
	display: flex;
	align-items: center;
	gap: 50px;
	}

	.about-image {
	flex: 1;
	max-width: 500px;
	position: relative;
	}

	.about-img {
	width: 100%;
	border-radius: 10px;
	box-shadow: var(--box-shadow);
	}

	.about-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
	border-radius: 10px;
	display: flex;
	align-items: flex-end;
	padding: 20px;
	opacity: 0;
	transition: var(--transition);
	}

	.about-image:hover .about-image-overlay {
	opacity: 1;
	}

	.about-image-text {
	color: white;
	font-size: 1.5rem;
	font-weight: 700;
	}

	.about-text {
	flex: 1;
	}

	.about-title {
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: var(--dark-color);
	}

	.about-subtitle {
	display: inline-block;
	background: var(--primary-gradient);
	color: white;
	padding: 5px 15px;
	border-radius: 30px;
	font-weight: 600;
	margin-bottom: 20px;
	font-size: 0.9rem;
	}

	[data-theme="cosmos"] .about-subtitle {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	}

	.about-description {
	margin-bottom: 20px;
	}

	.about-features {
	margin-bottom: 30px;
	}

	.about-feature {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	}

	.about-feature-icon {
	width: 40px;
	height: 40px;
	background: var(--primary-gradient);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	margin-left: 15px;
	flex-shrink: 0;
	}

	[data-theme="cosmos"] .about-feature-icon {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	}

	.about-feature-text h4 {
	font-size: 1.1rem;
	margin-bottom: 5px;
	}

	.about-feature-text p {
	font-size: 0.9rem;
	margin-bottom: 0;
	}

	.about-counters {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 30px;
	}

	.about-counter {
	flex: 1;
	min-width: 150px;
	text-align: center;
	padding: 20px;
	background-color: var(--bg-color);
	border-radius: 10px;
	box-shadow: var(--card-shadow);
	transition: var(--transition);
	position: relative;
	overflow: hidden;
	}

	.about-counter:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	}

	[data-theme="cosmos"] .about-counter:hover {
	box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
	}

	.about-counter::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: var(--primary-gradient);
	}

	[data-theme="cosmos"] .about-counter::before {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	}

	.about-counter-number {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--primary-color);
	}

	[data-theme="cosmos"] .about-counter-number {
	color: #7b2cbf;
	}

	.about-counter-text {
	font-size: 1rem;
	font-weight: 600;
	}

	/* Services Section */
	.services {
	background-color: var(--bg-color);
	position: relative;
	}

	.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	}

	.service-card {
	background-color: var(--card-bg);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: var(--transition);
	padding: 30px;
	text-align: center;
	position: relative;
	z-index: 1;
	}

	.service-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	}

	[data-theme="cosmos"] .service-card:hover {
	box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
	}

	.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-gradient);
	opacity: 0;
	transition: var(--transition);
	z-index: -1;
	}

	[data-theme="cosmos"] .service-card::before {
	background: linear-gradient(45deg, rgba(123, 44, 191, 0.8), rgba(58, 12, 163, 0.8));
	}

	.service-card:hover::before {
	opacity: 1;
	}

	.service-icon {
	width: 80px;
	height: 80px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 2rem;
	color: var(--primary-color);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	transition: var(--transition);
	position: relative;
	z-index: 1;
	}

	[data-theme="cosmos"] .service-icon {
	color: #7b2cbf;
	}

	.service-card:hover .service-icon {
	background-color: rgba(255, 255, 255, 0.2);
	color: white;
	transform: rotateY(360deg);
	box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
	}

	.service-title {
	font-size: 1.5rem;
	margin-bottom: 15px;
	transition: var(--transition);
	}

	.service-card:hover .service-title {
	color: white;
	}

	.service-text {
	margin-bottom: 25px;
	transition: var(--transition);
	}

	.service-card:hover .service-text {
	color: rgba(255, 255, 255, 0.9);
	}

	/* API Services Section */
	.api-services {
	background-color: var(--light-color);
	position: relative;
	}

	[data-theme="dark"] .api-services {
	background-color: var(--bg-color);
	}

	[data-theme="cosmos"] .api-services {
	background: linear-gradient(to bottom, #240046, #3c096c);
	}

	.api-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	}

	.api-card {
	background-color: var(--bg-color);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: var(--transition);
	padding: 30px;
	}

	.api-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	}

	[data-theme="cosmos"] .api-card:hover {
	box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
	}

	.api-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	}

	.api-icon {
	width: 60px;
	height: 60px;
	background: var(--primary-gradient);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 15px;
	font-size: 1.5rem;
	color: white;
	box-shadow: var(--button-shadow);
	transition: var(--transition);
	}

	[data-theme="cosmos"] .api-icon {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	box-shadow: 0 5px 15px rgba(123, 44, 191, 0.3);
	}

	.api-card:hover .api-icon {
	transform: rotateY(360deg);
	}

	.api-title {
	font-size: 1.3rem;
	margin-bottom: 0;
	}

	.api-description {
	margin-bottom: 20px;
	}

	.api-features {
	margin-bottom: 25px;
	}

	.api-feature {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	}

	.api-feature i {
	color: var(--success-color);
	margin-left: 10px;
	}

	/* SPEEDY Section - Now with white background */
	.speedy {
	background-color: white;
	position: relative;
	overflow: hidden;
	}

	[data-theme="dark"] .speedy {
	background-color: var(--bg-color);
	}

	[data-theme="cosmos"] .speedy {
	background: linear-gradient(to bottom, #3c096c, #5a189a);
	}

	.speedy-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('https://placehold.co/1920x1080/240046/fff?text=SPEEDY+Background') center/cover no-repeat;
	opacity: 0.1;
	z-index: 0;
	pointer-events: none;
	}

	[data-theme="cosmos"] .speedy-overlay {
	opacity: 0.2;
	}

	.speedy-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 50px;
	}

	.speedy-text {
	flex: 1;
	}

	.speedy-title {
	font-size: 2.5rem;
	margin-bottom: 20px;
	background: linear-gradient(45deg, #7b2cbf, #f72585);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-transform: uppercase;
	letter-spacing: 2px;
	}

	.speedy-subtitle {
	display: inline-block;
	background: linear-gradient(45deg, #7b2cbf, #f72585);
	color: white;
	padding: 8px 20px;
	border-radius: 30px;
	font-weight: 600;
	margin-bottom: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	.speedy-description {
	margin-bottom: 30px;
	}

	.speedy-features {
	margin-bottom: 30px;
	}

	.speedy-feature {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	transition: var(--transition);
	}

	.speedy-feature:hover {
	transform: translateX(10px);
	}

	.speedy-feature i {
	width: 40px;
	height: 40px;
	background: linear-gradient(45deg, #7b2cbf, #f72585);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	margin-left: 15px;
	font-size: 1.2rem;
	flex-shrink: 0;
	}

	.speedy-feature-text {
	flex: 1;
	}

	.speedy-feature-text h4 {
	font-size: 1.1rem;
	margin-bottom: 5px;
	}

	.speedy-feature-text p {
	font-size: 0.9rem;
	margin-bottom: 0;
	}

	.speedy-image {
	flex: 1;
	max-width: 500px;
	position: relative;
	perspective: 1000px;
	}

	.speedy-img {
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
	transform-style: preserve-3d;
	animation: speedy-rotate 8s infinite ease-in-out;
	}

	@keyframes speedy-rotate {
	0%, 100% {
	transform: rotateY(0) translateZ(0);
	}
	25% {
	transform: rotateY(5deg) translateZ(20px);
	}
	50% {
	transform: rotateY(0) translateZ(0);
	}
	75% {
	transform: rotateY(-5deg) translateZ(20px);
	}
	}

	/* Previous Works Section - Replacing SPEEDY Universe */
	.previous-works {
	margin-top: 80px;
	text-align: center;
	}

	.works-title {
	font-size: 2.5rem;
	margin-bottom: 20px;
	background: var(--royal-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-transform: uppercase;
	letter-spacing: 3px;
	}

	.works-description {
	max-width: 800px;
	margin: 0 auto 40px;
	}

	.works-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
	}

	.work-card {
	background-color: var(--card-bg);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: var(--transition);
	position: relative;
	z-index: 1;
	border: 3px solid transparent;
	background-clip: padding-box;
	}

	.work-card::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	background: var(--royal-gold);
	border-radius: 18px;
	z-index: -1;
	opacity: 0;
	transition: var(--transition);
	}

	.work-card:hover::before {
	opacity: 1;
	}

	.work-card:hover {
	transform: translateY(-10px) scale(1.03);
	box-shadow: 0 20px 40px rgba(255, 215, 0, 0.3);
	}

	.work-image {
	height: 200px;
	overflow: hidden;
	position: relative;
	}

	.work-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
	border: 2px solid var(--gold-color);
	border-radius: 10px 10px 0 0;
	}

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

	.work-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	background: var(--royal-gold);
	color: white;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	}

	.work-content {
	padding: 25px;
	}

	.work-card-title {
	font-size: 1.4rem;
	margin-bottom: 15px;
	transition: var(--transition);
	color: var(--dark-color);
	}

	[data-theme="dark"] .work-card-title, [data-theme="cosmos"] .work-card-title {
	color: white;
	}

	.work-card-text {
	margin-bottom: 20px;
	transition: var(--transition);
	line-height: 1.6;
	}

	.work-tech-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	}

	.tech-tag {
	background: var(--primary-gradient);
	color: white;
	padding: 3px 8px;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 500;
	}

	.work-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--gold-color);
	transition: var(--transition);
	text-decoration: none;
	}

	.work-card-btn:hover {
	color: #ffed4e;
	transform: translateX(-5px);
	}

	/* FastPro Media Section */
	.fastpro-media {
	background-color: var(--light-color);
	position: relative;
	}

	[data-theme="dark"] .fastpro-media {
	background-color: var(--bg-color);
	}

	[data-theme="cosmos"] .fastpro-media {
	background: linear-gradient(to bottom, #5a189a, #7b2cbf);
	}

	.media-categories {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 50px;
	}

	.media-category-btn {
	background-color: var(--card-bg);
	color: var(--dark-color);
	border: none;
	padding: 12px 25px;
	border-radius: 30px;
	cursor: pointer;
	transition: var(--transition);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	}

	[data-theme="dark"] .media-category-btn, [data-theme="cosmos"] .media-category-btn {
	color: white;
	}

	.media-category-btn:hover, .media-category-btn.active {
	background: var(--royal-gold);
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
	}

	.media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 30px;
	}

	.media-card {
	background-color: var(--bg-color);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: var(--transition);
	border: 3px solid transparent;
	position: relative;
	}

	.media-card::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	background: var(--royal-gold);
	border-radius: 18px;
	z-index: -1;
	opacity: 0;
	transition: var(--transition);
	}

	.media-card:hover::before {
	opacity: 1;
	}

	.media-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(255, 215, 0, 0.2);
	}

	.media-thumbnail {
	position: relative;
	height: 200px;
	overflow: hidden;
	}

	.media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
	border: 2px solid var(--gold-color);
	}

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

	.media-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background: var(--royal-gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5rem;
	opacity: 0.9;
	transition: var(--transition);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	}

	.media-card:hover .media-play-button {
	transform: translate(-50%, -50%) scale(1.1);
	opacity: 1;
	}

	.media-type-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	background: var(--royal-gold);
	color: white;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	}

	.media-content {
	padding: 25px;
	}

	.media-title {
	font-size: 1.3rem;
	margin-bottom: 15px;
	color: var(--dark-color);
	}

	[data-theme="dark"] .media-title, [data-theme="cosmos"] .media-title {
	color: white;
	}

	.media-description {
	margin-bottom: 20px;
	line-height: 1.6;
	}

	.media-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
	color: var(--text-color);
	}

	.media-date, .media-platform {
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.media-platform i {
	color: var(--gold-color);
	}

	/* Projects Section */
	.projects {
	background-color: var(--bg-color);
	}

	.project-categories {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
	}

	.project-category-btn {
	background-color: var(--card-bg);
	color: var(--dark-color);
	border: none;
	padding: 10px 20px;
	border-radius: 30px;
	cursor: pointer;
	transition: var(--transition);
	font-weight: 600;
	}

	[data-theme="dark"] .project-category-btn, [data-theme="cosmos"] .project-category-btn {
	color: white;
	}

	.project-category-btn:hover, .project-category-btn.active {
	background: var(--primary-gradient);
	color: white;
	transform: translateY(-3px);
	box-shadow: var(--button-shadow);
	}

	[data-theme="cosmos"] .project-category-btn:hover, [data-theme="cosmos"] .project-category-btn.active {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	box-shadow: 0 5px 15px rgba(123, 44, 191, 0.3);
	}

	.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	}

	.project-card {
	background-color: var(--card-bg);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: var(--transition);
	}

	.project-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	}

	[data-theme="cosmos"] .project-card:hover {
	box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3);
	}

	.project-image {
	position: relative;
	height: 200px;
	overflow: hidden;
	}

	.project-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
	}

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

	.project-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
	opacity: 0;
	transition: var(--transition);
	display: flex;
	align-items: flex-end;
	padding: 20px;
	}

	.project-card:hover .project-overlay {
	opacity: 1;
	}

	.project-tag {
	position: absolute;
	top: 20px;
	right: 20px;
	background: var(--primary-gradient);
	color: white;
	padding: 5px 15px;
	border-radius: 30px;
	font-size: 0.8rem;
	font-weight: 600;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}

	[data-theme="cosmos"] .project-tag {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	}

	.project-content {
	padding: 20px;
	}

	.project-title {
	font-size: 1.3rem;
	margin-bottom: 10px;
	}

	.project-description {
	margin-bottom: 20px;
	}

	.project-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	color: var(--text-color);
	}

	.project-client, .project-date {
	display: flex;
	align-items: center;
	}

	.project-client i, .project-date i {
	margin-left: 5px;
	color: var(--primary-color);
	}

	[data-theme="cosmos"] .project-client i, [data-theme="cosmos"] .project-date i {
	color: #f72585;
	}

	/* WhatsApp Float Button */
	.whatsapp-float {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 998;
	}

	.whatsapp-btn {
	width: 60px;
	height: 60px;
	background: linear-gradient(45deg, #25d366, #128c7e);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.8rem;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
	transition: var(--transition);
	animation: whatsapp-pulse 2s infinite;
	}

	.whatsapp-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
	}

	@keyframes whatsapp-pulse {
	0%, 100% {
	box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
	}
	50% {
	box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.2);
	}
	}

	/* Footer */
	.footer {
	background-color: var(--footer-bg);
	padding-top: 80px;
	color: white;
	}

	.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 40px;
	margin-bottom: 50px;
	}

	.footer-widget h3 {
	font-size: 1.3rem;
	color: white;
	margin-bottom: 25px;
	position: relative;
	padding-bottom: 15px;
	}

	.footer-widget h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50px;
	height: 3px;
	background: var(--primary-gradient);
	border-radius: 3px;
	}

	[data-theme="cosmos"] .footer-widget h3::after {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	}

	.footer-about p {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 20px;
	}

	.footer-social {
	display: flex;
	gap: 10px;
	}

	.social-link {
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	transition: var(--transition);
	text-decoration: none;
	}

	.social-link:hover {
	background: var(--primary-gradient);
	transform: translateY(-5px);
	}

	[data-theme="cosmos"] .social-link:hover {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	}

	.footer-links ul {
	list-style: none;
	}

	.footer-links li {
	margin-bottom: 10px;
	}

	.footer-links a {
	color: rgba(255, 255, 255, 0.7);
	transition: var(--transition);
	display: inline-block;
	}

	.footer-links a:hover {
	color: white;
	transform: translateX(10px);
	}

	.footer-contact p {
	display: flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 15px;
	}

	.footer-contact i {
	margin-left: 10px;
	width: 30px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	}

	[data-theme="cosmos"] .footer-contact i {
	color: #f72585;
	}

	.footer-subscribe {
	position: relative;
	margin-top: 20px;
	}

	.footer-subscribe input {
	width: 100%;
	padding: 12px 15px;
	padding-left: 50px;
	background-color: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 30px;
	color: white;
	outline: none;
	}

	.footer-subscribe button {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 40px;
	height: 40px;
	background: var(--primary-gradient);
	border: none;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	transition: var(--transition);
	}

	[data-theme="cosmos"] .footer-subscribe button {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	}

	.footer-subscribe button:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	}

	.footer-bottom {
	padding: 20px 0;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.footer-bottom p {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 0;
	}

	.footer-bottom a {
	color: var(--primary-color);
	}

	[data-theme="cosmos"] .footer-bottom a {
	color: #f72585;
	}

	/* Back to Top Button */
	.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: var(--primary-gradient);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.2rem;
	cursor: pointer;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	transition: var(--transition);
	opacity: 0;
	visibility: hidden;
	z-index: 99;
	}

	[data-theme="cosmos"] .back-to-top {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	}

	.back-to-top.active {
	opacity: 1;
	visibility: visible;
	}

	.back-to-top:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	}

	/* Chat Bot Section */
	.chatbot {
	position: fixed;
	bottom: 100px;
	left: 20px;
	z-index: 999;
	}

	.chatbot-toggle {
	width: 60px;
	height: 60px;
	background: var(--primary-gradient);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	transition: var(--transition);
	}

	[data-theme="cosmos"] .chatbot-toggle {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	}

	.chatbot-toggle:hover {
	transform: scale(1.1);
	}

	.chatbot-window {
	position: absolute;
	bottom: 80px;
	left: 0;
	width: 350px;
	background-color: var(--bg-color);
	border-radius: 15px;
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	display: none;
	flex-direction: column;
	height: 450px;
	}

	.chatbot-header {
	padding: 15px 20px;
	background: var(--primary-gradient);
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

	[data-theme="cosmos"] .chatbot-header {
	background: linear-gradient(45deg, #7b2cbf, #3a0ca3);
	}

	.chatbot-title {
	font-size: 1.1rem;
	margin-bottom: 0;
	color: white;
	}

	.chatbot-close {
	background: none;
	border: none;
	color: white;
	font-size: 1.2rem;
	cursor: pointer;
	}

	.chatbot-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	}

	.chat-message {
	margin-bottom: 15px;
	max-width: 80%;
	}

	.bot-message {
	background-color: var(--card-bg);
	padding: 10px 15px;
	border-radius: 15px 15px 15px 0;
	margin-right: auto;
	}

	.user-message {
	background: var(--primary-gradient);
	color: white;
	padding: 10px 15px;
	border-radius: 15px 15px 0 15px;
	margin-left: auto;
	}

	[data-theme="cosmos"] .user-message {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	}

	.chatbot-input {
	display: flex;
	padding: 15px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	[data-theme="dark"] .chatbot-input, [data-theme="cosmos"] .chatbot-input {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.chatbot-input input {
	flex: 1;
	padding: 10px 15px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 30px;
	outline: none;
	background-color: var(--bg-color);
	color: var(--text-color);
	}

	[data-theme="dark"] .chatbot-input input, [data-theme="cosmos"] .chatbot-input input {
	border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.chatbot-send {
	width: 40px;
	height: 40px;
	background: var(--primary-gradient);
	border: none;
	border-radius: 50%;
	margin-right: 10px;
	color: white;
	cursor: pointer;
	transition: var(--transition);
	}

	[data-theme="cosmos"] .chatbot-send {
	background: linear-gradient(45deg, #f72585, #7b2cbf);
	}

	.chatbot-send:hover {
	transform: translateY(-3px);
	box-shadow: var(--button-shadow);
	}

	/* Animation Classes */
	.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.fade-in.active {
	opacity: 1;
	transform: translateY(0);
	}

	/* Responsive Styles */
	@media (max-width: 992px) {
	.hero-content, .about-content, .speedy-content {
	flex-direction: column;
	}

	.hero-text, .hero-image, .about-text, .about-image, .speedy-text, .speedy-image {
	max-width: 100%;
	text-align: center;
	}

	.hero-image, .about-image, .speedy-image {
	margin-top: 40px;
	}

	.hero-buttons, .about-features, .speedy-features {
	justify-content: center;
	}

	.about-feature, .speedy-feature {
	text-align: right;
	}

	.nav-list {
	display: none;
	}

	.mobile-menu-btn {
	display: block;
	}

	.services-grid, .api-grid, .project-grid, .works-grid, .media-grid {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}

	.footer-grid {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
	}

	@media (max-width: 768px) {
	.hero-title, .about-title, .speedy-title, .works-title {
	font-size: 2.5rem;
	}

	.hero-buttons {
	flex-direction: column;
	width: 100%;
	}

	.hero-buttons .btn {
	width: 100%;
	margin-bottom: 10px;
	}

	.services-grid, .api-grid, .project-grid, .works-grid, .media-grid {
	grid-template-columns: 1fr;
	}

	.project-categories, .media-categories {
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: 15px;
	justify-content: flex-start;
	}

	.chatbot-window {
	width: 320px;
	}

	.whatsapp-float {
	bottom: 100px;
	}
	}

	@media (max-width: 576px) {
	.hero-title, .about-title, .speedy-title, .works-title {
	font-size: 2rem;
	}

	.section-title h2 {
	font-size: 2rem;
	}

	.theme-toggles {
	display: none;
	}

	.chatbot-window {
	width: 280px;
	}

	.whatsapp-btn {
	width: 50px;
	height: 50px;
	font-size: 1.5rem;
	}
	}
	</style>
	</head>
	<body>
	<!-- Particles.js Container -->
	<div id="particles-js"></div>

	<!-- Stars Container (for Cosmos Theme) -->
	<div class="stars-container" id="stars-container"></div>

	<!-- Header -->
	<header class="header">
	<div class="container">
	<div class="navbar">
	<div class="logo">
	<img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-1-1.png" alt="FastPro Logo" class="logo-image">
	<h1 class="logo-text">
	<span class="logo-animated" id="logo-text">فاست برو</span>
	</h1>
	</div>

	<nav>
	<ul class="nav-list">
	<li class="nav-item">
	<a href="https://ufastpro.com/" class="nav-link active">الرئيسية</a>
	</li>
	<li class="nav-item">
	<a href="#about-us" class="nav-link">نحن</a>
	</li>
	<li class="nav-item">
	<a href="#services" class="nav-link">خدماتنا</a>
	</li>
	<li class="nav-item">
	<a href="#speedy" class="nav-link">أبحاثنا</a>
	</li>
	<li class="nav-item">
	<a href="#projects" class="nav-link">مشاريعنا</a>
	</li>
	<li class="nav-item">
	<a href="#all-programs" class="nav-link">كل برامجنا</a>
	</li>
	<li class="nav-item">
	<a href="#fastpro-media" class="nav-link">ميديا فاست برو</a>
	</li>
	<li class="nav-item">
	<a href="#contact" class="nav-link">تواصل معنا</a>
	</li>
	</ul>
	</nav>

	<!-- Language Selector -->
	<div class="language-selector" id="language-selector">
	<div class="current-lang" id="current-lang">
	<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="العربية">
	<span>العربية</span>
	<i class="fas fa-chevron-down"></i>
	</div>
	<div class="lang-dropdown" id="lang-dropdown">
	<div class="lang-option" data-lang="ar">
	<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="العربية">
	<span>العربية</span>
	</div>
	<div class="lang-option" data-lang="en">
	<img src="https://placehold.co/100x100/0000ee/fff?text=EN" alt="English">
	<span>English</span>
	</div>
	</div>
	</div>

	<div class="theme-toggles">
	<button class="theme-toggle light-toggle active" id="light-toggle" title="الوضع الفاتح">
	<i class="fas fa-sun"></i>
	</button>
	<button class="theme-toggle dark-toggle" id="dark-toggle" title="الوضع الداكن">
	<i class="fas fa-moon"></i>
	</button>
	<button class="cosmos-toggle" id="cosmos-toggle">
	<i class="fas fa-rocket"></i> OUR UNIVERSE
	</button>
	</div>

	<button class="mobile-menu-btn" id="mobile-menu-btn">
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</header>

	<!-- WhatsApp Float Button -->
	<div class="whatsapp-float">
	<a href="https://wa.me/201070159698" target="_blank" class="whatsapp-btn" title="تواصل معنا على الواتساب">
	<i class="fab fa-whatsapp"></i>
	</a>
	</div>

	<!-- Mobile Menu -->
	<div class="mobile-menu" id="mobile-menu">
	<div class="mobile-menu-header">
	<div class="logo">
	<img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-1-1.png" alt="FastPro Logo" class="logo-image">
	<h1 class="logo-text">فاست برو</h1>
	</div>
	<button class="mobile-menu-close" id="mobile-menu-close">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<ul class="mobile-menu-list">
	<li class="mobile-menu-item">
	<a href="#" class="mobile-menu-link">الرئيسية</a>
	</li>
	<li class="mobile-menu-item">
	<a href="#about-us" class="mobile-menu-link">من نحن</a>
	</li>
	<li class="mobile-menu-item">
	<a href="#services" class="mobile-menu-link">خدماتنا</a>
	</li>
	<li class="mobile-menu-item">
	<a href="#api-services" class="mobile-menu-link">خدمات API</a>
	</li>
	<li class="mobile-menu-item">
	<a href="#speedy" class="mobile-menu-link">SPEEDY</a>
	</li>
	<li class="mobile-menu-item">
	<a href="#projects" class="mobile-menu-link">مشاريعنا</a>
	</li>
	<li class="mobile-menu-item">
	<a href="#all-programs" class="mobile-menu-link">كل برامجنا</a>
	</li>
	<li class="mobile-menu-item">
	<a href="#fastpro-media" class="mobile-menu-link">ميديا فاست برو</a>
	</li>
	<li class="mobile-menu-item">
	<a href="#contact" class="mobile-menu-link">تواصل معنا</a>
	</li>
	</ul>

	<!-- Mobile Languages -->
	<div class="mobile-languages">
	<h3 class="mobile-languages-title">اختر اللغة</h3>
	<div class="mobile-language-options">
	<div class="mobile-language-option active" data-lang="ar">
	<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="العربية">
	<span>العربية</span>
	</div>
	<div class="mobile-language-option" data-lang="en">
	<img src="https://placehold.co/100x100/0000ee/fff?text=EN" alt="English">
	<span>English</span>
	</div>
	</div>
	</div>

	<div class="mobile-themes">
	<h3 class="mobile-themes-title">اختر المظهر</h3>
	<div class="mobile-theme-options">
	<button class="mobile-theme-option light-option active" id="mobile-light-toggle" title="الوضع الفاتح">
	<i class="fas fa-sun"></i>
	</button>
	<button class="mobile-theme-option dark-option" id="mobile-dark-toggle" title="الوضع الداكن">
	<i class="fas fa-moon"></i>
	</button>
	<button class="mobile-theme-option mobile-cosmos-option" id="mobile-cosmos-toggle" title="SPEEDY UNIVERSE">
	<i class="fas fa-rocket"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Overlay for Mobile Menu -->
	<div class="overlay" id="overlay"></div>

	<!-- Hero Section -->
	<section class="hero">
	<div class="container">
	<div class="hero-content">
	<div class="hero-text" data-aos="fade-left">
	<span class="hero-subtitle">حلول الذكاء الاصطناعي المتطورة</span>
	<h1 class="hero-title">
	<div class="typing-effect-container" id="hero-typing"></div>
	</h1>
	<p class="hero-description">
	نقدم حلول برمجية متكاملة ومبتكرة باستخدام أحدث تقنيات الذكاء الاصطناعي لمساعدتك على تحقيق أهدافك وتلبية احتياجاتك الرقمية بطريقة ذكية وفعالة.
	</p>
	<div class="hero-buttons">
	<a href="#services" class="btn btn-primary">
	<i class="fas fa-brain"></i> استكشف خدماتنا
	</a>
	<a href="#contact" class="btn btn-outline">
	<i class="fas fa-envelope"></i> تواصل معنا
	</a>
	</div>
	</div>
	<div class="hero-image" data-aos="fade-right">
	<img src="https://ufastpro.com/wp-content/uploads/2025/04/ChatGPT-Image-Apr-13-2025-02_35_20-AM.png" alt="حلول الذكاء الاصطناعي" class="hero-img">
	</div>
	</div>
	</div>
	</section>

	<!-- About Us Section -->
	<section class="about-us section" id="about-us">
	<div class="container">
	<div class="section-title">
	<h2>من نحن</h2>
	<p>تعرف على فريقنا المتميز وقصة نجاحنا في عالم الذكاء الاصطناعي</p>
	</div>

	<div class="about-content">
	<div class="about-text" data-aos="fade-right">
	<span class="about-subtitle">قصة نجاح متواصلة</span>
	<h2 class="about-title">فاست برو - رواد تقنيات الذكاء الاصطناعي الحديثة</h2>
	<p class="about-description">
	تأسست شركة فاست برو في عام 2022 على يد مجموعة من الخبراء المتخصصين في مجال الذكاء الاصطناعي والبرمجة المتقدمة، بهدف تقديم حلول تقنية مبتكرة تساعد الشركات والمؤسسات على مواكبة التطور التكنولوجي السريع في العصر الرقمي.
	</p>
	<p class="about-description">
	نحن نؤمن بأن الذكاء الاصطناعي هو مستقبل التكنولوجيا، ونعمل جاهدين على تطوير حلول ذكية مخصصة تلبي احتياجات عملائنا وتساعدهم على تحقيق أقصى استفادة من التقنيات الحديثة.
	</p>

	<div class="about-features">
	<div class="about-feature" data-aos="fade-up" data-aos-delay="100">
	<div class="about-feature-icon">
	<i class="fas fa-check"></i>
	</div>
	<div class="about-feature-text">
	<h4>خبرة متخصصة</h4>
	<p>فريق من الخبراء المتخصصين في مجالات الذكاء الاصطناعي وتطوير البرمجيات والتحول الرقمي.</p>
	</div>
	</div>
	<div class="about-feature" data-aos="fade-up" data-aos-delay="200">
	<div class="about-feature-icon">
	<i class="fas fa-check"></i>
	</div>
	<div class="about-feature-text">
	<h4>حلول مخصصة</h4>
	<p>نطور حلول تقنية مخصصة تناسب احتياجات كل عميل، مع التركيز على تحقيق أهدافه الاستراتيجية.</p>
	</div>
	</div>
	<div class="about-feature" data-aos="fade-up" data-aos-delay="300">
	<div class="about-feature-icon">
	<i class="fas fa-check"></i>
	</div>
	<div class="about-feature-text">
	<h4>تقنيات متطورة</h4>
	<p>نستخدم أحدث التقنيات والأدوات في مجال الذكاء الاصطناعي وتطوير البرمجيات لضمان تقديم أفضل الحلول.</p>
	</div>
	</div>
	</div>

	<a href="#contact" class="btn btn-primary">
	<i class="fas fa-users"></i> تعرف على فريقنا
	</a>
	</div>

	<div class="about-image" data-aos="fade-left">
	<img src="https://ufastpro.com/wp-content/uploads/2025/04/Blue-and-White-Illustrative-Brainstorm-Presentation.jpg" alt="من نحن" class="about-img">
	<div class="about-image-overlay">
	<div class="about-image-text">فاست برو - ابتكار بلا حدود</div>
	</div>
	</div>
	</div>

	<div class="about-counters">
	<div class="about-counter" data-aos="zoom-in" data-aos-delay="100">
	<div class="about-counter-number count-up" data-count="150">0</div>
	<div class="about-counter-text">عميل حول العالم</div>
	</div>
	<div class="about-counter" data-aos="zoom-in" data-aos-delay="200">
	<div class="about-counter-number count-up" data-count="300">0</div>
	<div class="about-counter-text">مشروع ناجح</div>
	</div>
	<div class="about-counter" data-aos="zoom-in" data-aos-delay="300">
	<div class="about-counter-number count-up" data-count="50">0</div>
	<div class="about-counter-text">خبير متخصص</div>
	</div>
	<div class="about-counter" data-aos="zoom-in" data-aos-delay="400">
	<div class="about-counter-number count-up" data-count="10">0</div>
	<div class="about-counter-text">جوائز تقنية</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Services Section -->
	<section class="services section" id="services">
	<div class="container">
	<div class="section-title">
	<h2>خدماتنا</h2>
	<p>مجموعة متكاملة من الخدمات المتطورة لتلبية احتياجات عملك</p>
	</div>

	<div class="services-grid">
	<div class="service-card" data-aos="fade-up" data-aos-delay="100">
	<div class="service-icon">
	<i class="fas fa-robot"></i>
	</div>
	<h3 class="service-title">الذكاء الاصطناعي</h3>
	<p class="service-text">
	تطوير حلول ذكاء اصطناعي مخصصة لتحسين عمليات الأعمال وزيادة الإنتاجية وتوفير تجارب مستخدم فريدة، مع التركيز على التعلم الآلي ومعالجة اللغات الطبيعية.
	</p>
	<a href="#" class="btn btn-primary">المزيد</a>
	</div>

	<div class="service-card" data-aos="fade-up" data-aos-delay="200">
	<div class="service-icon">
	<i class="fas fa-mobile-alt"></i>
	</div>
	<h3 class="service-title">تطبيقات الجوال</h3>
	<p class="service-text">
	تصميم وتطوير تطبيقات جوال عصرية وسهلة الاستخدام لمنصات iOS و Android مع دعم كامل للغة العربية والتكامل مع حلول الذكاء الاصطناعي المتقدمة.
	</p>
	<a href="#" class="btn btn-primary">المزيد</a>
	</div>

	<div class="service-card" data-aos="fade-up" data-aos-delay="300">
	<div class="service-icon">
	<i class="fas fa-globe"></i>
	</div>
	<h3 class="service-title">تطوير الويب</h3>
	<p class="service-text">
	إنشاء مواقع ويب متجاوبة وتطبيقات ويب متطورة مع واجهات مستخدم جذابة ووظائف متقدمة تعمل بسلاسة على جميع الأجهزة والمتصفحات.
	</p>
	<a href="#" class="btn btn-primary">المزيد</a>
	</div>

	<div class="service-card" data-aos="fade-up" data-aos-delay="400">
	<div class="service-icon">
	<i class="fas fa-chart-line"></i>
	</div>
	<h3 class="service-title">تحليل البيانات</h3>
	<p class="service-text">
	تحليل البيانات الضخمة واستخراج رؤى قيمة لدعم اتخاذ القرارات وتحسين استراتيجيات العمل من خلال تقنيات التعلم الآلي والتحليلات التنبؤية.
	</p>
	<a href="#" class="btn btn-primary">المزيد</a>
	</div>

	<div class="service-card" data-aos="fade-up" data-aos-delay="500">
	<div class="service-icon">
	<i class="fas fa-lock"></i>
	</div>
	<h3 class="service-title">أمن المعلومات</h3>
	<p class="service-text">
	حماية أنظمتك وبياناتك من التهديدات الإلكترونية مع حلول أمنية متكاملة تعتمد على الذكاء الاصطناعي للكشف المبكر عن محاولات الاختراق ومنعها.
	</p>
	<a href="#" class="btn btn-primary">المزيد</a>
	</div>

	<div class="service-card" data-aos="fade-up" data-aos-delay="600">
	<div class="service-icon">
	<i class="fas fa-cloud"></i>
	</div>
	<h3 class="service-title">الحوسبة السحابية</h3>
	<p class="service-text">
	توفير حلول سحابية مرنة وقابلة للتوسع لتخزين البيانات ومعالجتها بكفاءة وأمان، مع دعم كامل للتكامل مع خدمات الحوسبة السحابية الرائدة.
	</p>
	<a href="#" class="btn btn-primary">المزيد</a>
	</div>
	</div>
	</div>
	</section>

	<!-- API Services Section -->
	<section class="api-services section" id="api-services">
	<div class="container">
	<div class="section-title">
	<h2>خدمات API</h2>
	<p>واجهات برمجة قوية ومرنة لتكامل سهل مع أنظمتك</p>
	</div>

	<div class="api-grid">
	<div class="api-card" data-aos="fade-up" data-aos-delay="100">
	<div class="api-header">
	<div class="api-icon">
	<i class="fas fa-language"></i>
	</div>
	<h3 class="api-title">معالجة اللغة الطبيعية</h3>
	</div>
	<p class="api-description">
	واجهة برمجة متطورة لتحليل وفهم النصوص العربية والإنجليزية بدقة عالية، مدعومة بأحدث تقنيات الذكاء الاصطناعي.
	</p>
	<div class="api-features">
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>تحليل المشاعر والآراء بدقة تفوق 95%</span>
	</div>
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>استخراج الكيانات والمعلومات المهمة</span>
	</div>
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>دعم كامل للهجات العربية المختلفة</span>
	</div>
	</div>
	<a href="#" class="btn btn-primary">استكشاف API</a>
	</div>

	<div class="api-card" data-aos="fade-up" data-aos-delay="200">
	<div class="api-header">
	<div class="api-icon">
	<i class="fas fa-image"></i>
	</div>
	<h3 class="api-title">تحليل الصور والرؤية</h3>
	</div>
	<p class="api-description">
	تحليل الصور والفيديوهات باستخدام الذكاء الاصطناعي لاستخراج معلومات قيمة وتحسين تجربة المستخدم.
	</p>
	<div class="api-features">
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>التعرف على الوجوه والأشياء بدقة عالية</span>
	</div>
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>استخراج النصوص من الصور بلغات متعددة</span>
	</div>
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>تحسين جودة الصور تلقائيًا</span>
	</div>
	</div>
	<a href="#" class="btn btn-primary">استكشاف API</a>
	</div>

	<div class="api-card" data-aos="fade-up" data-aos-delay="300">
	<div class="api-header">
	<div class="api-icon">
	<i class="fas fa-microphone"></i>
	</div>
	<h3 class="api-title">التعرف على الكلام</h3>
	</div>
	<p class="api-description">
	تحويل الكلام إلى نص بدقة عالية مع دعم اللغة العربية واللهجات المختلفة، وتحليل نبرة الصوت والمشاعر.
	</p>
	<div class="api-features">
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>دعم التعرف على كلام متعدد المتحدثين</span>
	</div>
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>تحويل النص إلى كلام طبيعي وواقعي</span>
	</div>
	<div class="api-feature">
	<i class="fas fa-check-circle"></i>
	<span>دعم اللهجات العربية المختلفة</span>
	</div>
	</div>
	<a href="#" class="btn btn-primary">استكشاف API</a>
	</div>
	</div>
	</div>
	</section>

	<!-- SPEEDY Section -->
	<section class="speedy section" id="speedy">
	<div class="speedy-overlay"></div>
	<div class="container">
	<div class="section-title">
	<h2>SPEEDY</h2>
	<p>نموذج الذكاء الاصطناعي المتطور للشركات والمؤسسات</p>
	</div>

	<div class="speedy-content">
	<div class="speedy-text" data-aos="fade-right">
	<span class="speedy-subtitle">الجيل القادم من الذكاء الاصطناعي</span>
	<h2 class="speedy-title">SPEEDY MODEL</h2>
	<p class="speedy-description">
	نموذج SPEEDY هو أحدث إصداراتنا في مجال الذكاء الاصطناعي، مصمم خصيصًا لتلبية احتياجات الشركات والمؤسسات التي تتطلع إلى تحقيق قفزة نوعية في أعمالها باستخدام التقنيات الذكية.
	</p>
	<p class="speedy-description">
	بفضل قدراته الفائقة على معالجة البيانات وفهم اللغات الطبيعية واتخاذ القرارات المعقدة، يمكن لنموذج SPEEDY أن يحدث ثورة في طريقة إدارة أعمالك وتفاعلك مع عملائك.
	</p>

	<div class="speedy-features">
	<div class="speedy-feature" data-aos="fade-up" data-aos-delay="100">
	<i class="fas fa-bolt"></i>
	<div class="speedy-feature-text">
	<h4>سرعة فائقة في المعالجة</h4>
	<p>معالجة البيانات والاستجابة للاستعلامات بسرعة تفوق النماذج التقليدية بنسبة 200%.</p>
	</div>
	</div>
	<div class="speedy-feature" data-aos="fade-up" data-aos-delay="200">
	<i class="fas fa-brain"></i>
	<div class="speedy-feature-text">
	<h4>فهم لغوي متقدم</h4>
	<p>فهم واستيعاب اللغات الطبيعية بدقة عالية، مع دعم كامل للغة العربية واللهجات المختلفة.</p>
	</div>
	</div>
	<div class="speedy-feature" data-aos="fade-up" data-aos-delay="300">
	<i class="fas fa-chart-pie"></i>
	<div class="speedy-feature-text">
	<h4>تحليلات ذكية</h4>
	<p>تحليل البيانات واستخراج رؤى قيمة لدعم اتخاذ القرارات الاستراتيجية في مؤسستك.</p>
	</div>
	</div>
	<div class="speedy-feature" data-aos="fade-up" data-aos-delay="400">
	<i class="fas fa-cog"></i>
	<div class="speedy-feature-text">
	<h4>قابلية التخصيص</h4>
	<p>إمكانية تخصيص النموذج ليناسب احتياجات عملك الفريدة وتطبيقاته المختلفة.</p>
	</div>
	</div>
	</div>

	<a href="#contact" class="btn btn-primary">
	<i class="fas fa-rocket"></i> جرب SPEEDY الآن
	</a>
	</div>

	<div class="speedy-image" data-aos="fade-left">
	<img src="https://ufastpro.com/wp-content/uploads/2025/04/تصميم-بدون-عنوان-1.jpg" alt="SPEEDY AI" class="speedy-img">
	</div>
	</div>

	<!-- Previous Works Section -->
	<div class="previous-works">
	<h2 class="works-title" data-aos="zoom-in">سابقة أعمالنا</h2>
	<p class="works-description" data-aos="zoom-in">
	استكشف مجموعة من مشاريعنا الحقيقية والمبتكرة التي نفذناها بنجاح لعملائنا في مختلف القطاعات
	</p>

	<div class="works-grid">
	<div class="work-card" data-aos="flip-left" data-aos-delay="100">
	<div class="work-image">
	<img src="https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation-1.png" alt="مستشارك القانوني" class="work-img">
	<div class="work-badge">AI مكتمل</div>
	</div>
	<div class="work-content">
	<h3 class="work-card-title">مستشارك القانوني AI</h3>
	<p class="work-card-text">
	نظام ذكاء اصطناعي متطور للاستشارات القانونية يحلل القضايا، يساعد المحامين، ويصيغ العقود تلقائياً بدقة عالية.
	</p>
	<div class="work-tech-stack">
	<span class="tech-tag">Python</span>
	<span class="tech-tag">NLP</span>
	<span class="tech-tag">Machine Learning</span>
	<span class="tech-tag">Legal AI</span>
	</div>
	<a href="#" class="work-card-btn">
	استكشف المشروع <i class="fas fa-arrow-left"></i>
	</a>
	</div>
	</div>

	<div class="work-card" data-aos="flip-left" data-aos-delay="200">
	<div class="work-image">
	<img src="https://ufastpro.com/wp-content/uploads/2024/11/f-stpro-1-1.png" alt="مراجعك اللغوي" class="work-img">
	<div class="work-badge">تطبيق ذكي</div>
	</div>
	<div class="work-content">
	<h3 class="work-card-title">مراجعك اللغوي AI</h3>
	<p class="work-card-text">
	تطبيق ذكي للمراجعة اللغوية يكتشف الأخطاء النحوية والإملائية ويحسن جودة النصوص باللغة العربية والإنجليزية.
	</p>
	<div class="work-tech-stack">
	<span class="tech-tag">React Native</span>
	<span class="tech-tag">AI Grammar</span>
	<span class="tech-tag">Arabic NLP</span>
	<span class="tech-tag">Mobile App</span>
	</div>
	<a href="#" class="work-card-btn">
	استكشف المشروع <i class="fas fa-arrow-left"></i>
	</a>
	</div>
	</div>

	<div class="work-card" data-aos="flip-left" data-aos-delay="300">
	<div class="work-image">
	<img src="https://ufastpro.com/wp-content/uploads/2025/04/تصميم-بدون-عنوان-1.jpg" alt="SPEEDY Model" class="work-img">
	<div class="work-badge">نموذج AI</div>
	</div>
	<div class="work-content">
	<h3 class="work-card-title">SPEEDY AI Model</h3>
	<p class="work-card-text">
	نموذج ذكاء اصطناعي شامل متعدد الوظائف يجمع بين التحليل النصي وتوليد المحتوى وفهم المشاعر والتحليلات المتقدمة.
	</p>
	<div class="work-tech-stack">
	<span class="tech-tag">Transformer</span>
	<span class="tech-tag">GPT</span>
	<span class="tech-tag">Deep Learning</span>
	<span class="tech-tag">Multi-Modal AI</span>
	</div>
	<a href="#" class="work-card-btn">
	استكشف المشروع <i class="fas fa-arrow-left"></i>
	</a>
	</div>
	</div>

	<div class="work-card" data-aos="flip-left" data-aos-delay="400">
	<div class="work-image">
	<img src="https://placehold.co/400x250/4facfe/fff?text=Smart+Analytics" alt="منصة التحليلات الذكية" class="work-img">
	<div class="work-badge">منصة تحليل</div>
	</div>
	<div class="work-content">
	<h3 class="work-card-title">منصة التحليلات الذكية</h3>
	<p class="work-card-text">
	منصة متطورة لتحليل البيانات الضخمة وإنتاج التقارير التفاعلية مع رؤى ذكية مدعومة بالذكاء الاصطناعي.
	</p>
	<div class="work-tech-stack">
	<span class="tech-tag">Big Data</span>
	<span class="tech-tag">Apache Spark</span>
	<span class="tech-tag">Data Visualization</span>
	<span class="tech-tag">Business Intelligence</span>
	</div>
	<a href="#" class="work-card-btn">
	استكشف المشروع <i class="fas fa-arrow-left"></i>
	</a>
	</div>
	</div>

	<div class="work-card" data-aos="flip-left" data-aos-delay="500">
	<div class="work-image">
	<img src="https://placehold.co/400x250/36d1dc/fff?text=Voice+Assistant" alt="المساعد الصوتي الذكي" class="work-img">
	<div class="work-badge">مساعد ذكي</div>
	</div>
	<div class="work-content">
	<h3 class="work-card-title">المساعد الصوتي الذكي</h3>
	<p class="work-card-text">
	مساعد صوتي ذكي يفهم اللغة العربية واللهجات المحلية ويقدم استجابات طبيعية ودقيقة للمستخدمين.
	</p>
	<div class="work-tech-stack">
	<span class="tech-tag">Speech Recognition</span>
	<span class="tech-tag">Voice Synthesis</span>
	<span class="tech-tag">Arabic ASR</span>
	<span class="tech-tag">Conversational AI</span>
	</div>
	<a href="#" class="work-card-btn">
	استكشف المشروع <i class="fas fa-arrow-left"></i>
	</a>
	</div>
	</div>

	<div class="work-card" data-aos="flip-left" data-aos-delay="600">
	<div class="work-image">
	<img src="https://placehold.co/400x250/ff6a88/fff?text=E-Commerce+AI" alt="منصة التجارة الذكية" class="work-img">
	<div class="work-badge">تجارة إلكترونية</div>
	</div>
	<div class="work-content">
	<h3 class="work-card-title">منصة التجارة الذكية</h3>
	<p class="work-card-text">
	منصة تجارة إلكترونية مدعومة بالذكاء الاصطناعي تقدم توصيات شخصية وتحليلات سلوك العملاء المتقدمة.
	</p>
	<div class="work-tech-stack">
	<span class="tech-tag">Recommendation Engine</span>
	<span class="tech-tag">Customer Analytics</span>
	<span class="tech-tag">E-commerce</span>
	<span class="tech-tag">Personalization</span>
	</div>
	<a href="#" class="work-card-btn">
	استكشف المشروع <i class="fas fa-arrow-left"></i>
	</a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- FastPro Media Section -->
	<section class="fastpro-media section" id="fastpro-media">
	<div class="container">
	<div class="section-title">
	<h2>ميديا فاست برو</h2>
	<p>استكشف مقالاتنا وفيديوهاتنا وبثوثنا المباشرة على منصات التواصل الاجتماعي</p>
	</div>

	<div class="media-categories">
	<button class="media-category-btn active" data-filter="all">
	<i class="fas fa-th"></i> الكل
	</button>
	<button class="media-category-btn" data-filter="articles">
	<i class="fas fa-newspaper"></i> المقالات
	</button>
	<button class="media-category-btn" data-filter="videos">
	<i class="fas fa-video"></i> الفيديوهات
	</button>
	<button class="media-category-btn" data-filter="live">
	<i class="fas fa-broadcast-tower"></i> البث المباشر
	</button>
	<button class="media-category-btn" data-filter="tutorials">
	<i class="fas fa-graduation-cap"></i> الدروس التعليمية
	</button>
	</div>

	<div class="media-grid">
	<div class="media-card" data-category="articles" data-aos="fade-up" data-aos-delay="100">
	<div class="media-thumbnail">
	<img src="https://placehold.co/400x250/4facfe/fff?text=AI+Article" alt="مقال عن الذكاء الاصطناعي" class="media-img">
	<div class="media-type-badge">مقال</div>
	</div>
	<div class="media-content">
	<h3 class="media-title">مستقبل الذكاء الاصطناعي في الشرق الأوسط</h3>
	<p class="media-description">
	تحليل شامل لاتجاهات الذكاء الاصطناعي في المنطقة العربية والفرص الاستثمارية المتاحة في هذا القطاع الناشئ.
	</p>
	<div class="media-meta">
	<div class="media-date">
	<i class="fas fa-calendar-alt"></i>
	<span>15 يناير 2025</span>
	</div>
	<div class="media-platform">
	<i class="fab fa-linkedin"></i>
	<span>LinkedIn</span>
	</div>
	</div>
	</div>
	</div>

	<div class="media-card" data-category="videos" data-aos="fade-up" data-aos-delay="200">
	<div class="media-thumbnail">
	<img src="https://placehold.co/400x250/36d1dc/fff?text=AI+Tutorial" alt="درس تعليمي" class="media-img">
	<div class="media-play-button">
	<i class="fas fa-play"></i>
	</div>
	<div class="media-type-badge">فيديو</div>
	</div>
	<div class="media-content">
	<h3 class="media-title">كيفية بناء نموذج ذكاء اصطناعي من الصفر</h3>
	<p class="media-description">
	شرح مفصل وعملي لخطوات بناء نموذج ذكاء اصطناعي باستخدام أحدث التقنيات والأدوات المتاحة.
	</p>
	<div class="media-meta">
	<div class="media-date">
	<i class="fas fa-calendar-alt"></i>
	<span>12 يناير 2025</span>
	</div>
	<div class="media-platform">
	<i class="fab fa-youtube"></i>
	<span>@ufastpro</span>
	</div>
	</div>
	</div>
	</div>

	<div class="media-card" data-category="live" data-aos="fade-up" data-aos-delay="300">
	<div class="media-thumbnail">
	<img src="https://placehold.co/400x250/ff6a88/fff?text=Live+Stream" alt="بث مباشر" class="media-img">
	<div class="media-play-button">
	<i class="fas fa-circle" style="color: #ff0000;"></i>
	</div>
	<div class="media-type-badge">بث مباشر</div>
	</div>
	<div class="media-content">
	<h3 class="media-title">لقاء مباشر: تطوير الذكاء الاصطناعي في 2025</h3>
	<p class="media-description">
	جلسة نقاشية مفتوحة حول أحدث تطورات الذكاء الاصطناعي والتقنيات الناشئة مع خبراء المجال.
	</p>
	<div class="media-meta">
	<div class="media-date">
	<i class="fas fa-calendar-alt"></i>
	<span>10 يناير 2025</span>
	</div>
	<div class="media-platform">
	<i class="fab fa-facebook"></i>
	<span>@ufastpro</span>
	</div>
	</div>
	</div>
	</div>

	<div class="media-card" data-category="tutorials" data-aos="fade-up" data-aos-delay="400">
	<div class="media-thumbnail">
	<img src="https://placehold.co/400x250/7b2cbf/fff?text=Python+Tutorial" alt="درس بايثون" class="media-img">
	<div class="media-play-button">
	<i class="fas fa-play"></i>
	</div>
	<div class="media-type-badge">درس تعليمي</div>
	</div>
	<div class="media-content">
	<h3 class="media-title">تعلم Python للذكاء الاصطناعي - الجزء الأول</h3>
	<p class="media-description">
	سلسلة تعليمية شاملة لتعلم لغة البرمجة Python وتطبيقها في مشاريع الذكاء الاصطناعي والتعلم الآلي.
	</p>
	<div class="media-meta">
	<div class="media-date">
	<i class="fas fa-calendar-alt"></i>
	<span>8 يناير 2025</span>
	</div>
	<div class="media-platform">
	<i class="fab fa-youtube"></i>
	<span>@ufastpro</span>
	</div>
	</div>
	</div>
	</div>

	<div class="media-card" data-category="articles" data-aos="fade-up" data-aos-delay="500">
	<div class="media-thumbnail">
	<img src="https://placehold.co/400x250/f72585/fff?text=Tech+Trends" alt="اتجاهات التقنية" class="media-img">
	<div class="media-type-badge">مقال</div>
	</div>
	<div class="media-content">
	<h3 class="media-title">اتجاهات التقنية لعام 2025</h3>
	<p class="media-description">
	نظرة شاملة على أهم الاتجاهات التقنية المتوقعة لعام 2025 وتأثيرها على الأعمال والمجتمع.
	</p>
	<div class="media-meta">
	<div class="media-date">
	<i class="fas fa-calendar-alt"></i>
	<span>5 يناير 2025</span>
	</div>
	<div class="media-platform">
	<i class="fab fa-medium"></i>
	<span>Medium</span>
	</div>
	</div>
	</div>
	</div>

	<div class="media-card" data-category="videos" data-aos="fade-up" data-aos-delay="600">
	<div class="media-thumbnail">
	<img src="https://placehold.co/400x250/4cc9f0/fff?text=Company+Story" alt="قصة الشركة" class="media-img">
	<div class="media-play-button">
	<i class="fas fa-play"></i>
	</div>
	<div class="media-type-badge">فيديو</div>
	</div>
	<div class="media-content">
	<h3 class="media-title">قصة تأسيس فاست برو ورحلة النجاح</h3>
	<p class="media-description">
	تعرف على قصة تأسيس شركة فاست برو والتحديات التي واجهناها ونجاحاتنا في مجال الذكاء الاصطناعي.
	</p>
	<div class="media-meta">
	<div class="media-date">
	<i class="fas fa-calendar-alt"></i>
	<span>3 يناير 2025</span>
	</div>
	<div class="media-platform">
	<i class="fab fa-facebook"></i>
	<span>@ufastpro</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- All Programs Section -->
	<section class="projects section" id="all-programs">
	<div class="container">
	<div class="section-title">
	<h2>كل برامجنا</h2>
	<p>مجموعة شاملة من البرامج والأدوات التي طورناها لتلبية احتياجاتك التقنية</p>
	</div>

	<div class="project-categories">
	<button class="project-category-btn active" data-filter="all">الكل</button>
	<button class="project-category-btn" data-filter="ai-tools">أدوات AI</button>
	<button class="project-category-btn" data-filter="mobile-apps">تطبيقات الجوال</button>
	<button class="project-category-btn" data-filter="web-platforms">منصات الويب</button>
	<button class="project-category-btn" data-filter="apis">واجهات API</button>
	</div>

	<div class="project-grid">
	<!-- SPEEDY AI Model -->
	<div class="project-card" data-category="ai-tools" data-aos="fade-up" data-aos-delay="100">
	<div class="project-image">
	<img src="https://ufastpro.com/wp-content/uploads/2025/04/تصميم-بدون-عنوان-1.jpg" alt="SPEEDY AI" class="project-img">
	<div class="project-overlay">
	<a href="https://speedy.ufastpro.com" target="_blank" class="btn btn-primary">زيارة البرنامج</a>
	</div>
	<div class="project-tag">نموذج AI</div>
	</div>
	<div class="project-content">
	<h3 class="project-title">SPEEDY AI Model</h3>
	<p class="project-description">
	نموذج ذكاء اصطناعي متطور متعدد الوظائف يجمع بين التحليل النصي وتوليد المحتوى وفهم المشاعر.
	</p>
	<div class="project-meta">
	<div class="project-client">
	<i class="fas fa-link"></i>
	<a href="https://speedy.ufastpro.com" target="_blank">speedy.ufastpro.com</a>
	</div>
	<div class="project-date">
	<i class="fas fa-calendar-alt"></i>
	<span>2025</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Legal AI Assistant -->
	<div class="project-card" data-category="ai-tools" data-aos="fade-up" data-aos-delay="200">
	<div class="project-image">
	<img src="https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation-1.png" alt="مستشارك القانوني" class="project-img">
	<div class="project-overlay">
	<a href="https://legal.ufastpro.com" target="_blank" class="btn btn-primary">زيارة البرنامج</a>
	</div>
	<div class="project-tag">مساعد قانوني</div>
	</div>
	<div class="project-content">
	<h3 class="project-title">مستشارك القانوني AI</h3>
	<p class="project-description">
	نظام ذكاء اصطناعي للاستشارات القانونية يحلل القضايا ويساعد في صياغة العقود والوثائق القانونية.
	</p>
	<div class="project-meta">
	<div class="project-client">
	<i class="fas fa-link"></i>
	<a href="https://legal.ufastpro.com" target="_blank">legal.ufastpro.com</a>
	</div>
	<div class="project-date">
	<i class="fas fa-calendar-alt"></i>
	<span>2025</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Language Reviewer App -->
	<div class="project-card" data-category="mobile-apps" data-aos="fade-up" data-aos-delay="300">
	<div class="project-image">
	<img src="https://ufastpro.com/wp-content/uploads/2024/11/f-stpro-1-1.png" alt="مراجعك اللغوي" class="project-img">
	<div class="project-overlay">
	<a href="https://apps.ufastpro.com/reviewer" target="_blank" class="btn btn-primary">تحميل التطبيق</a>
	</div>
	<div class="project-tag">تطبيق جوال</div>
	</div>
	<div class="project-content">
	<h3 class="project-title">مراجعك اللغوي</h3>
	<p class="project-description">
	تطبيق مراجعة لغوية ذكي يكتشف الأخطاء النحوية والإملائية ويحسن جودة النصوص العربية والإنجليزية.
	</p>
	<div class="project-meta">
	<div class="project-client">
	<i class="fas fa-mobile-alt"></i>
	<span>iOS & Android</span>
	</div>
	<div class="project-date">
	<i class="fas fa-calendar-alt"></i>
	<span>2024</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Analytics Platform -->
	<div class="project-card" data-category="web-platforms" data-aos="fade-up" data-aos-delay="400">
	<div class="project-image">
	<img src="https://placehold.co/600x400/4facfe/fff?text=Analytics+Platform" alt="منصة التحليلات" class="project-img">
	<div class="project-overlay">
	<a href="https://analytics.ufastpro.com" target="_blank" class="btn btn-primary">زيارة المنصة</a>
	</div>
	<div class="project-tag">منصة ويب</div>
	</div>
	<div class="project-content">
	<h3 class="project-title">منصة التحليلات الذكية</h3>
	<p class="project-description">
	منصة متطورة لتحليل البيانات وإنتاج التقارير التفاعلية مع رؤى ذكية مدعومة بالذكاء الاصطناعي.
	</p>
	<div class="project-meta">
	<div class="project-client">
	<i class="fas fa-link"></i>
	<a href="https://analytics.ufastpro.com" target="_blank">analytics.ufastpro.com</a>
	</div>
	<div class="project-date">
	<i class="fas fa-calendar-alt"></i>
	<span>2024</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Voice API -->
	<div class="project-card" data-category="apis" data-aos="fade-up" data-aos-delay="500">
	<div class="project-image">
	<img src="https://placehold.co/600x400/36d1dc/fff?text=Voice+API" alt="Voice API" class="project-img">
	<div class="project-overlay">
	<a href="https://api.ufastpro.com/voice" target="_blank" class="btn btn-primary">استخدم API</a>
	</div>
	<div class="project-tag">واجهة API</div>
	</div>
	<div class="project-content">
	<h3 class="project-title">Voice Recognition API</h3>
	<p class="project-description">
	واجهة برمجة متطورة للتعرف على الكلام وتحويله إلى نص مع دعم كامل للغة العربية واللهجات المختلفة.
	</p>
	<div class="project-meta">
	<div class="project-client">
	<i class="fas fa-link"></i>
	<a href="https://api.ufastpro.com/voice" target="_blank">api.ufastpro.com/voice</a>
	</div>
	<div class="project-date">
	<i class="fas fa-calendar-alt"></i>
	<span>2024</span>
	</div>
	</div>
	</div>
	</div>

	<!-- NLP API -->
	<div class="project-card" data-category="apis" data-aos="fade-up" data-aos-delay="600">
	<div class="project-image">
	<img src="https://placehold.co/600x400/ff6a88/fff?text=NLP+API" alt="NLP API" class="project-img">
	<div class="project-overlay">
	<a href="https://api.ufastpro.com/nlp" target="_blank" class="btn btn-primary">استخدم API</a>
	</div>
	<div class="project-tag">واجهة API</div>
	</div>
	<div class="project-content">
	<h3 class="project-title">Arabic NLP API</h3>
	<p class="project-description">
	واجهة برمجة لمعالجة اللغة الطبيعية العربية مع إمكانيات تحليل المشاعر واستخراج الكيانات والمفاهيم.
	</p>
	<div class="project-meta">
	<div class="project-client">
	<i class="fas fa-link"></i>
	<a href="https://api.ufastpro.com/nlp" target="_blank">api.ufastpro.com/nlp</a>
	</div>
	<div class="project-date">
	<i class="fas fa-calendar-alt"></i>
	<span>2024</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="footer" id="contact">
	<div class="container">
	<div class="footer-grid">
	<div class="footer-widget footer-about">
	<h3>عن فاست برو</h3>
	<p>
	شركة رائدة في مجال تقنيات الذكاء الاصطناعي وتطوير البرمجيات المتقدمة، نقدم حلول مبتكرة ومخصصة لمساعدة عملائنا على تحقيق النجاح في العصر الرقمي.
	</p>
	<div class="footer-social">
	<a href="https://facebook.com/ufastpro" target="_blank" class="social-link"><i class="fab fa-facebook-f"></i></a>
	<a href="https://twitter.com/ufastpro" target="_blank" class="social-link"><i class="fab fa-twitter"></i></a>
	<a href="https://linkedin.com/company/ufastpro" target="_blank" class="social-link"><i class="fab fa-linkedin-in"></i></a>
	<a href="https://instagram.com/ufastpro" target="_blank" class="social-link"><i class="fab fa-instagram"></i></a>
	<a href="https://youtube.com/@ufastpro" target="_blank" class="social-link"><i class="fab fa-youtube"></i></a>
	<a href="https://tiktok.com/@ufastpro" target="_blank" class="social-link"><i class="fab fa-tiktok"></i></a>
	</div>
	</div>

	<div class="footer-widget footer-links">
	<h3>روابط سريعة</h3>
	<ul>
	<li><a href="#">الرئيسية</a></li>
	<li><a href="#about-us">من نحن</a></li>
	<li><a href="#services">خدماتنا</a></li>
	<li><a href="#api-services">خدمات API</a></li>
	<li><a href="#speedy">SPEEDY</a></li>
	<li><a href="#projects">مشاريعنا</a></li>
	<li><a href="#all-programs">كل برامجنا</a></li>
	</ul>
	</div>

	<div class="footer-widget footer-links">
	<h3>برامجنا المتاحة</h3>
	<ul>
	<li><a href="https://speedy.ufastpro.com" target="_blank">SPEEDY AI Model</a></li>
	<li><a href="https://legal.ufastpro.com" target="_blank">مستشارك القانوني</a></li>
	<li><a href="https://apps.ufastpro.com/reviewer" target="_blank">مراجعك اللغوي</a></li>
	<li><a href="https://analytics.ufastpro.com" target="_blank">منصة التحليلات</a></li>
	<li><a href="https://api.ufastpro.com/voice" target="_blank">Voice API</a></li>
	<li><a href="https://api.ufastpro.com/nlp" target="_blank">Arabic NLP API</a></li>
	<li><a href="#fastpro-media">ميديا فاست برو</a></li>
	</ul>
	</div>

	<div class="footer-widget footer-contact">
	<h3>تواصل معنا</h3>
	<p>
	<i class="fas fa-map-marker-alt"></i>
	<span>القاهرة، جمهورية مصر العربية</span>
	</p>
	<p>
	<i class="fas fa-phone-alt"></i>
	<span>+20 107 015 9698</span>
	</p>
	<p>
	<i class="fas fa-envelope"></i>
	<span>info@ufastpro.com</span>
	</p>
	<div class="footer-subscribe">
	<input type="email" placeholder="البريد الإلكتروني للنشرة الإخبارية">
	<button><i class="fas fa-paper-plane"></i></button>
	</div>
	</div>
	</div>

	<div class="footer-bottom">
	<p>
	جميع الحقوق محفوظة © 2025 فاست برو للذكاء الاصطناعي - @ufastpro على جميع منصات التواصل الاجتماعي
	</p>
	</div>
	</div>
	</footer>

	<!-- Chatbot -->
	<div class="chatbot">
	<div class="chatbot-toggle" id="chatbot-toggle">
	<i class="fas fa-comment-dots"></i>
	</div>

	<div class="chatbot-window" id="chatbot-window">
	<div class="chatbot-header">
	<h3 class="chatbot-title">مساعد فاست برو</h3>
	<button class="chatbot-close" id="chatbot-close">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<div class="chatbot-messages" id="chatbot-messages">
	<div class="chat-message bot-message">
	مرحبًا! أنا مساعد فاست برو الافتراضي المدعوم بتقنية SPEEDY. كيف يمكنني مساعدتك اليوم؟
	</div>
	</div>

	<div class="chatbot-input">
	<input type="text" id="chat-input" placeholder="اكتب رسالتك هنا...">
	<button class="chatbot-send" id="chat-send">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Back to Top Button -->
	<div class="back-to-top" id="back-to-top">
	<i class="fas fa-arrow-up"></i>
	</div>

	<script>
	// Initialize AOS
	document.addEventListener('DOMContentLoaded', function() {
	AOS.init({
	duration: 800,
	once: true,
	offset: 100
	});

	// Initialize Typed.js for Hero Section
	const heroTyped = new Typed('#hero-typing', {
	strings: [
	'نبتكر المستقبل مع تقنيات الذكاء الاصطناعي المتقدمة',
	'نطور حلول ذكية تناسب احتياجات عملك الفريدة',
	'نحول أفكارك إلى واقع رقمي متطور',
	'نرتقي بأعمالك إلى آفاق جديدة من النجاح'
	],
	typeSpeed: 50,
	backSpeed: 30,
	backDelay: 3000,
	loop: true
	});

	// Initialize Logo Typing Effect
	const logoTyped = new Typed('#logo-text', {
	strings: ['فاست برو','فاست برو', 'FastPro'],
	typeSpeed: 50,
	backSpeed: 30,
	backDelay: 5000,
	loop: true
	});

	// Count Up Animation
	const countUpElements = document.querySelectorAll('.count-up');

	function animateCountUp(el) {
	const target = parseInt(el.getAttribute('data-count'));
	const count = parseInt(el.innerText);
	const increment = target / 50;

	if (count < target) {
	el.innerText = Math.ceil(count + increment);
	setTimeout(function() {
	animateCountUp(el);
	}, 50);
	} else {
	el.innerText = target;
	}
	}

	// Initialize count animations when elements are in viewport
	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	animateCountUp(entry.target);
	observer.unobserve(entry.target);
	}
	});
	}, {threshold: 0.5});

	countUpElements.forEach(el => {
	observer.observe(el);
	});
	});

	// Theme Toggle
	const lightToggle = document.getElementById('light-toggle');
	const darkToggle = document.getElementById('dark-toggle');
	const cosmosToggle = document.getElementById('cosmos-toggle');
	const mobileLightToggle = document.getElementById('mobile-light-toggle');
	const mobileDarkToggle = document.getElementById('mobile-dark-toggle');
	const mobileCosmosToggle = document.getElementById('mobile-cosmos-toggle');
	const body = document.body;

	function setTheme(theme) {
	body.setAttribute('data-theme', theme);
	localStorage.setItem('theme', theme);

	// Update active states
	lightToggle.classList.remove('active');
	darkToggle.classList.remove('active');
	cosmosToggle.classList.remove('active');
	mobileLightToggle.classList.remove('active');
	mobileDarkToggle.classList.remove('active');
	mobileCosmosToggle.classList.remove('active');

	if (theme === 'light' \|\| !theme) {
	lightToggle.classList.add('active');
	mobileLightToggle.classList.add('active');
	initParticles('#4facfe');
	} else if (theme === 'dark') {
	darkToggle.classList.add('active');
	mobileDarkToggle.classList.add('active');
	initParticles('#6078ff');
	} else if (theme === 'cosmos') {
	cosmosToggle.classList.add('active');
	mobileCosmosToggle.classList.add('active');
	initParticles('#e0aaff');
	createStars();
	}
	}

	lightToggle.addEventListener('click', () => setTheme('light'));
	darkToggle.addEventListener('click', () => setTheme('dark'));
	cosmosToggle.addEventListener('click', () => setTheme('cosmos'));
	mobileLightToggle.addEventListener('click', () => {
	setTheme('light');
	closeMobileMenu();
	});
	mobileDarkToggle.addEventListener('click', () => {
	setTheme('dark');
	closeMobileMenu();
	});
	mobileCosmosToggle.addEventListener('click', () => {
	setTheme('cosmos');
	closeMobileMenu();
	});

	// Load saved theme
	const savedTheme = localStorage.getItem('theme');
	if (savedTheme) {
	setTheme(savedTheme);
	}

	// Create stars for cosmos theme
	function createStars() {
	const starsContainer = document.getElementById('stars-container');
	starsContainer.innerHTML = '';

	// Create small stars
	for (let i = 0; i < 200; i++) {
	const star = document.createElement('div');
	star.classList.add('star');

	const size = Math.random() * 2 + 1;
	const x = Math.random() * window.innerWidth;
	const y = Math.random() * window.innerHeight;

	star.style.width = `${size}px`;
	star.style.height = `${size}px`;
	star.style.left = `${x}px`;
	star.style.top = `${y}px`;
	star.style.animationDelay = `${Math.random() * 5}s`;

	starsContainer.appendChild(star);
	}

	// Create shooting stars
	for (let i = 0; i < 5; i++) {
	const shootingStar = document.createElement('div');
	shootingStar.classList.add('shooting-star');

	const x = Math.random() * window.innerWidth;
	const y = Math.random() * window.innerHeight;

	shootingStar.style.left = `${x}px`;
	shootingStar.style.top = `${y}px`;
	shootingStar.style.animationDelay = `${Math.random() * 15}s`;

	starsContainer.appendChild(shootingStar);
	}
	}

	// Initialize Particles.js
	function initParticles(color) {
	particlesJS('particles-js', {
	particles: {
	number: {
	value: 80,
	density: {
	enable: true,
	value_area: 800
	}
	},
	color: {
	value: color
	},
	shape: {
	type: 'circle',
	stroke: {
	width: 0,
	color: '#000000'
	}
	},
	opacity: {
	value: 0.5,
	random: false,
	animation: {
	enable: true,
	speed: 1,
	opacity_min: 0.1,
	sync: false
	}
	},
	size: {
	value: 3,
	random: true,
	animation: {
	enable: true,
	speed: 2,
	size_min: 0.1,
	sync: false
	}
	},
	line_linked: {
	enable: true,
	distance: 150,
	color: color,
	opacity: 0.4,
	width: 1
	},
	move: {
	enable: true,
	speed: 2,
	direction: 'none',
	random: false,
	straight: false,
	out_mode: 'out',
	bounce: false,
	attract: {
	enable: false,
	rotateX: 600,
	rotateY: 1200
	}
	}
	},
	interactivity: {
	detect_on: 'canvas',
	events: {
	onhover: {
	enable: true,
	mode: 'grab'
	},
	onclick: {
	enable: true,
	mode: 'push'
	},
	resize: true
	},
	modes: {
	grab: {
	distance: 140,
	line_linked: {
	opacity: 1
	}
	},
	push: {
	particles_nb: 4
	}
	}
	},
	retina_detect: true
	});
	}

	// Initialize default particles
	initParticles('#4facfe');

	// Language Selector - Updated to remove French
	const currentLang = document.getElementById('current-lang');
	const langDropdown = document.getElementById('lang-dropdown');
	const langOptions = document.querySelectorAll('.lang-option');
	const mobileLangOptions = document.querySelectorAll('.mobile-language-option');

	currentLang.addEventListener('click', function() {
	langDropdown.style.display = langDropdown.style.display === 'block' ? 'none' : 'block';
	});

	document.addEventListener('click', function(event) {
	if (!currentLang.contains(event.target) && !langDropdown.contains(event.target)) {
	langDropdown.style.display = 'none';
	}
	});

	function setLanguage(lang) {
	// In a real application, this would switch the language
	document.documentElement.setAttribute('lang', lang);

	// Update the current language display
	const selectedOption = document.querySelector(`.lang-option[data-lang="${lang}"]`);
	const mobileSelectedOption = document.querySelector(`.mobile-language-option[data-lang="${lang}"]`);

	if (selectedOption) {
	currentLang.innerHTML = selectedOption.innerHTML;
	}

	// Update active states
	langOptions.forEach(option => {
	option.classList.remove('active');
	});

	mobileLangOptions.forEach(option => {
	option.classList.remove('active');
	});

	if (selectedOption) {
	selectedOption.classList.add('active');
	}

	if (mobileSelectedOption) {
	mobileSelectedOption.classList.add('active');
	}

	localStorage.setItem('language', lang);

	// Close the dropdown
	langDropdown.style.display = 'none';

	let title;

	if (lang === 'ar') {
	title = 'فاست برو - حلول الذكاء الاصطناعي المتقدمة';
	document.body.style.direction = 'rtl';
	} else if (lang === 'en') {
	title = 'FastPro - Advanced AI Solutions';
	document.body.style.direction = 'ltr';
	}

	document.title = title;
	}

	langOptions.forEach(option => {
	option.addEventListener('click', function() {
	const lang = this.getAttribute('data-lang');
	setLanguage(lang);
	});
	});

	mobileLangOptions.forEach(option => {
	option.addEventListener('click', function() {
	const lang = this.getAttribute('data-lang');
	setLanguage(lang);
	closeMobileMenu();
	});
	});

	// Load saved language
	const savedLanguage = localStorage.getItem('language');
	if (savedLanguage) {
	setLanguage(savedLanguage);
	}

	// Mobile Menu
	const mobileMenuBtn = document.getElementById('mobile-menu-btn');
	const mobileMenu = document.getElementById('mobile-menu');
	const mobileMenuClose = document.getElementById('mobile-menu-close');
	const overlay = document.getElementById('overlay');

	function openMobileMenu() {
	mobileMenu.classList.add('active');
	overlay.classList.add('active');
	document.body.style.overflow = 'hidden';
	}

	function closeMobileMenu() {
	mobileMenu.classList.remove('active');
	overlay.classList.remove('active');
	document.body.style.overflow = '';
	}

	mobileMenuBtn.addEventListener('click', openMobileMenu);
	mobileMenuClose.addEventListener('click', closeMobileMenu);
	overlay.addEventListener('click', closeMobileMenu);

	// Smooth scroll for navigation links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function(e) {
	e.preventDefault();

	const targetId = this.getAttribute('href');
	if (targetId === '#') return;

	const targetElement = document.querySelector(targetId);
	if (targetElement) {
	// Close mobile menu if open
	closeMobileMenu();

	// Scroll to target
	window.scrollTo({
	top: targetElement.offsetTop - 80,
	behavior: 'smooth'
	});
	}
	});
	});

	// Project category filtering
	const projectCategoryBtns = document.querySelectorAll('.project-category-btn');
	const projectCards = document.querySelectorAll('.project-card');

	projectCategoryBtns.forEach(btn => {
	btn.addEventListener('click', function() {
	// Remove active class from all buttons
	projectCategoryBtns.forEach(b => b.classList.remove('active'));
	// Add active class to clicked button
	this.classList.add('active');

	const filter = this.getAttribute('data-filter');

	projectCards.forEach(card => {
	if (filter === 'all') {
	card.style.display = 'block';
	} else {
	if (card.getAttribute('data-category') === filter) {
	card.style.display = 'block';
	} else {
	card.style.display = 'none';
	}
	}
	});
	});
	});

	// Media category filtering
	const mediaCategoryBtns = document.querySelectorAll('.media-category-btn');
	const mediaCards = document.querySelectorAll('.media-card');

	mediaCategoryBtns.forEach(btn => {
	btn.addEventListener('click', function() {
	// Remove active class from all buttons
	mediaCategoryBtns.forEach(b => b.classList.remove('active'));
	// Add active class to clicked button
	this.classList.add('active');

	const filter = this.getAttribute('data-filter');

	mediaCards.forEach(card => {
	if (filter === 'all') {
	card.style.display = 'block';
	} else {
	if (card.getAttribute('data-category') === filter) {
	card.style.display = 'block';
	} else {
	card.style.display = 'none';
	}
	}
	});
	});
	});

	// Back to Top Button
	const backToTopBtn = document.getElementById('back-to-top');

	window.addEventListener('scroll', function() {
	if (window.pageYOffset > 300) {
	backToTopBtn.classList.add('active');
	} else {
	backToTopBtn.classList.remove('active');
	}
	});

	backToTopBtn.addEventListener('click', function() {
	window.scrollTo({
	top: 0,
	behavior: 'smooth'
	});
	});

	// Header Scroll Effect
	const header = document.querySelector('.header');

	window.addEventListener('scroll', function() {
	if (window.pageYOffset > 50) {
	header.classList.add('scrolled');
	} else {
	header.classList.remove('scrolled');
	}
	});

	// Chatbot functionality
	const chatbotToggle = document.getElementById('chatbot-toggle');
	const chatbotWindow = document.getElementById('chatbot-window');
	const chatbotClose = document.getElementById('chatbot-close');
	const chatbotMessages = document.getElementById('chatbot-messages');
	const chatInput = document.getElementById('chat-input');
	const chatSend = document.getElementById('chat-send');

	chatbotToggle.addEventListener('click', function() {
	chatbotWindow.style.display = chatbotWindow.style.display === 'flex' ? 'none' : 'flex';
	});

	chatbotClose.addEventListener('click', function() {
	chatbotWindow.style.display = 'none';
	});

	function sendMessage() {
	const message = chatInput.value.trim();
	if (!message) return;

	// Add user message
	const userMessageElement = document.createElement('div');
	userMessageElement.classList.add('chat-message', 'user-message');
	userMessageElement.textContent = message;
	chatbotMessages.appendChild(userMessageElement);

	// Clear input
	chatInput.value = '';

	// Scroll to bottom
	chatbotMessages.scrollTop = chatbotMessages.scrollHeight;

	// Simulate bot response after 1 second
	setTimeout(function() {
	const botResponses = [
	"شكراً لتواصلك معنا! كيف يمكنني مساعدتك بخصوص خدماتنا؟",
	"هل ترغب في معرفة المزيد عن نموذج SPEEDY وإمكانياته؟",
	"يمكنني توصيلك بأحد خبرائنا لمناقشة احتياجاتك بشكل مفصل.",
	"هل لديك أي استفسارات حول مشاريعنا أو خدماتنا؟",
	"يمكنني تقديم معلومات مفصلة حول برامجنا المختلفة وما تشمله من ميزات.",
	"أنا هنا لمساعدتك! هل تود معرفة كيف يمكن لحلول الذكاء الاصطناعي تحسين أعمالك؟"
	];

	const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)];

	const botMessageElement = document.createElement('div');
	botMessageElement.classList.add('chat-message', 'bot-message');
	botMessageElement.textContent = randomResponse;
	chatbotMessages.appendChild(botMessageElement);

	// Scroll to bottom
	chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
	}, 1000);
	}

	chatSend.addEventListener('click', sendMessage);

	chatInput.addEventListener('keypress', function(event) {
	if (event.key === 'Enter') {
	sendMessage();
	}
	});
	</script>
	</body>
	</html>