/* ===================== Theme Variables ===================== */ :root { /* Colors Light Mode */ --bg-color: #f7f7f7; --card-bg: #ffffff; --text-color: #222; --box-shadow: rgba(0,0,0,0.1); /* Brand Colors */ --primary-color: #e67e22; --primary-hover: #cf6c15; } /* Dark Mode Overrides */ body.dark-mode { --bg-color: #121212; --card-bg: #1e1e1e; --text-color: #eee; --box-shadow: rgba(255,255,255,0.08); } /* ===================== إعدادات عامة + خطوط عربية وإنجليزية ===================== */ /* استيراد الخطوط من Google Fonts (ضع هذا في داخل HTML) */ /* Cairo للغة العربية، Poppins للإنجليزية */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* الخط والاتجاه العام حسب اللغة */ html[lang="ar"] body { direction: rtl; font-family: 'Cairo', sans-serif; } html[lang="en"] body { direction: ltr; font-family: 'Poppins', sans-serif; } body { background-color: #f9f9f9; color: #333; line-height: 1.6; font-size: 16px; } /* نصوص وعناوين متناسقة */ h1,h2,h3,h4,h5,h6 { font-weight: 500; line-height: 1.3; } /* الروابط والأزرار تأخذ نفس الخط */ a, button, input, textarea, select { font-family: inherit; text-decoration: none; color: inherit; transition: 0.3s; } a:hover, button:hover { color: #e67e22; } /* نصوص داخل عناصر الكاتالوج أو القوائم */ .catalog-item, .menu-items, .service-box, .testimonial-item { font-family: inherit; } /* ===================== Navbar Base ===================== */ .navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 15px 30px; background: transparent; display: flex; justify-content: space-between; align-items: center; z-index: 999; transition: background 0.3s ease, box-shadow 0.3s ease; } .navbar.scrolled { background: rgba(0,0,0,0.85); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .language-toggle { margin-left: 20px; } .language-toggle button { background: none; border: none; font-size: 14px; font-weight: bold; cursor: pointer; color: #fff; transition: color 0.3s ease; } .language-toggle button:hover { color: #ff6600; /* لون عند التمرير */ } /* ===================== Animations ===================== */ @keyframes fadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} } /* الشعار */ /* الشعار النصي */ .navbar .logo { font-size: 1.5rem; font-weight: bold; transition: color 0.3s ease; } /* الشعار الأصلي (الصورة) */ .hero-logo { height: 50px; /* حجم ثابت */ width: auto; /* يحافظ على التناسق */ } /* حاوية اللوقو + Libya */ .logo-container { display: flex; align-items: center; gap: 8px; /* مسافة بين اللوقو وكلمة Libya */ } /* كلمة Libya */ .branch-name { font-size: 18px; font-weight: bold; color: #ffffff; /* أبيض باش يبان فوق الخلفية */ letter-spacing: 1px; } /* الروابط */ .nav-links { display: flex; list-style: none; gap: 20px; } .nav-links li a { font-weight: bold; transition: color 0.3s ease; } /* زر القائمة للموبايل */ .menu-toggle { display: none; font-size: 2rem; cursor: pointer; transition: color 0.3s ease; } /* ===== Light Mode ===== */ body:not(.dark-mode) .navbar .logo, body:not(.dark-mode) .nav-links li a, body:not(.dark-mode) .menu-toggle { color: #ffffff; /* غامق حتى يبان على خلفية فاتحة */ } body:not(.dark-mode) .navbar.scrolled .logo, body:not(.dark-mode) .navbar.scrolled .nav-links li a, body:not(.dark-mode) .navbar.scrolled .menu-toggle { color: #fff; /* أبيض لما يصير الشريط غامق */ } /* ===== Dark Mode ===== */ body.dark-mode .navbar .logo, body.dark-mode .nav-links li a, body.dark-mode .menu-toggle { color: #fff; /* أبيض دائمًا */ } /* ===================== Hero Section ===================== */ .hero-section { position: relative; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; } .hero-section video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .hero-content { color: #fff; z-index: 1; animation: fadeIn 2s ease-in-out; } /* الصندوق الشفاف حول النصوص والأزرار */ .hero-overlay { background: rgba(0, 0, 0, 0.4); padding: 25px 35px; border-radius: 12px; display: inline-block; } .hero-overlay h1 { font-size: 3rem; margin-bottom: 15px; } .hero-overlay p { font-size: 1.3rem; margin-bottom: 20px; } .cta-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; } .cta-btn { background-color: #e67e22; padding: 12px 25px; border-radius: 6px; color: #fff; font-weight: bold; transition: 0.3s ease; } .cta-btn:hover { background-color: #cf711f; transform: translateY(-3px); } /* ===================== Sections Common ===================== */ .section { padding: 80px 20px; max-width: 1200px; margin: auto; text-align: center; opacity: 0; transform: translateY(30px); transition: all 0.8s ease-in-out; } .section.visible { opacity: 1; transform: translateY(0); } .section h2 { font-size: 2rem; margin-bottom: 20px; color: #222; } .section p { max-width: 800px; margin: auto; font-size: 1.1rem; color: #555; } /* ===================== Services Section (خدماتنا) ===================== */ /* ===================== Services Section (خدماتنا) ===================== */ .services-showcase { text-align: center; padding: 60px 20px; background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%); } .section-subtitle { font-size: 18px; color: #666; margin-bottom: 40px; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .service-box { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 6px 15px rgba(0,0,0,0.1); } .service-box img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .service-box:hover img { transform: scale(1.05); } /* ===== النص فوق الصورة ===== */ .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); color: #fff; /* أبيض واضح في الوضع الفاتح */ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; opacity: 0; transition: opacity .4s ease; } .service-box:hover .overlay { opacity: 1; } .overlay h3 { font-size: 22px; margin-bottom: 10px; color: #fff; /* أبيض دائم */ } .overlay p { font-size: 15px; margin-bottom: 15px; color: #f1f1f1; /* أبيض فاتح */ } .overlay .btn.small { background: #e67e22; padding: 8px 15px; border-radius: 6px; text-decoration: none; color: #fff; transition: 0.3s; } .overlay .btn.small:hover { background: #f67f00; } /* ===== وضع الهاتف ===== */ @media (max-width: 768px) { .services-showcase { padding: 40px 15px; } .overlay h3 { font-size: 18px; } .overlay p { font-size: 14px; } .overlay .btn.small { padding: 6px 12px; font-size: 13px; } } /* ===== وضع داكن ===== */ body.dark-mode .services-showcase { background: linear-gradient(180deg, #1b1b1b 0%, #121212 100%); } body.dark-mode .overlay { background: rgba(0, 0, 0, 0.5); color: #fff; } body.dark-mode .overlay h3, body.dark-mode .overlay p { color: #fff; } body.dark-mode .section-subtitle { color: #fff !important; } /* ===== شبكة 2x2 لقسم الخدمات (مناسبة للابتوب والشاشات الكبيرة) ===== */ @media (min-width: 1024px) { .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* عمودين فقط */ gap: 25px; /* مسافة متناسقة بين المربعات */ justify-items: center; align-items: stretch; } .service-box { width: 100%; max-width: 520px; /* يضبط حجم المربعات لتكون متوسطة */ aspect-ratio: 1 / 1; /* يجعل كل مربع متساوي (مربع تماماً) */ border-radius: 16px; overflow: hidden; position: relative; } .service-box img { width: 100%; height: 100%; object-fit: cover; } .overlay h3 { font-size: 22px; } .overlay p { font-size: 15px; max-width: 90%; } .overlay .btn.small { padding: 8px 16px; font-size: 14px; } } /* ===================== About Section (Version 2) ===================== */ /* ===== About Section (No Image Version) ===== */ .about-section.no-image { background: var(--section-bg); padding: 80px 20px; text-align: center; } .about-container { max-width: 900px; margin: 0 auto; } .about-content h2 { font-size: 2rem; color: var(--primary-color); margin-bottom: 20px; } .about-content p { color: var(--text-color); line-height: 1.8; font-size: 1rem; margin-bottom: 15px; } /* القيم */ .about-values { display: flex; justify-content: center; gap: 30px; margin: 40px 0; flex-wrap: wrap; } .value-item { background: var(--card-bg); box-shadow: 0 4px 15px var(--shadow-color); border-radius: 12px; padding: 20px 25px; text-align: center; transition: transform 0.3s ease; width: 180px; } .value-item:hover { transform: translateY(-8px); } .value-item i { font-size: 1.8rem; color: var(--primary-color); margin-bottom: 10px; } .value-item span { display: block; font-weight: 600; color: var(--text-color); } /* الزر */ /* ===== زر جذاب وواضح ===== */ .highlight-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--primary-color), #ff9b3d); color: #fff; padding: 14px 36px; border-radius: 50px; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.5px; box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4); transition: all 0.35s ease; } .highlight-btn:hover { background: linear-gradient(135deg, #ff9b3d, var(--primary-color)); transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 25px rgba(230, 126, 34, 0.5); } .highlight-btn i { font-size: 1rem; transition: transform 0.3s ease; } .highlight-btn:hover i { transform: translateX(5px); } /* معرض الصور داخل الخدمات */ .service-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin: 10px 0; } .service-images img { width: 100%; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-images img:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* الوضع الداكن */ body.dark-mode .service-box { background: #2b2b2b; color: #f5f5f5; } body.dark-mode .service-images img { filter: brightness(1); } /* ===================== Catalogs Section ===================== */ .catalogs-section { text-align: center; padding: 50px 20px; } .catalogs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; } .catalog-item { background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 20px; transition: transform 0.3s ease; /* الإضافات الجديدة */ display: flex; flex-direction: column; justify-content: space-between; align-items: center; /* يجعل الزر والصورة والنص في المنتصف */ } .catalog-item:hover { transform: translateY(-5px); } .catalog-item img { width: 100%; border-radius: 8px; margin-bottom: 15px; } .catalog-item h3 { margin: 10px 0; font-size: 18px; min-height: 48px; /* يضمن توازن الارتفاع */ } .catalog-item .btn { display: inline-block; margin-top: 10px; padding: 10px 15px; background: #e67e22; color: #fff; border-radius: 6px; text-decoration: none; transition: background 0.3s ease; } .catalog-item .btn:hover { background: #f67f00; } /* ===== Blog Section ===== */ .blog-section { text-align: center; padding: 60px 20px; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 30px; } .blog-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); } .blog-card img { width: 100%; /* عرض الصورة كامل */ height: auto; /* الارتفاع يتغير تلقائياً حسب العرض */ max-height: 250px; /* أقصى ارتفاع للصورة */ object-fit: cover; /* تغطي الكارد بدون تشويه */ border-top-left-radius: 16px; /* تتماشى مع الكارد */ border-top-right-radius: 16px; } /* ===== Media Query للشاشات الصغيرة ===== */ @media (max-width: 768px) { .blog-card img { max-height: 180px; /* ارتفاع أصغر للشاشات الصغيرة */ } } .blog-card-content { padding: 18px; flex: 1; display: flex; flex-direction: column; } .blog-card h3 { font-size: 1.2rem; margin-bottom: 10px; } .blog-card p { flex: 1; font-size: 0.95rem; color: #666; } /* زر المدونة - متناسق مع باقي الأزرار */ .blog-card .btn { margin-top: 14px; padding: 10px 18px; border: none; border-radius: 6px; background: var(--primary-color, #e67e22); color: #fff; font-size: 0.95rem; cursor: pointer; transition: background 0.25s, transform 0.2s; } .blog-card .btn:hover { background: var(--primary-hover, #cf6c15); transform: translateY(-2px); } /* دعم الوضع الداكن */ /* ===== Blog Dark Mode ===== */ body.dark-mode .blog-card { background: #1e1e1e; color: #eee; /* خلي النص أوضح */ } body.dark-mode .blog-card h3 { color: #fff; /* العنوان أبيض */ } body.dark-mode .blog-card p { color: #ccc; /* الوصف رمادي فاتح */ } /* ===== Blog Modal ===== */ .blog-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 9999; } .blog-modal.active { opacity: 1; pointer-events: all; } .blog-modal-content { background: #fff; border-radius: 12px; max-width: 900px; width: 92%; max-height: 90vh; overflow: auto; padding: 22px; position: relative; } .blog-modal-content img { width: 100%; height: auto; margin-bottom: 12px; } .close-modal { position: absolute; top: 12px; right: 14px; border: none; background: transparent; font-size: 1.8rem; cursor: pointer; } body.modal-open { overflow: hidden; } /* مودال المقالات */ #blog-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); /* خلفية نصف شفافة */ display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 10000; } #blog-modal.active { opacity: 1; visibility: visible; } #blog-modal .modal-inner { background: #fff; /* اللون الافتراضي */ padding: 25px; max-width: 700px; width: 90%; border-radius: 12px; overflow-y: auto; max-height: 90%; color: #333; /* لون النص الافتراضي */ transition: background 0.3s, color 0.3s; } /* الوضع الداكن */ body.dark-mode #blog-modal .modal-inner { background: #1e1e1e; /* خلفية داكنة */ color: #f1f1f1; /* لون نص فاتح */ } /* زر الإغلاق */ #blog-modal .close-modal { cursor: pointer; font-size: 24px; font-weight: bold; position: absolute; top: 15px; right: 20px; color: inherit; /* يتغير مع الوضع الداكن */ } /* الوضع الداكن للمودال */ body.dark-mode #blog-modal .modal-inner { background: #1e1e1e; /* خلفية داكنة */ color: #f1f1f1; /* لون نص فاتح */ } body.dark-mode #blog-modal .close-modal { color: #f1f1f1; /* زر الإغلاق أبيض في الوضع الداكن */ } /* زر "اقرأ المزيد" داخل المودال إذا أردت */ body.dark-mode #blog-modal .modal-inner .btn { background: #e67e22; /* برتقالي */ color: #fff; } /* ===== User Ratings Section Styles ===== */ /* ===== قسم تقييم المستخدمين ===== */ .user-ratings-section { text-align: center; padding: 60px 20px; background: #fff; /* White background in light mode */ color: #222; /* Dark text in light mode */ } .user-ratings-section h2 { font-size: 2rem; margin-bottom: 20px; color: #222; /* عنوان داكن في الوضع الفاتح */ } /* Stars / النجوم */ .rating-stars { display: flex; justify-content: center; gap: 10px; font-size: 2.5rem; cursor: pointer; } .rating-stars span { color: #ccc; /* Default color for stars */ transition: color 0.3s; } .rating-stars span.hover, .rating-stars span.selected { color: #e67e22; /* Highlight color */ } /* Text below stars / النص تحت النجوم */ .rating-text { margin-top: 15px; font-size: 1.1rem; color: #555; } /* ===== Dark Mode for User Ratings Section ===== */ /* ===== الوضع الداكن لقسم تقييم المستخدمين ===== */ body.dark-mode .user-ratings-section { background: #1f1f1f; /* Dark background like contact section */ color: #f5f5f5; /* Light text for readability */ } body.dark-mode .user-ratings-section h2 { color: #fff; /* Title white in dark mode */ } body.dark-mode .rating-stars span { color: #555; /* Default star color in dark mode */ } body.dark-mode .rating-stars span.hover, body.dark-mode .rating-stars span.selected { color: #ffb74d; /* Highlight stars in dark mode */ } body.dark-mode .rating-text { color: #ccc; /* Text below stars in light grey */ } /* ===================== Dark Mode ===================== */ body.dark-mode .testimonial-section { background: #1f1f1f; color: #f5f5f5; } body.dark-mode .testimonial-item { background: #2b2b2b; color: #f5f5f5; } body.dark-mode .testimonial-item h3 { color: #ffb74d; } body.dark-mode .testimonial-item p { color: #ddd; } /* ===== Responsive ===== */ @media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } } /* ===================== Floating Dark Mode Toggle ===================== */ #darkModeToggle { position: fixed; bottom: 20px; right: 20px; background: var(--primary-color); color: #fff; border: none; padding: 10px 12px; border-radius: 50%; cursor: pointer; font-size: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 99999; transition: transform .18s ease, background .18s ease; } #darkModeToggle:hover { transform: translateY(-3px); background: var(--primary-hover); } /* شكل الزر في الوضع الداكن */ body.dark-mode #darkModeToggle { background: #ffb74d; /* لون برتقالي فاتح يتوافق مع الداكن */ color: #1f1f1f; } /* إصلاح ألوان نصوص صفحات الخِدْمات (لو لزم): */ body.dark-mode .service-detail, body.dark-mode .service-detail h2, body.dark-mode .service-detail p { color: #f1f1f1; } /* تأكيد إزالة نقاط القوائم (nav) لو ظهرت */ .nav-links { list-style: none; padding: 0; margin: 0; } .nav-links li { list-style: none; } /* ===================== FAQ Section Minimal ===================== */ .faq-section { background: #fff; padding: 60px 20px; text-align: center; } body.dark-mode .faq-section { background: #1f1f1f; } .faq-section h2 { font-size: 2rem; margin-bottom: 40px; color: #222; } body.dark-mode .faq-section h2 { color: #fff; } .faq-item { max-width: 800px; margin: 15px auto; background: #f9f9f9; border-radius: 12px; padding: 20px 25px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; } body.dark-mode .faq-item { background: #2b2b2b; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .faq-item:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); } .faq-question { font-size: 1.2rem; color: #222; transition: color 0.3s ease; display: flex; justify-content: space-between; align-items: center; } body.dark-mode .faq-question { color: #fff; } .faq-item.is-open .faq-question { color: #e67e22; /* لون برتقالي عند الفتح */ } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.35s ease; padding: 0; opacity: 0; color: #444; line-height: 1.7; } body.dark-mode .faq-answer { color: #ccc; } .faq-item.is-open .faq-answer { padding-top: 15px; opacity: 1; } .faq-question::after { content: "▼"; /* سهم للأسفل */ font-size: 1rem; transition: transform 0.35s ease; } .faq-item.is-open .faq-question::after { transform: rotate(180deg); /* السهم يتحرك عند الفتح */ } /* موبايل */ @media (max-width: 768px) { .faq-item { padding: 15px; } .faq-question { font-size: 1rem; } } /* ===== Contact Section ===== */ .contact-section { text-align: center; padding: 60px 20px; background: #fdfdfd; color: #333; } .contact-section h2 { font-size: 2rem; margin-bottom: 8px; } .contact-section p { font-size: 1rem; margin-bottom: 25px; color: #666; } /* أيقونات التواصل */ .contact-icons { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; } .contact-icons a { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #e67e22; color: #fff; font-size: 1.3rem; transition: transform 0.2s, background 0.25s; } .contact-icons a:hover { transform: translateY(-3px); background: #cf6c15; } /* الفورم */ .contact-form { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; resize: none; transition: border 0.25s, background 0.25s, color 0.25s; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #e67e22; } .contact-form button { padding: 12px 20px; background: #e67e22; color: #fff; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background 0.25s, transform 0.2s; } .contact-form button:hover { background: #cf6c15; transform: translateY(-2px); } /* ===== الوضع الداكن ===== */ body.dark-mode .contact-section { background: #1e1e1e; color: #eee; } body.dark-mode .contact-section p { color: #ccc; } body.dark-mode .contact-icons a { background: #e67e22; color: #fff; } body.dark-mode .contact-icons a:hover { background: #cf6c15; } body.dark-mode .contact-form input, body.dark-mode .contact-form textarea { background: #2a2a2a; color: #f1f1f1; border: 1px solid #555; } body.dark-mode .contact-form input:focus, body.dark-mode .contact-form textarea:focus { border-color: #e67e22; } body.dark-mode .contact-form button { background: #e67e22; color: #fff; } body.dark-mode .contact-form button:hover { background: #cf6c15; } /* ===== Media Queries ===== */ @media (max-width: 768px) { .contact-icons { gap: 15px; } .contact-icons a { width: 45px; height: 45px; font-size: 1.1rem; } .contact-form { gap: 12px; } } /* ===================== Footer ===================== */ footer { background:#222; color:#fff; text-align:center; padding:15px; font-size:0.9rem; } /* ===================== Mobile ===================== */ @media (max-width:768px){ .nav-links { display:none; flex-direction:column; position:absolute; top:70px; left:0; width:100%; background:rgba(0,0,0,0.9); padding:20px; } .nav-links.active { display:flex; } .menu-toggle { display:block; } .catalogs-grid { grid-template-columns:1fr; } } /* ===================== Loader ===================== */ #loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(3px); transition: opacity 0.5s ease; } .loader-text { font-size: 3rem; font-weight: bold; color: #e67e22; letter-spacing: 2px; } body.loaded #loader-overlay { opacity: 0; pointer-events: none; } /* ===================== Dark Mode ===================== */ body.dark-mode { background:#1f1f1f; color:#f5f5f5; } /* Navbar & Hero Dark Mode */ body.dark-mode .navbar { background:rgba(31,31,31,0.95); } body.dark-mode .hero-overlay h1, body.dark-mode .hero-overlay p, body.dark-mode #about h2, body.dark-mode #services h2, body.dark-mode #gallery h2, body.dark-mode #catalogs h2, body.dark-mode #testimonials h2, body.dark-mode .blog-section h2, body.dark-mode #faq h2, body.dark-mode #contact h2 { color:#fff; } /* Buttons Dark Mode */ body.dark-mode .cta-btn, body.dark-mode .btn { background:#ffb74d; color:#1f1f1f; } /* Sections Dark Mode */ body.dark-mode .service-box, body.dark-mode .catalog-item, body.dark-mode .testimonial-item, body.dark-mode .faq-question, body.dark-mode .blog-item { background:#2b2b2b; color:#f5f5f5; } body.dark-mode .faq-answer { color:#e0e0e0; } /* Images Dark Mode */ body.dark-mode .gallery-grid img, body.dark-mode .catalog-item img, body.dark-mode .service-box img { filter: brightness(1); } /* Blog Dark Mode */ body.dark-mode .blog-section { background-color:#1f1f1f; color:#f5f5f5; } body.dark-mode .blog-item h3 { color:#fff; } body.dark-mode .blog-item p { color:#ccc; } body.dark-mode .blog-more .btn { background-color:#ffb74d; color:#1f1f1f; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); /* خلفية داكنة */ display: none; justify-content: center; align-items: center; z-index: 10000; } .modal.active { display: flex; } .modal-inner { background: #fff; padding: 20px; border-radius: 10px; max-width: 800px; width: 90%; max-height: 90%; overflow-y: auto; position: relative; } .close-modal { position: absolute; top: 10px; right: 15px; font-size: 25px; cursor: pointer; } body.modal-open { overflow: hidden; /* يمنع التمرير */ } .image-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 10000; } .image-modal .modal-inner { position: relative; max-width: 90%; max-height: 90%; } .image-modal .modal-inner img { width: 100%; height: auto; border-radius: 12px; } .image-modal .close { position: absolute; top: 10px; right: 15px; font-size: 28px; color: #fff; cursor: pointer; } /* ===== Services Grid ===== */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 30px; } .service-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-align: center; transition: transform 0.25s ease; } .service-card:hover { transform: translateY(-6px); } .service-card img { width: 100%; height: 200px; object-fit: cover; } .service-card h3 { margin: 14px 0 8px; } .service-card p { color: #666; padding: 0 12px 16px; } /*تعديل شكل الكارد والمسافة*/ .services-grid { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; /* يجعل كل الكاردات في الوسط */ } .service-card { background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; flex-direction: column; /* يجعل الكارد عمودي */ justify-content: space-between; /* يضع المحتوى في الأعلى والزَر أسفل */ width: 300px; /* أو حسب التصميم */ min-height: 400px; /* يوحد ارتفاع كل الكاردات */ padding: 15px; } .service-card h3 { margin-top: 10px; margin-bottom: 10px; } .service-card p { flex-grow: 1; /* يجعل الفقرة تشغل مساحة متساوية في كل كارد */ } .service-card .btn { margin-top: 10px; /* دائمًا في الأسفل */ } /* ===== Service Detail Page ===== */ .service-detail .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 20px 0; } .service-detail .gallery img { width: 100%; border-radius: 12px; object-fit: cover; } .back-btn { margin-top: 20px; text-align: center; } .back-btn .btn { background: #e67e22; color: #fff; padding: 10px 18px; border-radius: 6px; text-decoration: none; } .back-btn .btn:hover { background: #cf6c15; } /* ===== توافق المودال مع الوضع العادي والداكن ===== */ .image-modal { background: rgba(0,0,0,0.7); } .image-modal .modal-inner { background: #fff; /* خلفية بيضاء للوضع العادي */ padding: 10px; border-radius: 12px; } .image-modal .modal-inner h3, .image-modal .modal-inner p { color: #000; /* النصوص سوداء في الوضع العادي */ } /* الوضع الداكن */ .dark-mode .image-modal .modal-inner { background: #222; /* خلفية داكنة */ } .dark-mode .image-modal .modal-inner h3, .dark-mode .image-modal .modal-inner p { color: #fff; /* النصوص بيضاء في الوضع الداكن */ } /* ===================== About Section Dark Mode ===================== */ body.dark-mode .about-container { background: #2b2b2b; /* خلفية داكنة */ color: #f5f5f5; /* نص فاتح */ } body.dark-mode .about-content h2 { color: #fff; /* العنوان أبيض */ } body.dark-mode .about-content p { color: #ccc; /* النص رمادي فاتح */ } body.dark-mode .value-item { color: #eee; /* نص القيم */ } body.dark-mode .value-item i { color: #e67e22; /* الأيقونة تبقى برتقالية */ } /* ===================== Blog Modal نصوص وصور ===================== */ body.dark-mode #blog-modal .modal-inner h3, body.dark-mode #blog-modal .modal-inner p { color: #f1f1f1; /* النصوص واضحة */ } /* ===================== Service Box النصوص والصور ===================== */ body.dark-mode .service-box h3, body.dark-mode .service-box p { color: #f1f1f1; } /* ===================== Image Modal النصوص ===================== */ .dark-mode .image-modal .modal-inner h3, .dark-mode .image-modal .modal-inner p { color: #fff; /* النصوص بيضاء */ } /* ===================== Footer ===================== */ footer { direction: rtl; /* اتجاه الكتابة من اليمين لليسار */ text-align: center; /* توسيط النص */ background: #f5f5f5; /* خلفية فاتحة افتراضية */ padding: 15px; font-size: 0.95rem; color: #333; } /* الوضع الداكن للتذييل */ body.dark-mode footer { background: #1e1e1e; /* خلفية داكنة */ color: #eee; /* نص فاتح */ } /* ===================== توحيد شكل كل الأزرار ===================== */ /* جميع الأزرار المتوافقة في اللون، الشكل، والحركة */ .cta-btn, .btn, .blog-card .btn, .catalog-item .btn, .back-btn .btn { background-color: #e67e22; /* اللون البرتقالي الأساسي */ color: #fff; padding: 12px 25px; border-radius: 6px; font-weight: bold; border: none; cursor: pointer; text-decoration: none; transition: background 0.3s ease, transform 0.3s ease; display: inline-block; text-align: center; } .cta-btn:hover, .btn:hover, .blog-card .btn:hover, .catalog-item .btn:hover, .back-btn .btn:hover { background-color: #cf711f; /* لون عند المرور */ transform: translateY(-3px); /* رفع الزر قليلاً عند المرور */ } /* الوضع الداكن للأزرار */ body.dark-mode .cta-btn, body.dark-mode .btn, body.dark-mode .blog-card .btn, body.dark-mode .catalog-item .btn, body.dark-mode .back-btn .btn { background-color: #ffb74d; /* برتقالي فاتح */ color: #1f1f1f; } body.dark-mode .cta-btn:hover, body.dark-mode .btn:hover, body.dark-mode .blog-card .btn:hover, body.dark-mode .catalog-item .btn:hover, body.dark-mode .back-btn .btn:hover { background-color: #e67e22; color: #fff; } .image-modal { display: none; /* مخفي عند التحميل */ } .image-modal.active { display: flex; /* يظهر عند التفعيل */ } /* زر الترجمة من Google */ #google_translate_element { margin-left: 15px; } .goog-te-gadget { font-size: 14px; color: #fff !important; } .goog-te-gadget select { padding: 5px; border-radius: 6px; border: none; } /* زر اختيار اللغة */ .language-dropdown { position: relative; display: inline-block; font-size: 14px; cursor: pointer; color: #fff; user-select: none; margin-left: 15px; } .language-dropdown span { padding: 6px 12px; background-color: rgba(0, 0, 0, 0.5); border-radius: 6px; transition: background-color 0.3s ease; } .language-dropdown span:hover { background-color: #e67e22; } /* القائمة المنسدلة للغات */ .language-menu { display: none; position: absolute; top: 100%; left: 0; background-color: rgba(0, 0, 0, 0.85); border-radius: 6px; list-style: none; padding: 5px 0; margin: 5px 0 0 0; min-width: 100px; z-index: 1000; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .language-menu.show { display: block; } .language-menu li { padding: 8px 12px; color: #fff; cursor: pointer; transition: background-color 0.2s ease; } .language-menu li:hover { background-color: #e67e22; } /* تنسيق شريط التنقل */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; } /* روابط التنقل */ .nav-links { display: flex; list-style: none; gap: 20px; align-items: center; } /* الهاتف */ @media (max-width: 768px) { .nav-links { flex-direction: column; gap: 10px; display: none; } .menu-toggle { display: block; } .language-dropdown { margin-left: 0; margin-top: 10px; } .language-menu { position: static; background-color: transparent; box-shadow: none; border: none; } .language-menu li { background-color: rgba(0, 0, 0, 0.6); border-bottom: 1px solid #e67e22; } .language-menu li:hover { background-color: #e67e22; } } /* ===================== Blog Section ===================== */ .blog-section { padding: 50px 20px; background: #f9f9f9; } .blog-section .section-title { text-align: center; font-size: 2rem; margin-bottom: 40px; color: #333; } .blog-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; } .blog-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.15); } .blog-card img { width: 100%; height: 200px; object-fit: cover; } .blog-card-content { padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .blog-card-content h3 { margin: 10px 0; font-size: 1.3rem; color: #222; } .blog-card-content p { font-size: 0.95rem; color: #555; margin-bottom: 15px; line-height: 1.5; } .blog-card-content .btn { display: inline-block; align-self: flex-start; padding: 10px 16px; background: #e67e22; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 500; transition: background 0.3s, transform 0.3s; } .blog-card-content .btn:hover { background: #cf6d17; transform: scale(1.05); } /* Share buttons داخل المقال */ .blog-card-content .share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 0.9rem; color: #555; } .blog-card-content .share-buttons a { text-decoration: none; color: #fff; background: #3b5998; /* اللون الافتراضي لفيسبوك */ padding: 6px 12px; border-radius: 6px; transition: transform 0.3s; font-size: 0.85rem; } .blog-card-content .share-buttons a:nth-child(2) { background: #25d366; /* واتساب */ } .blog-card-content .share-buttons a:nth-child(3) { background: #1da1f2; /* تويتر */ } .blog-card-content .share-buttons a:hover { transform: scale(1.05); } /* Responsive */ @media (max-width: 768px) { .blog-card img { height: 180px; } .blog-card-content h3 { font-size: 1.1rem; } } @media (max-width: 480px) { .blog-card img { height: 150px; } .blog-card-content h3 { font-size: 1rem; } } .whatsapp-float { position: fixed; bottom: 20px; right: 20px; background: #25d366; color: white; padding: 12px 18px; border-radius: 50px; font-size: 1rem; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 999; } #copy-link-btn { background-color: #e67e22; color: white; border: none; padding: 8px 14px; border-radius: 5px; cursor: pointer; } #copy-link-btn:hover { background-color: #d35400; } /* ===== Statistics Section ===== */ .stats-section { text-align: center; background-color: #fff; /* خلفية بيضاء ناعمة بدل الرمادي الباهت */ padding: 80px 20px; } .stats-section h2 { font-size: 2rem; margin-bottom: 50px; color: #222; font-weight: 700; } /* شبكة الإحصائيات */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; /* مسافة متناسقة بدون فوضى */ justify-content: center; align-items: center; } /* كل عنصر (رقم + نص) */ .stat-box { text-align: center; padding: 20px; border-radius: 12px; transition: transform 0.3s ease, background-color 0.3s ease; } /* عند تمرير الماوس */ .stat-box:hover { transform: translateY(-5px); background-color: rgba(230, 126, 34, 0.05); /* ظل خفيف باللون الذهبي */ } /* النص المتدرج */ .text-gradient { background: linear-gradient(180deg, #e67e22, #e67e22 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3rem; font-weight: 700; display: inline-block; transition: transform 0.3s ease; } .text-gradient:hover { transform: scale(1.05); } /* النص تحت الرقم */ .stat-box p { margin-top: 10px; font-size: 1.1rem; color: #555; } /* ===== الوضع الداكن ===== */ body.dark-mode .stats-section { background-color: #1a1a1a; } body.dark-mode .stats-section h2 { color: #f5f5f5; } body.dark-mode .stat-box:hover { background-color: rgba(230, 126, 34, 0.1); } body.dark-mode .stat-box p { color: #ccc; } body.dark-mode .text-gradient { background: linear-gradient(180deg, #ffb347, #e67e22); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* شكل البرجر */ .menu-toggle { font-size: 2rem; cursor: pointer; transition: transform 0.3s ease; } /* عند الضغط عليه */ .menu-toggle.active { transform: rotate(90deg); /* دوران بسيط لإضافة حركة */ } /* يمكنك تحسينه أكثر لو أحببت رسم خطوط برجر حقيقي */ /* ===== قسم الموقع والخريطة ===== */ /* ===================== Location Section ===================== */ /* ===================== Location Section ===================== */ .location-section { padding: 80px 20px; background: var(--bg-color); color: var(--text-color); transition: all .3s ease; } .location-section .container { max-width: 1200px; margin: 0 auto; } .location-header { text-align: center; margin-bottom: 40px; } .location-header h2 { font-size: 2rem; margin-bottom: 6px; } .location-header p { color: var(--muted-color, #6b6b6b); font-size: 1rem; } /* المرونة: معلومات + خريطة جنباً إلى جنب */ .location-box { display: flex; gap: 28px; justify-content: center; align-items: stretch; flex-wrap: nowrap; margin-top: 20px; animation: fadeSlideUp 0.7s ease both; } /* الجانب المعلوماتي */ .location-info { background: var(--card-bg); padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); width: 38%; min-width: 300px; text-align: right; color: var(--text-color); display: flex; flex-direction: column; gap: 12px; transition: transform .3s, background .3s; } .location-info:hover { transform: translateY(-5px); } /* اسم العلامة باللون البرتقالي */ .brand-name { color: var(--primary-color, #e67e22); font-weight: 800; letter-spacing: 0.5px; } .location-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; } .location-line { font-size: 1rem; color: var(--text-color); } .location-line i { margin-left: 8px; color: var(--primary-color, #e67e22); } /* الأزرار */ .location-actions { margin-top: 20px; display: flex; justify-content: center; /* الزر في المنتصف */ } .btn { display: inline-block; padding: 10px 16px; background: var(--primary-color, #e67e22); color: #fff; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; font-weight: 600; transition: all .3s; } .btn:hover { background: #f67e00; } .btn.outline { background: transparent; color: var(--primary-color, #e67e22); border: 2px solid var(--primary-color, #e67e22); } .btn.outline:hover { background: var(--primary-color, #e67e22); color: #fff; } /* الخريطة */ .map-container { width: 62%; height: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: transform .3s; } .map-container iframe { width: 100%; height: 100%; border: none; } .map-container:hover { transform: scale(1.02); } /* الهواتف */ @media (max-width: 992px) { .location-box { flex-direction: column-reverse; gap: 18px; } .location-info, .map-container { width: 100%; } .map-container { height: 300px; } .location-actions { justify-content: center; } } /* أنيميشن */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* الوضع الداكن */ /* الوضع الداكن للعنوان الفرعي والرئيسي */ body.dark-mode .location-header h2, body.dark-mode .location-header p { color: #fff; } body.dark-mode .location-line { color: #ddd; } body.dark-mode .brand-name { color: #e67e22; } body.dark-mode .btn.outline { color: #e67e22; border-color: #e67e22; } body.dark-mode .btn.outline:hover { background: #e67e22; color: #fff; }