#loader {
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 5px;
               background: #686969c9;
               animation: loading 3s infinite;
           }

           @keyframes loading {
               0% {
                   width: 0%;
               }

               50% {
                   width: 50%;
               }

               100% {
                   width: 100%;
               }
           }

           /* تصميم الهيدر */
          

           /* إضافة اللغة */
           .language-selector {
               position: fixed;
               right: 20px;
               top: 20px;
               background-color: rgba(0, 0, 0, 0.7);
               padding: 1px 1px;
               border-radius: 5px;
               color: #fff;
               cursor: pointer;
               z-index: 2000;
           }

           /* القسم الرئيسي */
           .hero {
               background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                   url('swello-R3j48rWtXOA-unsplash.jpg') no-repeat center center/cover;
               height: 100vh;
               background-size: 100% 100%;
               display: flex;
               justify-content: center;
               align-items: center;
               color: #fff;
               text-align: center;
               z-index: 1;
           }

           .hero h2 {
               font-size: 3rem;
               font-weight: bold;
               text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
           }

           .hero p {
               font-size: 1.2rem;
               margin-top: 10px;
               text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
           }

           .btn {
               background: #91929479;
               padding: 10px 25px;
               border-radius: 8px;
               color: white;
               text-decoration: none;
               font-weight: bold;
               margin-top: 25px;
               transition: 0.3s;
               box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
           }

           .btn:hover {
               transform: scale(1.1);
               background: #0a0a0a3b;
           }

           /* قسم المشاريع */
           .projects,
           .services {
               padding: 60px 0;
               background-color: #000000;
               color: #faf8f8;
           }

           .projects h3,
           .services h3 {
               text-align: center;
               font-size: 2.5rem;
               margin-bottom: 40px;
           }

           .project-grid,
           .service-grid {
               display: flex;
               justify-content: space-around;
               gap: 20px;
               flex-wrap: wrap;
               margin-top: 30px;
           }

           .project,
           .service {
               background: #ffffff04;
               padding: 30px;
               text-align: center;
               box-shadow: 0 4px 8px rgba(88, 88, 88, 0.329);
               width: 22%;
               transition: transform 0.3s, box-shadow 0.3s;
               border-radius: 10px;
           }

           .project:hover,
           .service:hover {
               transform: scale(1.05);
               box-shadow: 0 4px 15px rgba(0, 255, 255, 0.6);
           }

           .project h4,
           .service h4 {
               font-size: 1.8rem;
               margin-bottom: 15px;
               color: #f5f2f2;
           }

           .project p,
           .service p {
               color: #f5f2f2;
               font-size: 1rem;
           }

           .project a,
           .service a {
               display: inline-block;
               margin-top: 20px;
               padding: 10px 25px;
               background: #91929479;
               color: white;
               text-decoration: none;
               border-radius: 8px;
               font-weight: bold;
               transition: 0.3s;
               box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
           }

           .project a:hover,
           .service a:hover {
               background: #0a0a0a3b;
               transform: scale(1.1);
           }

           /* التواصل */
           .contact {
               padding: 60px 0;
               background-color: #000000;
               text-align: center;
               color: #fdf8f8;
           }

           .contact-icons {
               display: flex;
               justify-content: center;
               margin-top: 20px;
               gap: 20px;
               font-size: 2rem;
           }

           .contact-icons i {
               margin: 0 15px;
               font-size: 2rem;
               cursor: pointer;
           }

           /* إخفاء Navbar عند التمرير */
           .navbar-hidden {
               top: -80px;
           }

           /* استايل الزر */
           .language-selector {
               background-color: rgb(0, 0, 0);
               padding: 3px;
               border-radius: 0px;
               color: #ffffff44;
               cursor: pointer;
               z-index: 2000;
           }

           .language-selector img {
               width: 3px;
               height: 3px;
               margin-right: 5px;
           }

           .language-selector:hover {
               background-color: #555;
           }

           .social-links {
               display: flex;
               gap: 10px;
               justify-content: center;
               margin-top: 20px;
           }

           .social-btn {
               background: rgba(255, 255, 255, 0.1);
               padding: 12px;
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               width: 50px;
               height: 50px;
               transition: all 0.3s ease-in-out;
               backdrop-filter: blur(5px);
               box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
           }

           .social-btn img {
               width: 30px;
               height: 30px;
               transition: transform 0.3s ease-in-out;
           }

           .social-btn:hover {
               background: rgba(255, 255, 255, 0.2);
               transform: translateY(-3px);
               box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
           }

           .social-btn:hover img {
               transform: scale(1.1);
           }

           .social-icon {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 50px;
               height: 50px;
               border-radius: 50%;
               background: rgba(255, 255, 255, 0.884);
               backdrop-filter: blur(10px);
               box-shadow: 0px 4px 10px rgba(0, 255, 255, 0.5);
               transition: 0.3s;
               font-size: 24px;
               color: rgb(0, 0, 0);
               text-decoration: none;
           }

           .social-icon:hover {
               transform: scale(1.1);
               box-shadow: 0px 4px 15px rgba(0, 255, 255, 0.8);
           }

           .facebook:hover {
               background: #1877F2;
           }

           .github:hover {
               background: #333;
           }

           .linkedin:hover {
               background: #0A66C2;
           }

           .whatsapp:hover {
               background: #25D366;
           }

           #contact {
               text-align: center;
               padding: 50px 20px;
           }

           /* Responsive Design */
           @media (max-width: 1200px) {

               .project,
               .service {
                   width: 45%;
               }
           }

           @media (max-width: 768px) {

               .project,
               .service {
                   width: 100%;
               }

               .hero h2 {
                   font-size: 2rem;
               }

               .hero p {
                   font-size: 1rem;
               }

               .btn {
                   font-size: 14px;
                   padding: 8px 20px;
               }

               nav ul {
                   flex-direction: column;
               }

               nav ul li {
                   margin: 10px 0;
               }

               .contact-icons {
                   flex-direction: column;
                   font-size: 1.5rem;
               }
           }

           /* Small devices */
           @media (max-width: 480px) {
               .hero h2 {
                   font-size: 1.5rem;
               }

               .btn {
                   font-size: 12px;
                   padding: 6px 15px;
               }
           }


           /* إخفاء Navbar عند التمرير */
           .navbar-hidden {
               top: -80px;
           }

           /* استايل الزر */
           .language-selector {
               background-color: rgb(0, 0, 0);
               padding: 3px;
               border-radius: 0px;
               color: #ffffff44;
               cursor: pointer;
               z-index: 2000;
           }

           .language-selector img {
               width: 3px;
               height: 3px;
               margin-right: 5px;
           }

           .language-selector:hover {
               background-color: #555;
           }

           .language-selector:hover {
               background-color: #555;
           }

           .social-links {
               display: flex;
               gap: 10px;
               justify-content: center;
               margin-top: 20px;
           }

           .social-btn {
               background: rgba(255, 255, 255, 0.1);
               padding: 12px;
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               width: 50px;
               height: 50px;
               transition: all 0.3s ease-in-out;
               backdrop-filter: blur(5px);
               box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
           }

           .social-btn img {
               width: 30px;
               height: 30px;
               transition: transform 0.3s ease-in-out;
           }

           .social-btn:hover {
               background: rgba(255, 255, 255, 0.2);
               transform: translateY(-3px);
               box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
           }

           .social-btn:hover img {
               transform: scale(1.1);
           }

           .social-links {
               display: flex;
               justify-content: center;
               gap: 15px;
               margin-top: 20px;
           }

           .social-icon {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 50px;
               height: 50px;
               border-radius: 50%;
               background: rgba(255, 255, 255, 0.884);
               backdrop-filter: blur(10px);
               box-shadow: 0px 4px 10px rgba(0, 255, 255, 0.5);
               transition: 0.3s;
               font-size: 24px;
               color: rgb(0, 0, 0);
               text-decoration: none;
           }

           .social-icon:hover {
               transform: scale(1.1);
               box-shadow: 0px 4px 15px rgba(0, 255, 255, 0.8);
           }

           .facebook:hover {
               background: #1877F2;
           }

           .github:hover {
               background: #333;
           }

           .linkedin:hover {
               background: #0A66C2;
           }

           .whatsapp:hover {
               background: #25D366;
           }

           #contact {
               text-align: center;
               padding: 50px 20px;
           }

           nav ul {
               list-style: none;
               padding: 0;
               display: flex;
           }

           nav {
               display: flex;
               justify-content: center;
               text-align: center;
               padding: 10px 0;
               width: 100%;
               position: fixed;
               top: 0;
               left: 0;
               z-index: 1000;
           }

           nav ul li {
               margin: 0 20px;
           }

           nav ul li a {
               text-decoration: none;
               color: rgb(240, 236, 236);
               font-size: 12px;
               font-weight: bold;
               position: relative;
               padding: 10px 15px;
               border-radius: 8px;
               display: flex;
               align-items: center;
               transition: 0.3s;
           }

           nav ul li a::before {
               content: "";
               position: absolute;
               inset: 0;
               background: linear-gradient(90deg, rgb(7, 7, 7), rgb(192, 192, 192));
               z-index: -1;
               border-radius: 8px;
               transform: scaleX(0);
               transform-origin: left;
               transition: transform 0.3s ease-in-out;
           }

           nav ul li a:hover::before {
               transform: scaleX(1);
           }

           nav ul li a i {
               margin-right: 10px;
               font-size: 20px;
               color: rgb(238, 234, 234);
               transition: 0.3s;
           }

           nav ul li a:hover i {
               transform: rotate(360deg);
               color: #B0C4DE;
           }

           .profile-img {
               width: 100px;
               height: 100px;
               border-radius: 100%;
               box-shadow: 0px 4px 20px rgba(0, 255, 255, 0.5);
               transition: transform 0.3s;
           }

           /* قسم الخدمات */
           .services {
               padding: 60px 0;
               background-color: #000000;
               color: #faf8f8;
           }

           .services h3 {
               text-align: center;
               font-size: 2.5rem;
               margin-bottom: 40px;
           }

           .service-grid {
               display: flex;
               justify-content: space-around;
               gap: 20px;
               flex-wrap: wrap;
               margin-top: 30px;
           }

           
           .service:hover {
               transform: scale(1.05);
               box-shadow: 0 4px 15px rgba(0, 255, 255, 0.6);
           }

           .service h4 {
               font-size: 1.8rem;
               margin-bottom: 15px;
               color: #f5f2f2;
           }

           .service p {
               color: #f5f2f2;
               font-size: 1rem;
           }

           .service a {
               display: inline-block;
               margin-top: 20px;
               padding: 10px 25px;
               background: #91929479;
               color: white;
               text-decoration: none;
               border-radius: 8px;
               font-weight: bold;
               transition: 0.3s;
               box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
           }

           .service a:hover {
               background: #0a0a0a3b;
               transform: scale(1.1);
           }