Update index.html

index.html

@@ -19,7 +19,7 @@
         }
 
         nav {
-            background-color: #333;
+            background-color: #ffffff;
             padding: 0.5rem 2rem;
             position: sticky;
             top: 0;
@@ -44,7 +44,6 @@
             height: 50px;
             margin-left: 1rem;
             transition: transform 0.3s;
-            filter: brightness(0) invert(1);
         }
 
         .nav-logo img:hover {
@@ -59,7 +58,7 @@
         }
 
         .nav-list a {
-            color: white;
+            color: #333;
             text-decoration: none;
             font-weight: bold;
             transition: all 0.3s;
@@ -85,25 +84,24 @@
 
         .nav-list a:hover {
             color: #ff7961;
-            background-color: rgba(255, 255, 255, 0.1);
+            background-color: rgba(51, 51, 51, 0.1);
         }
 
         .menu-toggle {
             display: none;
             background: none;
             border: none;
-            color: white;
+            color: #333;
             font-size: 1.5rem;
             cursor: pointer;
             padding: 0.5rem;
         }
 
         .hero {
-            background-color: #333;
             padding: 4rem 2rem;
             text-align: center;
-            width: 100%;
-            margin: 0;
+            max-width: 1200px;
+            margin: 0 auto;
         }
 
         .hero-content {
@@ -112,20 +110,17 @@
             justify-content: space-between;
             gap: 2rem;
             margin-bottom: 4rem;
-            max-width: 1200px;
-            margin: 0 auto;
         }
 
         .hero-text {
             flex: 1;
             text-align: right;
-            color: white;
         }
 
         .hero-image {
             flex: 1;
             position: relative;
-            background-color: transparent;
+            background-color: #ff7961;
             border-radius: 10px;
             padding: 2rem;
             transition: transform 0.3s;
@@ -138,7 +133,6 @@
         .logo {
             width: 300px;
             animation: pulse 2s infinite;
-            filter: brightness(0) invert(1);
         }
 
         @keyframes pulse {
@@ -150,12 +144,12 @@
         h1 {
             font-size: 3rem;
             margin-bottom: 1rem;
-            color: white;
+            color: #333;
         }
 
         .subtitle {
             font-size: 1.2rem;
-            color: rgba(255, 255, 255, 0.9);
+            color: #666;
             margin-bottom: 2rem;
         }
 
@@ -174,23 +168,23 @@
         }
 
         .button-primary {
-            background-color: #ff7961;
+            background-color: #333;
             color: white;
         }
 
         .button-primary:hover {
-            background-color: #ff6347;
+            background-color: #444;
             transform: translateY(-2px);
         }
 
         .button-secondary {
-            border: 2px solid white;
-            color: white;
+            border: 2px solid #333;
+            color: #333;
         }
 
         .button-secondary:hover {
-            background-color: white;
-            color: #333;
+            background-color: #333;
+            color: white;
             transform: translateY(-2px);
         }
 
@@ -200,9 +194,6 @@
             gap: 2rem;
             text-align: center;
             margin-top: 4rem;
-            padding: 4rem 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
         }
 
         .capability {
@@ -276,10 +267,6 @@
             text-align: right;
         }
 
-        .featured-text h2 {
-            color: #333;
-        }
-
         @media (max-width: 768px) {
             .nav-container {
                 flex-direction: column;
@@ -302,7 +289,7 @@
                 flex-direction: column;
                 padding: 1rem 0;
                 gap: 0.5rem;
-                background-color: #333;
+                background-color: #ffffff;
             }
 
             .nav-list.active {
@@ -327,7 +314,6 @@
             .capabilities {
                 grid-template-columns: repeat(2, 1fr);
                 gap: 1rem;
-                padding: 2rem 1rem;
             }
 
             .buttons {
@@ -392,30 +378,30 @@
                 <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="شعار الذكاء الاصطناعي" class="logo">
             </div>
         </div>
-    </main>
 
-    <section class="capabilities">
-        <div class="capability">
-            <div class="icon">🧠</div>
-            <h2>تفكير متقدم</h2>
-            <p>قدرات تحليلية وإدراكية متطورة</p>
-        </div>
-        <div class="capability">
-            <div class="icon">👁️</div>
-            <h2>تحليل الصور</h2>
-            <p>فهم وتحليل المحتوى البصري</p>
-        </div>
-        <div class="capability">
-            <div class="icon">💻</div>
-            <h2>برمجة ذكية</h2>
-            <p>إنشاء وتحليل التعليمات البرمجية</p>
-        </div>
-        <div class="capability">
-            <div class="icon">🌐</div>
-            <h2>دعم متعدد اللغات</h2>
-            <p>معالجة وترجمة بين اللغات المختلفة</p>
-        </div>
-    </section>
+        <section class="capabilities">
+            <div class="capability">
+                <div class="icon">🧠</div>
+                <h2>تفكير متقدم</h2>
+                <p>قدرات تحليلية وإدراكية متطورة</p>
+            </div>
+            <div class="capability">
+                <div class="icon">👁️</div>
+                <h2>تحليل الصور</h2>
+                <p>فهم وتحليل المحتوى البصري</p>
+            </div>
+            <div class="capability">
+                <div class="icon">💻</div>
+                <h2>برمجة ذكية</h2>
+                <p>إنشاء وتحليل التعليمات البرمجية</p>
+            </div>
+            <div class="capability">
+                <div class="icon">🌐</div>
+                <h2>دعم متعدد اللغات</h2>
+                <p>معالجة وترجمة بين اللغات المختلفة</p>
+            </div>
+        </section>
+    </main>
 
     <section class="featured-section">
         <div class="featured-content">