diff --git a/src/App.jsx b/src/App.jsx
index 83af1cf..4f363b5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,3 @@
-// src/App.jsx
 import React from "react";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { AnimatePresence, LayoutGroup } from "framer-motion";
@@ -16,7 +15,6 @@ import Contact from "./Components/Sections/Contact/Contact";
 import Footer from "./Components/Nav/Footer";
 import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
 
-/* MainPage — الصفحة التي تحتوي على الأقسام المجمعة (لا تتضمن Navbar هنا) */
 const MainPage = () => {
   return (
     <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
@@ -34,7 +32,6 @@ const MainPage = () => {
   );
 };
 
-/* Router view يستخدم useLocation مع AnimatePresence */
 function RouterView() {
   const location = useLocation();
 
@@ -45,24 +42,19 @@ function RouterView() {
           <Route path="/" element={<MainPage />} />
           <Route path="/departments/:id" element={<DepartmentDetail />} />
           <Route path="/department-detail2" element={<DepartmentDetail2 />} />
-          {/* أضف مسارات إضافية هنا إذا احتجت */}
         </Routes>
       </AnimatePresence>
     </LayoutGroup>
   );
 }
 
-/* Layout: يقرر متى يُعرض الـ Navbar بناءً على الـ pathname */
 function Layout() {
   const location = useLocation();
 
-  // هنا ضع المسارات أو الأنماط التي تريد إخفاء الـ Navbar فيها
   const excludedExactPaths = [
     "/department-detail2",
-    // أضف مسارات أخرى تريد إخفاء navbar فيها بنفس الشكل
   ];
 
-  // أمثلة على أنماط: إخفاء لكل ما يبدأ بـ /departments/
   const excludedPrefixes = ["/departments/"];
 
   const isExcludedExact = excludedExactPaths.includes(location.pathname);
@@ -70,15 +62,12 @@ function Layout() {
 
   const hideNavbar = isExcludedExact || isExcludedPrefix;
 
-  // ارتفاع الـ Navbar المستخدم كـ padding-top عندما يكون ظاهرًا (يتوافق مع height في Navbar.jsx)
   const navbarHeight = hideNavbar ? 0 : 56;
 
   return (
     <>
-      {/* Navbar يظهر فقط عندما hideNavbar === false */}
       {!hideNavbar && <Navbar />}
 
-      {/* نضع الـ RouterView داخل حاوية لها padding-top مساوٍ لارتفاع الـ navbar عند ظهوره */}
       <div style={{ paddingTop: navbarHeight }}>
         <RouterView />
       </div>
diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx
index e9a137f..bbf1762 100644
--- a/src/Components/Sections/Departments/Departments.jsx
+++ b/src/Components/Sections/Departments/Departments.jsx
@@ -9,7 +9,6 @@ import {
 } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 
-// images
 import d1 from "../../../../src/assets/Images/d1.jpeg";
 import d7 from "../../../../src/assets/Images/d7.jpeg";
 import d14 from "../../../../src/assets/Images/d14.jpg";
@@ -20,9 +19,6 @@ import d20 from "../../../../src/assets/Images/d20.jpeg";
 import d21 from "../../../../src/assets/Images/d21.jpeg";
 import d22 from "../../../../src/assets/Images/d22.jpg";
 
-
-
-
 const departments = [
   { id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
   { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
@@ -33,7 +29,6 @@ const departments = [
   { id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d20 },
   { id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d21 },
   { id: 9, title: "قسم الاتمتة والتحكم", image: d22 },
-
 ];
 
 function DepartmentCard({ dept, offset }) {
@@ -143,7 +138,7 @@ export default function Departments() {
   return (
     <section className="min-h-screen bg-white text-black" dir="rtl">
       <header className="max-w-6xl mx-auto px-6 pt-12">
-        <h1 className="text-4xl font-extrabold">أقسامنا</h1>
+        <h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600">أقسامنا</h1>
       </header>
 
       <main className="max-w-6xl mx-auto px-6 py-20">