/* ==== خطوط جوجل (اختياري) ==== */  
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap'); /* مثال استخدام خط Cairo */  

/* ==== متغيرات CSS ==== */  
:root {  
    --header-height: 3.5rem;  

    /* --- الألوان --- */  
    /* (يمكنك تغيير هذه الألوان لتناسب هوية تطبيقك) */  
    --first-color: #007bff; /* أزرق أساسي */  
    --first-color-alt: #0056b3;  
    --title-color: #333;  
    --text-color: #555;  
    --text-color-light: #888;  
    --body-color: #f8f9fa;  
    --container-color: #fff;  
    --border-color: #dee2e6;  

    /* --- الخطوط والطباعة --- */  
    --body-font: 'Cairo', sans-serif; /* استخدام Cairo كخط أساسي */  
    --biggest-font-size: 2.25rem;  
    --h1-font-size: 1.75rem;  
    --h2-font-size: 1.25rem;  
    --h3-font-size: 1rem;  
    --normal-font-size: .938rem;  
    --small-font-size: .813rem;  
    --smaller-font-size: .75rem;  

    /* --- وزن الخط --- */  
    --font-regular: 400;  
    --font-semi-bold: 600;  
    --font-bold: 700;  

    /* --- هوامش سفلية --- */  
    --mb-0-5: .5rem;  
    --mb-1: 1rem;  
    --mb-1-5: 1.5rem;  
    --mb-2: 2rem;  
    --mb-2-5: 2.5rem;  

    /* --- Z-index --- */  
    --z-tooltip: 10;  
    --z-fixed: 100;  
}  

/* ==== الاستجابة (Responsive typography) ==== */  
@media screen and (min-width: 968px) {  
    :root {  
        --biggest-font-size: 3.5rem;  
        --h1-font-size: 2.5rem;  
        --h2-font-size: 1.5rem;  
        --h3-font-size: 1.25rem;  
        --normal-font-size: 1rem;  
        --small-font-size: .875rem;  
        --smaller-font-size: .813rem;  
    }  
}  

/* ==== الإعدادات الأساسية ==== */  
* {  
    box-sizing: border-box;  
    padding: 0;  
    margin: 0;  
}  

html {  
    scroll-behavior: smooth; /* <<--- هذا هو المسؤول عن التنقل السلس الأساسي */  
}  

body {  
    font-family: var(--body-font);  
    font-size: var(--normal-font-size);  
    background-color: var(--body-color);  
    color: var(--text-color);  
    line-height: 1.6;  
}  

h1, h2, h3, h4 {  
    color: var(--title-color);  
    font-weight: var(--font-semi-bold);  
}  

ul {  
    list-style: none;  
}  

a {  
    text-decoration: none;  
    color: var(--first-color);  
}  
a:hover {  
    color: var(--first-color-alt);  
}  

img {  
    max-width: 100%;  
    height: auto;  
    display: block; /* لإزالة المسافة السفلية */  
}  

/* ==== تنسيقات قابلة لإعادة الاستخدام ==== */  
.container {  
    max-width: 1024px;  
    margin-left: var(--mb-1-5);  
    margin-right: var(--mb-1-5);  
}  

.grid {  
    display: grid;  
    gap: 1.5rem;  
}  

.section {  
    padding: 4.5rem 0 2rem;  
}  

.section__title {  
    font-size: var(--h1-font-size);  
    color: var(--title-color);  
    text-align: center;  
    margin-bottom: var(--mb-2-5);  
}  

/* ==== الهيدر وشريط التنقل ==== */  
.header {  
    width: 100%;  
    background-color: var(--body-color);  
    position: fixed;  
    top: 0;  
    left: 0;  
    z-index: var(--z-fixed);  
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);  
    transition: background-color 0.3s; /* تأثير بسيط عند التمرير */  
}  

.nav {  
    height: var(--header-height);  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
}  

.nav__logo {  
    color: var(--title-color);  
    font-weight: var(--font-bold);  
}  

.nav__list {  
    display: flex;  
    column-gap: 2rem;  
}  

.nav__link {  
    color: var(--title-color);  
    font-weight: var(--font-semi-bold);  
    transition: color .3s;  
    position: relative; /* للتأثير السفلي */  
}  

.nav__link:hover,  
.nav__link.active-link { /* <<-- تنسيق الرابط النشط */  
    color: var(--first-color);  
}  

/* تأثير خط سفلي للرابط النشط أو عند المرور (اختياري) */  
.nav__link::after {  
    content: '';  
    position: absolute;  
    width: 0;  
    height: 2px;  
    background-color: var(--first-color);  
    left: 0;  
    bottom: -0.3rem;  
    transition: width 0.3s ease;  
}  

.nav__link:hover::after,  
.nav__link.active-link::after {  
    width: 60%; /* عرض الخط */  
}  

/* (ستحتاج إلى JavaScript و CSS إضافي لقائمة الموبايل إذا أردت زر toggle) */  

/* ==== زر عام ==== */  
.button {  
    display: inline-block;  
    background-color: var(--first-color);  
    color: #fff;  
    padding: 0.8rem 1.75rem;  
    border-radius: .5rem;  
    font-weight: var(--font-semi-bold);  
    transition: background-color .3s, transform 0.2s ease;  
    border: none;  
    cursor: pointer;  
}  

.button:hover {  
    background-color: var(--first-color-alt);  
    transform: translateY(-2px); /* تأثير رفع بسيط */  
    color: #fff; /* تأكيد لون النص عند المرور */  
}  

/* ==== قسم Home ==== */  
.home__container {  
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  
    align-items: center;  
    gap: 2rem;  
    padding-top: 2rem;  
}  

.home__data {  
    text-align: center; /* أو right إذا كنت تفضل */  
}  

.home__title {  
    font-size: var(--biggest-font-size);  
    margin-bottom: var(--mb-1);  
}  

.home__description {  
    margin-bottom: var(--mb-2);  
    color: var(--text-color-light);  
}  

.home__img {  
    width: 80%; /* تعديل الحجم حسب الحاجة */  
    justify-self: center; /* توسيط الصورة في الشبكة */  
    /* إضافة تأثير بسيط */  
    border-radius: 1rem;  
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);  
}  


/* ==== قسم About ==== */  
.about__container {  
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
    align-items: center;  
    gap: 2.5rem;  
}  
.about__img {  
     width: 80%;  
     justify-self: center;  
     order: 1; /* تغيير ترتيب الصورة في الشاشات الكبيرة */  
}  
.about__data {  
   text-align: start;  
}  
.about__description {  
    margin-bottom: var(--mb-1-5);  
}  
.about__list {  
    margin-top: var(--mb-1);  
}  
.about__list li {  
    margin-bottom: var(--mb-0-5);  
    display: flex;  
    align-items: center;  
    gap: 0.5rem;  
}  
.about__list li i {  
    color: var(--first-color);  
}  

/* ==== قسم How To ==== */  
.how-to__container {  
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
    gap: 2rem;  
    padding-top: 1rem;  
}  

.how-to__step {  
    background-color: var(--container-color);  
    padding: 1.5rem;  
    border-radius: .75rem;  
    text-align: center;  
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);  
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}  

.how-to__step:hover {  
    transform: translateY(-5px);  
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);  
}  

.step__icon {  
    font-size: 2.5rem; /* حجم الأيقونة */  
    color: var(--first-color);  
    margin-bottom: var(--mb-1);  
    display: block; /* أو inline-block للتوسيط */  
}  

.step__title {  
    font-size: var(--h3-font-size);  
    margin-bottom: var(--mb-0-5);  
}  

.step__description {  
    font-size: var(--small-font-size);  
}  

/* ==== قسم Privacy ==== */  
.privacy__container {  
    max-width: 800px; /* تحديد عرض أقصى لمحتوى الخصوصية */  
    margin: 0 auto; /* توسيط المحتوى */  
    padding: 1.5rem;  
    background-color: var(--container-color);  
    border-radius: .5rem;  
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);  
}  
.privacy__content h3 {  
    margin-top: var(--mb-1-5);  
    margin-bottom: var(--mb-0-5);  
    color: var(--first-color);  
}  
.privacy__content p {  
    margin-bottom: var(--mb-1);  
}  

/* ==== قسم Download ==== */  
.download__container {  
    text-align: center;  
    background-color: var(--container-color); /* لون خلفية مميز */  
    padding: 3rem 1.5rem;  
    border-radius: .75rem;  
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);  
}  

.download__description {  
    margin-bottom: var(--mb-2);  
}  

.download__buttons {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    gap: 1rem;  
    flex-wrap: wrap; /* للسماح بالالتفاف في الشاشات الصغيرة */  
}  

.download__button {  
    display: inline-flex; /* لمحاذاة الأيقونة والنص */  
    align-items: center;  
    gap: 0.5rem;  
    padding: 0.8rem 1.5rem;  
    background-color: #333; /* لون أغمق لأزرار التحميل */  
}  
.download__button:hover {  
     background-color: #555;  
}  
.download__button i {  
    font-size: 1.5rem; /* حجم أيقونة المتجر */  
}  

/* ==== قسم Contact ==== */  
.contact__container {  
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
    gap: 2rem;  
    align-items: flex-start; /* محاذاة العناصر للأعلى */  
}  
.contact__content {  
   /* التنسيقات الافتراضية جيدة */  
}  
.contact__title {  
   font-size: var(--h3-font-size);  
   margin-bottom: var(--mb-1);  
}  
.contact__description {  
   margin-bottom: var(--mb-1-5);  
}  
.contact__info p {  
    margin-bottom: var(--mb-0-5);  
    display: flex;  
    align-items: center;  
    gap: 0.5rem;  
}  
.contact__info i {  
    color: var(--first-color);  
}  

.contact__form {  
    display: flex;  
    flex-direction: column;  
    gap: 1rem;  
}  
.contact__form-div {  
    position: relative;  
    /* height: 4rem; */ /* يمكن تحديد ارتفاع أو تركه ديناميكيًا */  
    margin-bottom: var(--mb-0-5); /* تعديل المسافة إذا لزم الأمر */  
}  

.contact__form-input {  
    width: 100%;  
    padding: 1rem;  
    border: 1px solid var(--border-color);  
    border-radius: .5rem;  
    outline: none;  
    font-size: var(--normal-font-size);  
    font-family: var(--body-font);  
    color: var(--text-color);  
    background-color: #fff; /* تأكد من وجود خلفية */  
    transition: border-color 0.3s;  
}  
.contact__form-input:focus {  
    border-color: var(--first-color);  
}  

.contact__form-tag {  
    display: block; /* جعل الليبل فوق الحقل */  
    margin-bottom: var(--mb-0-5);  
    font-weight: var(--font-semi-bold);  
    font-size: var(--small-font-size);  
}  
textarea.contact__form-input {  
    resize: vertical; /* السماح بتغيير حجم حقل النص عموديًا فقط */  
    min-height: 120px;  
}  
.contact__button {  
    align-self: flex-start; /* جعل الزر يبدأ من اليمين */  
}  

/* ==== الفوتر ==== */  
.footer {  
    padding: 2rem 0;  
    background-color: #e9ecef; /* لون خلفية مختلف للفوتر */  
    text-align: center;  
    margin-top: 3rem; /* إضافة مسافة فوق الفوتر */  
}  

.footer__copy {  
    font-size: var(--small-font-size);  
    color: var(--text-color-light);  
}  

/* ==== تأثيرات إضافية (اختياري) ==== */  
/* تأثير ظهور تدريجي عند التمرير (يتطلب JS مع Intersection Observer) */  
.section {  
    opacity: 0;  
    transform: translateY(20px);  
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;  
}  

.section.animate {  
    opacity: 1;  
    transform: translateY(0);  
}  


/* ==== Media Queries (للاستجابة) ==== */  

/* للأجهزة اللوحية الصغيرة والشاشات الأكبر */  
@media screen and (min-width: 768px) {  
    .container {  
        margin-left: auto;  
        margin-right: auto;  
    }  

    .section {  
        padding: 6rem 0 2rem;  
    }  
    .section__title {  
         margin-bottom: 3.5rem;  
    }  

    .nav {  
        height: calc(var(--header-height) + 1rem);  
    }  

    .home__container {  
       padding-top: 4rem;  
       grid-template-columns: 1fr 1fr; /* عمودين متساويين */  
       text-align: right; /* أو left حسب اتجاه اللغة */  
    }  
    .home__data {  
       text-align: initial; /* إلغاء التوسيط */  
       order: -1; /* جعل النصوص تظهر أولاً */  
    }  
     .home__img {  
        width: 100%;  
    }  

    .about__container {  
       grid-template-columns: 0.8fr 1fr; /* جعل الصورة أصغر قليلاً */  
       gap: 4rem;  
    }  
    .about__img {  
        order: 0; /* إعادة الترتيب الافتراضي */  
    }  

    .how-to__container {  
       grid-template-columns: repeat(3, 1fr); /* 3 أعمدة في الشاشات الأكبر */  
    }  

     .download__container {  
        padding: 4rem 2rem;  
    }  

    .contact__container {  
         grid-template-columns: 1fr 1.2fr; /* إعطاء الفورم مساحة أكبر */  
         gap: 3rem;  
    }  
}  

/* للشاشات الكبيرة جدًا */  
@media screen and (min-width: 1024px) {  
    .container {  
        max-width: 980px; /* يمكن زيادتها حسب الحاجة */  
    }  
     .how-to__container {  
       grid-template-columns: repeat(5, 1fr); /* 5 أعمدة في الشاشات الكبيرة جداً */  
    }  
}  

/* للشاشات الصغيرة جدًا (إذا لزم الأمر) */  
@media screen and (max-width: 350px) {  
    .container {  
        margin-left: var(--mb-1);  
        margin-right: var(--mb-1);  
    }  
     .home__title { font-size: var(--h1-font-size);}  
     .button { padding: 0.7rem 1.2rem;}  
     /* تعديلات أخرى حسب الحاجة */  
}

.lang-switcher {  
    display: flex;  
    gap: 0.5rem; /* مسافة بين الأزرار */  
    margin-inline-start: 1rem; /* هامش يبدأ من جهة بداية النص */  
}  

.lang-btn {  
    background-color: transparent;  
    border: 1px solid var(--first-color);  
    color: var(--first-color);  
    padding: 0.2rem 0.5rem;  
    border-radius: .25rem;  
    cursor: pointer;  
    font-weight: var(--font-semi-bold);  
    transition: background-color 0.3s, color 0.3s;  
}  

.lang-btn:hover,  
.lang-btn.active { /* كلاس للزر النشط */  
    background-color: var(--first-color);  
    color: #fff;  
}  

/* ==== تعديلات الاتجاه (مثال) ==== */  

/* التأكد من أن الهوامش تعمل بشكل صحيح في كلا الاتجاهين */  
.container {  
    /* نستخدم auto لتجنب الحاجة لـ ltr/rtl هنا */  
    margin-left: auto;  
    margin-right: auto;  
    /* مع الحفاظ على الهوامش الجانبية للشاشات الصغيرة */  
    max-width: 1024px; /* أو القيمة الأصلية */  
    padding-left: var(--mb-1-5);  
    padding-right: var(--mb-1-5);  
}  
@media screen and (max-width: 768px) {  
    .container {  
        /* لا حاجة لتغيير هنا إذا استخدمت padding */  
    }  
}  


/* -- تعديلات خاصة بالاتجاه -- */  
[dir="rtl"] .nav__list {  
    /* قد لا تحتاج لتغيير إذا كانت flex */  
}  
[dir="ltr"] .nav__list {  
   /* قد لا تحتاج لتغيير إذا كانت flex */  
}  

[dir="rtl"] .about__list li i {  
    margin-left: 0.5rem; /* إضافة هامش يسار الأيقونة في العربية */  
    margin-right: 0;  
}  
[dir="ltr"] .about__list li i {  
    margin-right: 0.5rem; /* إضافة هامش يمين الأيقونة في الإنجليزية */  
    margin-left: 0;  
}  

/* تعديل محاذاة النص إذا لزم الأمر (الكود الحالي يستخدم text-align: center كثيراً وهو لا يتأثر بالاتجاه) */  
/* مثال لو كان هناك نص بمحاذاة اليمين في العربي وتريده لليسار في الإنجليزي */  
 [dir="rtl"] .some-element { text-align: right; }  
 [dir="ltr"] .some-element { text-align: left; }  
 /* لكن الأفضل استخدام: */  
 /* .some-element { text-align: start; } */  


[dir="rtl"] .contact__button {  
    align-self: flex-start; /* في RTL, flex-start هو اليمين */  
}  
[dir="ltr"] .contact__button {  
    align-self: flex-start; /* في LTR, flex-start هو اليسار */  
}  

/* تأكد من أن الأيقونات التي بجانب النص تظهر في الجهة الصحيحة */  
[dir="rtl"] .download__button i { order: 1; margin-inline-start: 0.5rem; margin-inline-end: 0;}  
[dir="ltr"] .download__button i { order: 0; margin-inline-end: 0.5rem; margin-inline-start: 0;}  

[dir="rtl"] .contact__info i { margin-left: 0.5rem; margin-right: 0; }  
[dir="ltr"] .contact__info i { margin-right: 0.5rem; margin-left: 0; }  


/* قد تحتاج لمراجعة الهوامش (margins/paddings) الفردية  
   إذا كنت تستخدم left/right بدلاً من inline-start/inline-end */  

/* مثال لقلب الهوامش */  
[dir="ltr"] .element-with-specific-margin {  
    margin-left: 1rem;  
    margin-right: 0;  
}  
[dir="rtl"] .element-with-specific-margin {  
    margin-right: 1rem;  
    margin-left: 0;  
}  

.nav__logo {  
    display: inline-flex; /* Use inline-flex to keep it inline but allow flex alignment */  
    align-items: center; /* Vertically center the image and text */  
    gap: 0.5rem;        /* Creates space between the image and the text (adjust as needed) */  
    color: var(--title-color); /* Or your desired text color */  
    font-weight: var(--font-semi-bold);  
    text-decoration: none; /* Remove underline from link */  
    /* Remove padding if you added it previously directly to the text */  
}  

.nav__logo-img {  
    height: 35px; /* Adjust the height of your logo */  
    width: auto;   /* Let the width adjust automatically to maintain aspect ratio */  
    display: block; /* Helps prevent extra space below the image */  
    /* Optional: Add a subtle transition for hover effects */  
    /* transition: transform 0.3s ease; */  
}  

/* Optional: Make logo slightly bigger on hover */  
/* .nav__logo:hover .nav__logo-img {  
    transform: scale(1.05);  
} */  

/* Ensure the span takes the link color */  
.nav__logo span {  
   /* Usually inherits color fine, but you can force it if needed */  
   /* color: inherit; */  
}  

/* --- Ensure Header alignment remains correct --- */  
.nav {  
    display: flex;  
    justify-content: space-between; /* Keeps logo/title left, menu/switcher right */  
    align-items: center;  
    height: var(--header-height); /* Ensure consistent height */  
}  

/* Adjust nav__menu margin if needed due to flex alignment */  
/* For example, if the menu shifts too far right */  
/* [dir="ltr"] .nav__menu { margin-left: auto; } */ /* Pushes menu right in LTR */  
/* [dir="rtl"] .nav__menu { margin-right: auto; } */ /* Pushes menu left in RTL */  

/* Adjust lang-switcher margin if needed */  
.lang-switcher {  
   /* margin-inline-start: 1rem; /* Already defined, should be okay */  
}  

/* --- Adjustments for Mobile view if needed --- */  
@media screen and (max-width: 768px) {  
    .nav__logo-img {  
        height: 30px; /* Slightly smaller logo on mobile */  
    }  
     /* Make sure the mobile menu toggle button (if you add one) is positioned correctly */  
}