/* ================= GLOBAL ================= */ /* قسم الإعدادات العامة */

:root{ /* تعريف متغيرات CSS عامة */
--bg-main:#0f172a; /* لون الخلفية الرئيسية */
--bg-secondary:#1e293b; /* لون الخلفية الثانوية */
--primary:#facc15; /* اللون الأساسي (أصفر) */
--secondary:#f97316; /* اللون الثانوي (برتقالي) */
--text:#ffffff; /* لون النص الأساسي */
--text-light:#cbd5f5; /* لون النص الفاتح */
} /* نهاية تعريف المتغيرات */

*{ /* تطبيق الإعدادات على كل العناصر */
margin:0; /* إزالة الهوامش الخارجية */
padding:0; /* إزالة الهوامش الداخلية */
box-sizing:border-box; /* تضمين padding و border داخل الأبعاد */
font-family:'Cairo',sans-serif; /* تطبيق الخط على كل العناصر */
}

body{ /* تنسيق جسم الصفحة */
background:var(--bg-main); /* تعيين الخلفية */
color:var(--text); /* تعيين لون النص */
overflow-x:hidden; /* منع التمرير الأفقي */
}

.container{ /* حاوية عامة للمحتوى */
max-width:1100px; /* أقصى عرض */
margin:auto; /* توسيط العنصر */
padding:0 20px; /* مسافة داخلية يمين ويسار */
}
/* ================= HERO START ================= */ /* بداية قسم الهيرو */

.hero{ /* الحاوية الرئيسية للهيرو */
position:relative; /* لتحديد مرجع للعناصر اللي جواها لو كانت absolute */
min-height:100vh; /* يجعل ارتفاع السكشن يساوي ارتفاع الشاشة بالكامل */
display:flex; /* استخدام flexbox لتنظيم العناصر */
flex-direction:column; /* ترتيب العناصر عمودياً (فوق بعض) */
justify-content:center; /* توسيط العناصر رأسياً */
padding:55px 0 20px; /* مسافة داخلية من الأعلى والأسفل */
overflow:hidden; /* إخفاء أي عناصر تخرج خارج حدود السكشن */
background:linear-gradient(270deg,#0f172a,#1e293b,#0f172a); /* خلفية متدرجة بين الألوان */
background-size:400% 400%; /* تكبير الخلفية للسماح بحركتها */
animation:gradientMove 12s ease infinite; /* تطبيق أنيميشن لتحريك الخلفية */
}

/* طبقة إضاءة فوق الخلفية */ /* عنصر لإضافة تأثير إضاءة */
.hero-overlay{ /* طبقة شفافة فوق الهيرو */
position:absolute; /* يتم وضعها فوق الهيرو مباشرة */
inset:0; /* تغطي كامل المساحة (top, right, bottom, left = 0) */
background:radial-gradient(circle at 20% 50%, rgba(250,204,21,0.08), transparent 60%); /* تأثير إضاءة (Glow) من جهة اليسار */
}

/* ================= LAYOUT ================= */ /* قسم توزيع العناصر */

.hero-container{ /* الحاوية التي تحتوي على النص والصورة */
display:flex; /* استخدام flex لتقسيم العناصر */
flex-direction:row-reverse; /* عكس الاتجاه ليتناسب مع RTL */
align-items:center; /* توسيط العناصر رأسياً */
justify-content:space-between; /* توزيع العناصر على الأطراف */
gap:60px; /* مسافة بين الصورة والنص */
z-index:2; /* جعله فوق طبقة الـ overlay */
}

/* ================= CONTENT ================= */ /* قسم المحتوى النصي */

.hero-content{ /* الحاوية الخاصة بالنص */
opacity:0; /* يبدأ مخفي */
transform:translateY(40px); /* يبدأ منخفض لأسفل */
animation:fadeUp 1s ease forwards; /* أنيميشن للظهور للأعلى */
animation-delay:.2s; /* تأخير بسيط قبل الظهور */
}

/* العنوان الرئيسي */ /* تنسيق عنوان الهيرو */
.hero-content h1{ /* عنوان الصفحة */
font-size:54px; /* حجم خط كبير */
font-weight:800; /* خط سميك */
line-height:1.3; /* مسافة بين السطور */
margin-bottom:10px; /* مسافة أسفل العنوان */
background:linear-gradient(to right,#fff,#facc15); /* خلفية متدرجة للنص */
-webkit-background-clip:text; /* تطبيق الخلفية على النص فقط */
color:transparent; /* إخفاء اللون الأساسي للنص */
}

/* السطر الثاني */ /* النص الفرعي داخل العنوان */
.hero-content h1 span{ /* span داخل العنوان */
display:block; /* جعله في سطر منفصل */
font-size:24px; /* حجم أصغر من العنوان */
color:#facc15; /* لون أصفر مميز */
margin-top:10px; /* مسافة فوقه */
}

/* الوصف */ /* الفقرة النصية */
.hero-content p{ /* نص الوصف */
margin:20px 0; /* مسافة فوق وتحت */
color:#cbd5f5; /* لون نص فاتح */
line-height:1.9; /* مسافة بين السطور لراحة القراءة */
max-width:520px; /* تحديد عرض النص لسهولة القراءة */
}


/* ================= BUTTONS ================= */ /* قسم الأزرار */

.hero-buttons{ /* الحاوية الخاصة بالأزرار */
display:flex; /* ترتيب الأزرار بجانب بعض */
gap:15px; /* مسافة بين كل زر */
margin:25px 0; /* مسافة فوق وتحت */
}

/* شكل الزر */ /* تنسيق الشكل العام للأزرار */
.btn{ /* كلاس أساسي لكل زر */
padding:14px 30px; /* مساحة داخلية للزر */
border-radius:30px; /* حواف دائرية */
text-decoration:none; /* إزالة الخط من الروابط */
font-weight:bold; /* خط سميك */
position:relative; /* علشان نستخدم ::before */
overflow:hidden; /* إخفاء أي تأثير خارج الزر */
transition:.3s; /* انتقال سلس */
}

/* تأثير لمعان */ /* عنصر وهمي لإضافة تأثير الضوء */
.btn::before{
content:""; /* عنصر فارغ */
position:absolute; /* يتم وضعه فوق الزر */
width:200%; /* عرض أكبر من الزر */
height:200%; /* ارتفاع أكبر من الزر */
background:linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent); /* تأثير لمعان */
top:0; /* يبدأ من الأعلى */
left:-100%; /* يبدأ خارج الزر من اليسار */
transition:.6s; /* حركة سلسة */
}

.btn:hover::before{ /* عند المرور بالماوس */
left:100%; /* يتحرك إلى اليمين بالكامل */
}

.btn:hover{ /* تأثير عند hover */
transform:translateY(-3px) scale(1.03); /* ارتفاع بسيط وتكبير */
box-shadow:0 10px 25px rgba(0,0,0,.3); /* ظل لإعطاء عمق */
}

/* زر رئيسي */ /* تصميم الزر الأساسي */
.primary-btn{
background:linear-gradient(45deg,#facc15,#f97316); /* لون متدرج */
color:#000; /* لون النص أسود */
}

/* زر ثانوي */ /* تصميم الزر الثانوي */
.secondary-btn{
border:1px solid rgba(255,255,255,0.2); /* إطار خفيف */
color:#fff; /* لون النص أبيض */
}

/* ================= STATS ================= */ /* قسم الإحصائيات */

.hero-stats{ /* الحاوية الخاصة بالأرقام */
display:flex; /* ترتيب العناصر بجانب بعض */
gap:15px; /* مسافة بين كل عنصر */
margin-top:25px; /* مسافة من الأعلى */
}

/* كل عنصر */ /* تصميم كل صندوق إحصائية */
.stat-item{
background:rgba(255,255,255,0.05); /* خلفية شفافة */
padding:12px 18px; /* مسافة داخلية */
border-radius:15px; /* حواف دائرية */
text-align:center; /* توسيط النص */
min-width:90px; /* أقل عرض للعنصر */
}

/* الرقم */ /* تنسيق الرقم داخل الإحصائية */
.stat-item strong{
color:#facc15; /* لون مميز (أصفر) */
font-size:18px; /* حجم الخط */
display:block; /* جعله في سطر منفصل */
}

/* ================= IMAGE ================= */ /* قسم الصورة */

.hero-image{ /* الحاوية الخاصة بالصورة */
opacity:0; /* تبدأ مخفية */
transform:translateX(-60px); /* تبدأ من اليسار */
animation:fadeSide 1.2s ease forwards; /* أنيميشن للظهور من الجانب */
animation-delay:.4s; /* تأخير بسيط */
display:flex; /* استخدام flex */
justify-content:center; /* توسيط أفقي */
align-items:center; /* توسيط رأسي */
}

.hero-image img{ /* الصورة نفسها */
width:340px; /* عرض الصورة */
border-radius:20px; /* حواف دائرية */
box-shadow:0 30px 80px rgba(0,0,0,.6); /* ظل قوي لإعطاء عمق */
transition:.3s; /* انتقال سلس */
}

/* hover */ /* تأثير عند المرور على الصورة */
.hero-image:hover img{
transform:scale(1.05); /* تكبير بسيط */
}




/* ================= NOTE ================= */ /* قسم الملاحظة أسفل الهيرو */

.hero-note{ /* النص التعريفي أسفل السكشن */
text-align:center; /* توسيط النص */
margin-top:60px; /* مسافة من الأعلى */
font-size:18px; /* حجم الخط */
color:#cbd5f5; /* لون النص */
opacity:0; /* يبدأ مخفي */
animation:fadeUp 1s ease forwards; /* أنيميشن ظهور للأعلى */
animation-delay:.6s; /* تأخير قبل الظهور */
}

/* ================= TRUST ================= */ /* قسم عناصر الثقة */

.hero-trust{ /* الحاوية لعناصر الثقة */
display:flex; /* ترتيب العناصر بجانب بعض */
justify-content:center; /* توسيط أفقي */
gap:70px; /* مسافة كبيرة بين العناصر */
margin-top:30px; /* مسافة من الأعلى */
flex-wrap:wrap; /* النزول لسطر جديد عند الحاجة */
text-align:center; /* توسيط النص */
opacity:0; /* يبدأ مخفي */
animation:fadeUp 1s ease forwards; /* أنيميشن ظهور */
animation-delay:.8s; /* تأخير أكبر */
}

.trust-item{ /* كل عنصر ثقة */
transition:.3s; /* حركة سلسة */
}

.trust-item:hover{ /* عند المرور */
transform:translateY(-5px); /* حركة خفيفة للأعلى */
}

/* أيقونة */ /* تنسيق الأيقونات */
.trust-icon{
width:40px; /* عرض الأيقونة */
height:40px; /* ارتفاع الأيقونة */
margin:auto; /* توسيط */
margin-bottom:10px; /* مسافة أسفلها */
color:#facc15; /* لون الأيقونة */
}

/* ================= MOBILE ================= */ /* إعدادات الموبايل */

@media(max-width:900px){ /* تطبيق القواعد على الشاشات الصغيرة */

.hero-container{ /* الحاوية الرئيسية */
flex-direction:column; /* ترتيب العناصر تحت بعض */
text-align:center; /* توسيط النص */
gap:30px; /* مسافة بين العناصر */
}

.hero-image{ /* الصورة */
order:-1; /* نقل الصورة للأعلى */
margin-bottom:20px; /* مسافة أسفل الصورة */
}

.hero-content h1{ /* العنوان */
font-size:28px; /* تصغير الحجم */
}

.hero-content h1 span{ /* السطر الثاني */
font-size:18px; /* تصغير الحجم */
}

.hero-content p{ /* النص */
font-size:14px; /* تصغير الخط */
padding:0 10px; /* مسافة داخلية */
}

.hero-buttons{ /* الأزرار */
flex-direction:column; /* ترتيب عمودي */
align-items:center; /* توسيط */
}

.btn{ /* الأزرار */
width:100%; /* عرض كامل */
max-width:260px; /* حد أقصى للعرض */
}

/* stats grid */ /* تحويل الإحصائيات إلى grid */
.hero-stats{
display:grid; /* استخدام grid */
grid-template-columns:repeat(3,1fr); /* 3 أعمدة */
gap:10px; /* مسافة بين العناصر */
margin-top:20px; /* مسافة من الأعلى */
}

.stat-item{ /* عنصر الإحصائية */
min-width:auto; /* إزالة الحد الأدنى */
padding:10px; /* تقليل المساحة */
}

.hero-image img{ /* الصورة */
width:240px; /* تصغير الحجم */
}

.hero-note{ /* النص السفلي */
font-size:14px; /* تصغير الخط */
padding:0 10px; /* مسافة داخلية */
}

.hero-trust{ /* عناصر الثقة */
gap:25px; /* تقليل المسافة */
}

}

/* ================= ANIMATIONS ================= */ /* قسم تعريف الأنيميشن */

@keyframes gradientMove{ /* أنيميشن لتحريك الخلفية */
0%{background-position:0% 50%} /* بداية الحركة من اليسار */
50%{background-position:100% 50%} /* منتصف الحركة ناحية اليمين */
100%{background-position:0% 50%} /* العودة لنقطة البداية */
}

@keyframes fadeUp{ /* أنيميشن الظهور من الأسفل للأعلى */
from{opacity:0; transform:translateY(40px);} /* يبدأ مخفي وأسفل */
to{opacity:1; transform:translateY(0);} /* يظهر ويصل لمكانه الطبيعي */
}

@keyframes fadeSide{ /* أنيميشن الظهور من اليسار */
from{opacity:0; transform:translateX(-60px);} /* يبدأ من اليسار ومخفي */
to{opacity:1; transform:translateX(0);} /* يتحرك لمكانه ويظهر */
}

/* ================= HERO END ================= */






/* ================= SERVICES START ================= */ /* بداية قسم الخدمات */

.services{ /* الحاوية الرئيسية للسكشن */
padding:55px 20px; /* مسافة داخلية كبيرة فوق وتحت + جوانب */
text-align:center; /* توسيط النصوص */
background:linear-gradient(to bottom,#0b1320,#020617); /* خلفية متدرجة داكنة */
}

/* TITLE */ /* عنوان السكشن */
.section-title{
font-size:36px; /* حجم كبير */
font-weight:800; /* خط عريض */
margin-bottom:10px; /* مسافة أسفل العنوان */
line-height:1.4; /* مسافة بين السطور */
color:#fff; /* لون أبيض */
}



/* DIVIDER (خط واحد فقط) */ /* الخط أسفل العنوان */
.section-divider{
width:6000px; /* عرض الخط */
height:3px; /* سمك الخط */
background:#facc15; /* لون أصفر */
margin:15px auto 60px; /* توسيط + مسافة أسفل */
border-radius:10px; /* حواف ناعمة */
}

/* GRID */ /* شبكة عرض الكروت */
.services-grid{
display:grid; /* استخدام grid */
grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); /* أعمدة مرنة */
gap:35px; /* مسافة بين الكروت */
max-width:1100px; /* أقصى عرض */
margin:auto; /* توسيط */
}

/* CARD 🔥 */ /* تصميم كارت الخدمة */
.service-card{
background:rgba(30,41,59,0.9); /* خلفية شفافة داكنة */
border:1px solid rgba(255,255,255,0.08); /* إطار خفيف */
border-radius:20px; /* حواف دائرية */
padding:10px 15px; /* مسافة داخلية */

text-align:center; /* توسيط المحتوى */

display:flex; /* استخدام flex */
flex-direction:column; /* ترتيب عمودي */
align-items:center; /* توسيط أفقي */
gap:18px; /* مسافة بين العناصر */

transition:.4s ease; /* حركة سلسة */
position:relative; /* علشان ::before */

backdrop-filter:blur(8px); /* تأثير زجاجي (blur) */
overflow:hidden; /* إخفاء أي overflow */
}

/* ✨ SHINE EFFECT */ /* تأثير لمعان عند hover */
.service-card::before{
content:""; /* عنصر وهمي */
position:absolute; /* فوق الكارت */
top:0; /* من الأعلى */
left:-100%; /* يبدأ خارج من اليسار */
width:100%; /* عرض كامل */
height:100%; /* ارتفاع كامل */

background:linear-gradient(
120deg,
transparent 30%,
rgba(255,255,255,0.25),
transparent 70%
); /* تأثير الضوء */

transition:0.6s; /* حركة ناعمة */
}

.service-card:hover::before{
left:100%; /* يتحرك لليمين */
}

/* HOVER */ /* تأثير عند المرور */
.service-card:hover{
transform:translateY(-12px); /* رفع الكارت للأعلى */
box-shadow:
0 25px 60px rgba(0,0,0,.6), /* ظل رئيسي */
0 0 20px rgba(250,204,21,0.15); /* توهج خفيف */
border-color:rgba(250,204,21,0.5); /* تغيير لون الإطار */
}

/* ICON */ /* الأيقونة داخل الكارت */
.service-icon{
font-size:48px; /* حجم كبير */
color:#facc15; /* لون أصفر */
transition:.3s; /* حركة ناعمة */
}

.service-card:hover .service-icon{
transform:scale(1.2) rotate(4deg); /* تكبير + تدوير خفيف */
}


/* TITLE */ /* عنوان الكارت */
.service-card h3{
font-size:22px; /* حجم الخط */
font-weight:700; /* خط سميك */
color:#fff; /* لون أبيض */
line-height:1.5; /* مسافة بين السطور */
}

/* TEXT */ /* النص داخل الكارت */
.service-card p{
font-size:15px; /* حجم الخط */
color:#cbd5e1; /* لون رمادي فاتح */
line-height:1.8; /* مسافة مريحة بين السطور */
max-width:280px; /* تحديد عرض النص */
}

/* FEATURED CARD 🔥 */ /* كارت مميز */
.service-card.featured{
border:1px solid #facc15; /* إطار أصفر */
background:linear-gradient(180deg, rgba(250,204,21,0.08), transparent); /* خلفية خفيفة مميزة */
}

/* BADGE */ /* شارة "الأكثر طلبًا" */
.badge{
position:absolute; /* تثبيت داخل الكارت */
top:15px; /* من الأعلى */
left:15px; /* من اليسار */
background:#facc15; /* خلفية صفراء */
color:#000; /* لون النص أسود */
padding:6px 12px; /* مسافة داخلية */
border-radius:12px; /* حواف دائرية */
font-size:12px; /* حجم صغير */
font-weight:bold; /* خط سميك */
}

/* ANIMATION */ /* حالة البداية للكارت */
.service-card{
opacity:0; /* مخفي */
transform:translateY(40px); /* نازل لتحت */
}

.service-card.show{
opacity:1; /* يظهر */
transform:translateY(0); /* يرجع لمكانه */
transition:.6s ease; /* حركة سلسة */
}

/* ================= MOBILE ================= */ /* إعدادات خاصة بالموبايل */

@media(max-width:900px){ /* يتم تطبيق هذه القواعد على الشاشات ≤ 900px */

.services{ /* سكشن الخدمات */
padding:80px 20px; /* تقليل المسافة الداخلية */
}

.section-title{ /* عنوان السكشن */
font-size:26px; /* تصغير حجم الخط */
}

.services-grid{ /* شبكة الكروت */
gap:20px; /* تقليل المسافة بين الكروت */
}

.service-card{ /* كارت الخدمة */
padding:25px 20px; /* تقليل المسافة الداخلية */
}

.service-card h3{ /* عنوان الكارت */
font-size:18px; /* تصغير الحجم */
}

.service-card p{ /* النص */
font-size:13px; /* تصغير الخط */
}

.service-icon{ /* الأيقونة */
font-size:40px; /* تصغير الحجم */
}

}



/* ================= SERVICES OFFER ================= */

/* ================= PREMIUM OFFER ================= */

.services-offer{

margin-top:50px;

position:relative;

overflow:hidden;

border-radius:28px;

padding:45px 35px;

background:
linear-gradient(
135deg,
rgba(250,204,21,.14),
rgba(249,115,22,.10),
rgba(15,23,42,.95)
);

border:1px solid rgba(250,204,21,.18);

display:flex;

align-items:center;

justify-content:space-between;

gap:35px;

flex-wrap:wrap;

backdrop-filter:blur(10px);

box-shadow:
0 20px 60px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.05);
}

/* animated glow */

.services-offer::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
120deg,
transparent 20%,
rgba(255,255,255,.10),
transparent 80%
);

transform:translateX(-100%);

animation:premiumShine 5s linear infinite;
}

@keyframes premiumShine{

100%{
transform:translateX(100%);
}

}

/* LEFT SIDE */

.offer-left{

flex:1;

min-width:280px;
}

/* BADGE */

.services-offer-badge{

display:inline-flex;

align-items:center;

gap:8px;

background:#facc15;

color:#000;

padding:10px 18px;

border-radius:40px;

font-size:13px;

font-weight:800;

margin-bottom:18px;

box-shadow:
0 10px 25px rgba(250,204,21,.25);
}

/* TITLE */

.services-offer h3{

font-size:34px;

line-height:1.5;

font-weight:900;

color:#fff;

margin-bottom:15px;
}

/* 40% */

.offer-highlight{

display:inline-block;

color:#facc15;

font-size:42px;

margin:0 4px;

text-shadow:
0 0 15px rgba(250,204,21,.35);
}

/* TEXT */

.services-offer p{

font-size:16px;

line-height:1.9;

color:#cbd5e1;

max-width:650px;
}

/* RIGHT SIDE */

.offer-action{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:15px;
}

/* small text */

.offer-note{

font-size:13px;

color:#94a3b8;
}

/* BUTTON */

.services-offer a{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:50px;

background:
linear-gradient(
45deg,
#facc15,
#f97316
);

color:#000;

font-size:16px;

font-weight:900;

text-decoration:none;

transition:.35s;

position:relative;

overflow:hidden;

box-shadow:
0 15px 35px rgba(249,115,22,.25);
}

/* button shine */

.services-offer a::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transition:.6s;
}

.services-offer a:hover::before{

left:120%;
}

.services-offer a:hover{

transform:translateY(-5px) scale(1.04);

box-shadow:
0 20px 40px rgba(249,115,22,.35),
0 0 25px rgba(250,204,21,.25);
}

/* MOBILE */

@media(max-width:768px){

.services-offer{

padding:30px 22px;

text-align:center;

justify-content:center;
}

.services-offer h3{

font-size:24px;
}

.offer-highlight{

font-size:34px;
}

.services-offer p{

font-size:14px;
}

.offer-action{

width:100%;
}

.services-offer a{

width:100%;
}

}



/* ================= OFFER REVEAL ================= */

.services-offer{

opacity:0;

transform:
translateY(60px)
scale(.96);

transition:
opacity .8s ease,
transform .8s ease;
}

/* عند الظهور */

.services-offer.show{

opacity:1;

transform:
translateY(0)
scale(1);
}
/* =================  ================= */





/* ================= FRAUD START ================= */ /* بداية سكشن الحماية من النقرات الوهمية */

.fraud-section{ /* الحاوية الخارجية للسكشن */
padding:55px 20px; /* مسافة داخلية فوق وتحت + جوانب */
}

/* BOX */ /* الصندوق الرئيسي داخل السكشن */
.fraud-box{
background:linear-gradient(135deg,#facc15,#fb923c); /* خلفية متدرجة (أصفر → برتقالي) */
padding:55px 20px; /* مسافة داخلية */
border-radius:28px; /* حواف دائرية كبيرة */
text-align:center; /* توسيط النص */
color:#000; /* لون النص أسود */
position:relative; /* مرجع للعناصر الداخلية */
overflow:hidden; /* إخفاء أي عناصر خارج الصندوق */
}

/* TITLE 🔥 */ /* عنوان السكشن */
.fraud-box h2{
font-size:38px; /* حجم كبير */
font-weight:800; /* خط عريض */
margin-bottom:14px; /* مسافة أسفل العنوان */
line-height:1.35; /* مسافة بين السطور */
}

/* TEXT */ /* النص الوصفي */
.fraud-text{
font-size:17px; /* حجم الخط */
line-height:1.8; /* مسافة مريحة بين السطور */
max-width:700px; /* تحديد عرض النص */
margin:0 auto 20px; /* توسيط + مسافة أسفل */
color:#111; /* لون النص داكن */
}

/* الفقرة الثانية */ /* تنسيق فواصل الأسطر */
.fraud-text br{
display:block; /* جعله عنصر block */
margin:10px 0; /* مسافة حوله */
}

/* POINTS */ /* قائمة النقاط */
.fraud-points{
display:flex; /* ترتيب أفقي */
justify-content:center; /* توسيط */
gap:15px; /* مسافة بين العناصر */
flex-wrap:wrap; /* النزول لسطر جديد */
margin:20px 0 25px; /* مسافة فوق وتحت */
}

/* كل نقطة */ /* تصميم كل عنصر */
.fraud-points span{
background:rgba(0,0,0,0.08); /* خلفية شفافة */
padding:10px 16px; /* مسافة داخلية */
border-radius:14px; /* حواف دائرية */
font-size:15px; /* حجم الخط */
font-weight:700; /* خط سميك */
}

/* BUTTON */ /* زر الدعوة لاتخاذ إجراء */
.fraud-btn{
display:inline-block; /* يجعله مثل زر */
background:#000; /* خلفية سوداء */
color:#fff; /* نص أبيض */
padding:15px 36px; /* مسافة داخلية */
border-radius:30px; /* شكل دائري */
text-decoration:none; /* إزالة الخط */
font-weight:700; /* خط سميك */
font-size:16px; /* حجم الخط */
transition:.3s; /* حركة ناعمة */
}

.fraud-btn:hover{ /* عند المرور */
transform:scale(1.05); /* تكبير بسيط */
}

/* MOBILE */ /* إعدادات الموبايل */
@media(max-width:900px){ /* للشاشات الصغيرة */

.fraud-section{ /* السكشن */
padding:65px 15px; /* تقليل المسافات */
}

.fraud-box{ /* الصندوق */
padding:30px 18px; /* تقليل المسافة الداخلية */
}

.fraud-box h2{ /* العنوان */
font-size:24px; /* تصغير الحجم */
}

.fraud-text{ /* النص */
font-size:14px; /* تصغير الخط */
line-height:1.7; /* تقليل المسافة بين السطور */
}

}

/* ================= FRAUD END ================= */ /* نهاية السكشن */



/* ================= RESULTS PREMIUM ================= */ /* بداية سكشن عرض النتائج */

.results{ /* الحاوية الرئيسية للسكشن */
padding:55px 20px; /* مسافة داخلية */
text-align:center; /* توسيط النص */
background:linear-gradient(to bottom,#020617,#0b1320); /* خلفية متدرجة داكنة */
}

/* TITLE */ /* عنوان السكشن */
.section-title{
font-size:38px; /* حجم كبير */
font-weight:800; /* خط سميك */
line-height:1.4; /* مسافة بين السطور */
margin-bottom:10px; /* مسافة أسفل */
color:#fff; /* لون أبيض */
}

.section-subtitle{ /* النص الفرعي */
color:#cbd5f5; /* لون فاتح */
font-size:16px; /* حجم متوسط */
margin-bottom:40px; /* مسافة أسفل */
}

/* GRID */ /* صفحات الجاليري */
.gallery-page{
display:none; /* مخفية افتراضيًا */
gap:25px; /* مسافة بين العناصر */
}

.gallery-page.active{
display:grid; /* تظهر كـ grid */
animation:fadeUp .5s ease; /* أنيميشن ظهور */
}

/* Desktop */ /* شاشات كبيرة */
@media(min-width:1024px){
.gallery-page.active{
grid-template-columns:repeat(3,1fr); /* 3 أعمدة */
}
}

/* Tablet */ /* تابلت */
@media(max-width:1023px){
.gallery-page.active{
grid-template-columns:repeat(2,1fr); /* عمودين */
}
}

/* Mobile */ /* موبايل */
@media(max-width:600px){
.gallery-page.active{
grid-template-columns:1fr; /* عمود واحد */
}
}

/* ================= CARD ================= */ /* تصميم الكارت */

.item{
position:relative; /* مرجع للعناصر الداخلية */
overflow:hidden; /* إخفاء الزائد */
border-radius:22px; /* حواف دائرية */
cursor:pointer; /* تغيير شكل الماوس */

background:rgba(30,41,59,0.8); /* خلفية شفافة */
border:1px solid rgba(255,255,255,0.08); /* إطار خفيف */

transition:.4s; /* حركة ناعمة */
backdrop-filter:blur(8px); /* تأثير زجاجي */

box-shadow:0 15px 40px rgba(0,0,0,.4); /* ظل */
}

/* ✨ SHINE EFFECT */ /* تأثير لمعان */
.item::before{
content:""; /* عنصر وهمي */
position:absolute; /* فوق العنصر */
top:0; /* من الأعلى */
left:-100%; /* يبدأ خارج */
width:100%; /* عرض كامل */
height:100%; /* ارتفاع كامل */

background:linear-gradient(
120deg,
transparent 30%,
rgba(255,255,255,0.2),
transparent 70%
); /* تأثير الضوء */

transition:0.6s; /* حركة */
z-index:2; /* فوق المحتوى */
}

.item:hover::before{
left:100%; /* يتحرك عبر العنصر */
}

/* IMAGE */ /* الصورة داخل الكارت */
.item img{
width:100%; /* عرض كامل */
height:240px; /* ارتفاع ثابت */
object-fit:cover; /* تغطية كاملة بدون تشويه */
transition:.5s ease; /* حركة ناعمة */
}

/* OVERLAY 🔥 */ /* طبقة فوق الصورة */
.item::after{
content:"عرض النتيجة"; /* نص يظهر */
position:absolute; /* فوق العنصر */
inset:0; /* يغطي كامل المساحة */

display:flex; /* flex لتوسيط */
align-items:center; /* توسيط رأسي */
justify-content:center; /* توسيط أفقي */

background:linear-gradient(
to top,
rgba(0,0,0,0.75),
rgba(0,0,0,0.4)
); /* طبقة داكنة */

color:#fff; /* لون النص */
font-weight:700; /* خط سميك */
font-size:17px; /* حجم الخط */
opacity:0; /* مخفي */
transition:.4s; /* حركة */
z-index:1; /* تحت اللمعان */
}

/* HOVER EFFECT */ /* تأثير عند المرور */
.item:hover img{
transform:scale(1.12); /* تكبير الصورة */
filter:brightness(0.75); /* تعتيم */
}

.item:hover::after{
opacity:1; /* إظهار النص */
}

/* CARD HOVER */ /* تأثير الكارت بالكامل */
.item:hover{
transform:translateY(-8px) scale(1.02); /* رفع وتكبير */
box-shadow:
0 25px 60px rgba(0,0,0,.6), /* ظل قوي */
0 0 20px rgba(250,204,21,0.1); /* توهج */
border-color:rgba(250,204,21,0.4); /* تغيير لون الإطار */
}


/* ================= DOTS ================= */ /* نقاط التنقل بين الصفحات */

.dots{ /* الحاوية الخاصة بالنقاط */
margin-top:30px; /* مسافة من الأعلى */
display:flex; /* ترتيب أفقي */
justify-content:center; /* توسيط */
gap:10px; /* مسافة بين النقاط */
}

.dot{ /* كل نقطة */
width:10px; /* عرض صغير */
height:10px; /* ارتفاع */
background:#555; /* لون رمادي */
border-radius:50%; /* شكل دائري */
cursor:pointer; /* شكل الماوس */
transition:.3s; /* حركة ناعمة */
}

.dot.active{ /* النقطة النشطة */
background:#facc15; /* لون أصفر */
transform:scale(1.4); /* تكبير */
}

/* ================= LIGHTBOX ================= */ /* عرض الصورة بشكل مكبر */

.lightbox{ /* الحاوية العامة */
position:fixed; /* ثابتة على الشاشة */
top:0; /* من الأعلى */
left:0; /* من اليسار */
width:100%; /* عرض كامل */
height:100%; /* ارتفاع كامل */
background:rgba(0,0,0,0.95); /* خلفية داكنة */
display:none; /* مخفية افتراضيًا */
justify-content:center; /* توسيط أفقي */
align-items:center; /* توسيط رأسي */
z-index:9999; /* فوق كل العناصر */
animation:fade .3s ease; /* أنيميشن ظهور */
}

.lightbox img{ /* الصورة داخل اللايت بوكس */
max-width:90%; /* أقصى عرض */
max-height:85%; /* أقصى ارتفاع */
border-radius:14px; /* حواف دائرية */
box-shadow:0 20px 60px rgba(0,0,0,.7); /* ظل */
}

/* ================= ANIMATIONS ================= */ /* تعريف الأنيميشن */

@keyframes fadeUp{ /* ظهور من أسفل */
from{opacity:0; transform:translateY(20px);} /* يبدأ مخفي وأسفل */
to{opacity:1; transform:translateY(0);} /* يظهر في مكانه */
}

@keyframes fade{ /* ظهور تدريجي */
from{opacity:0;} /* مخفي */
to{opacity:1;} /* ظاهر */
}


/* ================= SECTION ENTRY ANIMATION ================= */ /* أنيميشن دخول السكشن */

/* حالة البداية */ /* قبل ظهور السكشن */
.results{
opacity:0; /* مخفي */
transform:translateY(40px); /* نازل لتحت */
}

/* عند الظهور */ /* عند إضافة كلاس show */
.results.show{
opacity:1; /* يظهر */
transform:translateY(0); /* يرجع لمكانه الطبيعي */
transition:0.8s ease; /* حركة ناعمة */
}

/* ================= RESULTS END ================= */ /* نهاية سكشن النتائج */


/* ================= EXPERIENCE ================= */ /* بداية سكشن الخبرة */

/* SECTION */ /* الحاوية الرئيسية */
.experience{
padding:55px 20px; /* مسافة داخلية */
text-align:center; /* توسيط النص */
background:linear-gradient(to bottom,#0f172a,#0b1320); /* خلفية متدرجة */
opacity:0; /* يبدأ مخفي */
transform:translateY(40px); /* نازل لتحت */
transition:all .8s ease; /* حركة ناعمة */
}

.experience.show{ /* عند إضافة كلاس show */
opacity:1; /* يظهر */
transform:translateY(0); /* يرجع لمكانه */
}

/* TITLE */ /* عنوان السكشن */
.section-title{
font-size:36px; /* حجم كبير */
font-weight:800; /* خط سميك */
margin-bottom:10px; /* مسافة أسفل */
}

/* LINE تحت العنوان */ /* الخط أسفل العنوان */
.section-divider{
width:60px; /* عرض الخط */
height:3px; /* سمك */
background:#facc15; /* لون أصفر */
margin:15px auto 25px; /* توسيط + مسافة */
border-radius:2px; /* حواف بسيطة */
}

/* SUBTITLE */ /* النص الفرعي */
.section-subtitle{
color:#cbd5e1; /* لون فاتح */
margin-bottom:50px; /* مسافة أسفل */
font-size:15px; /* حجم الخط */
line-height:1.7; /* مسافة بين السطور */
}

/* GRID */ /* شبكة الإحصائيات */
.stats{
display:grid; /* استخدام grid */
grid-template-columns:repeat(4,1fr); /* 4 أعمدة */
gap:20px; /* مسافة بين العناصر */
}

/* CARD */ /* كارت الإحصائية */
.stat{
padding:25px; /* مسافة داخلية */
border-radius:16px; /* حواف دائرية */
transition:.3s; /* حركة */
background:rgba(255,255,255,0.02); /* خلفية خفيفة */
opacity:0; /* مخفي */
transform:translateY(30px); /* نازل */
}

/* SHOW ANIMATION */ /* عند ظهور السكشن */
.experience.show .stat{
opacity:1; /* يظهر */
transform:translateY(0); /* يرجع */
}

/* ICON */ /* الأيقونة */
.stat i{
font-size:28px; /* حجم */
color:#facc15; /* لون أصفر */
margin-bottom:15px; /* مسافة */
display:block; /* سطر منفصل */
}

/* NUMBER */ /* الرقم */
.stat h3{
font-size:42px; /* حجم كبير */
color:#facc15; /* لون */
font-weight:900; /* سميك جدًا */
}

/* TEXT */ /* النص */
.stat p{
color:#cbd5e1; /* لون فاتح */
margin-top:10px; /* مسافة */
}

/* HOVER */ /* تأثير عند المرور */
.stat:hover{
transform:translateY(-5px); /* حركة للأعلى */
box-shadow:0 0 25px rgba(250,204,21,0.2); /* توهج */
}

/* DELAY ANIMATION */ /* تأخير ظهور كل عنصر */
.stat:nth-child(1){transition-delay:.1s;} /* الأول */
.stat:nth-child(2){transition-delay:.2s;} /* الثاني */
.stat:nth-child(3){transition-delay:.3s;} /* الثالث */
.stat:nth-child(4){transition-delay:.4s;} /* الرابع */

/* RESPONSIVE */ /* موبايل */
@media(max-width:768px){

.stats{
grid-template-columns:repeat(2,1fr); /* عمودين بدل 4 */
}

.stat h3{
font-size:32px; /* تصغير الرقم */
}

}



/* ================= TRUSTED BRANDS ================= */

/* ================= TRUSTED BRANDS ================= */

.trusted-brands{

margin-top:70px;

position:relative;

overflow:hidden;
}

/* TITLE */

.brands-title{

font-size:22px;

font-weight:800;

margin-bottom:40px;

color:#fff;

text-align:center;
}

/* SLIDER */

.brands-slider{

position:relative;

width:100%;

overflow:hidden;

mask-image:
linear-gradient(
to right,
transparent,
#000 8%,
#000 92%,
transparent
);
}

/* TRACK */

.brands-track{

display:flex;

align-items:center;

gap:90px;

width:fit-content;

animation:brandsLoop 22s linear infinite;
}

/* LOGOS */

.brands-track img{

height:72px;

width:auto;

object-fit:contain;

opacity:.6;

filter:
grayscale(100%)
brightness(1.1);

transition:.35s;

flex-shrink:0;
}

/* hover */

.brands-track img:hover{

opacity:1;

filter:
grayscale(0%)
brightness(1.15);

transform:scale(1.08);
}

/* pause */

.brands-slider:hover .brands-track{

animation-play-state:paused;
}

/* animation */

@keyframes brandsLoop{

0%{
transform:translateX(0);
}

100%{
transform:translateX(50%);
}

}

/* ================= MOBILE ================= */

@media(max-width:768px){

.trusted-brands{

margin-top:50px;
}

.brands-title{

font-size:18px;

margin-bottom:28px;
}

.brands-track{

gap:50px;
}

.brands-track img{

height:48px;
}

}


/*  نهاية  */ /* نهاية السكشن */


/* ================= TESTIMONIALS ================= */ /* سكشن آراء العملاء */

.testimonials{ /* الحاوية الرئيسية */
padding:55px 20px; /* مسافة داخلية */
background:radial-gradient(circle at top,#0f1a2e,#0b1320); /* خلفية دائرية متدرجة */
text-align:center; /* توسيط النص */
position:relative; /* مرجع للعناصر الداخلية */
overflow:hidden; /* إخفاء الزائد */
}

/* glow background */ /* تأثير توهج في الخلفية */
.testimonials::before{
content:""; /* عنصر وهمي */
position:absolute; /* داخل السكشن */
top:-120px; /* أعلى */
left:50%; /* منتصف */
transform:translateX(-50%); /* توسيط أفقي */
width:400px; /* عرض */
height:400px; /* ارتفاع */
background:#facc15; /* لون أصفر */
opacity:0.05; /* شفافية */
filter:blur(120px); /* تمويه */
z-index:0; /* خلف العناصر */
}

/* TITLE */ /* عنوان السكشن */
.title{
color:#fff; /* لون أبيض */
font-size:30px; /* حجم */
font-weight:700; /* سميك */
margin-bottom:50px; /* مسافة */
position:relative; /* فوق التوهج */
z-index:1;
}

.title::after{ /* خط تحت العنوان */
content:""; /* عنصر وهمي */
width:120px; /* عرض */
height:3px; /* سمك */
background:#facc15; /* لون */
display:block; /* سطر جديد */
margin:12px auto 0; /* توسيط */
border-radius:2px; /* حواف */
}

/* PAGES */ /* الحاوية العامة للصفحات */
#pages{
max-width:1100px; /* أقصى عرض */
margin:auto; /* توسيط */
position:relative; /* فوق الخلفية */
z-index:1;
}

/* PAGE */ /* كل صفحة */
.page{
display:none !important; /* مخفية */
grid-template-columns:repeat(2,1fr); /* عمودين */
gap:20px; /* مسافة */
}

.page.active{
display:grid !important; /* تظهر */
}

/* CARD 🔥 */ /* كارت الرأي */
.card{
background:rgba(30,41,59,0.9); /* خلفية */
border:1px solid rgba(255,255,255,0.08); /* إطار */
backdrop-filter:blur(6px); /* تأثير زجاجي */

padding:30px 25px; /* مسافة داخلية */
border-radius:20px; /* حواف */

height:170px; /* ارتفاع ثابت */

display:flex; /* flex */
flex-direction:column; /* عمودي */
justify-content:center; /* توسيط رأسي */

transition:0.3s ease; /* حركة */
position:relative; /* لعنصر ::before */
}

/* shine effect */ /* تأثير لمعان */
.card::before{
content:""; /* عنصر وهمي */
position:absolute; /* فوق الكارت */
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.08),transparent); /* تأثير */
opacity:0; /* مخفي */
transition:0.4s; /* حركة */
}

.card:hover::before{
opacity:1; /* يظهر */
}

/* hover */ /* تأثير عند المرور */
.card:hover{
transform:translateY(-8px) scale(1.02); /* حركة */
box-shadow:0 25px 60px rgba(0,0,0,0.6); /* ظل */
}

/* TEXT */ /* النص داخل الكارت */
.card h4{
color:#facc15; /* لون أصفر */
font-size:18px; /* حجم */
margin-bottom:10px; /* مسافة */
font-weight:700; /* سميك */
}

.card p{
color:#e2e8f0; /* لون فاتح */
font-size:14px; /* حجم */
line-height:1.7; /* مسافة */
opacity:0.9; /* شفافية */

overflow:hidden; /* إخفاء الزائد */
display:-webkit-box; /* دعم القص */
-webkit-line-clamp:3; /* 3 سطور فقط */
-webkit-box-orient:vertical; /* اتجاه عمودي */
}

/* DOTS */ /* نقاط التنقل */
.dots{
margin-top:25px; /* مسافة */
display:flex; /* ترتيب */
justify-content:center; /* توسيط */
gap:8px; /* مسافة */
z-index:1;
position:relative;
}

.dot{
width:10px; /* عرض */
height:10px; /* ارتفاع */
background:#555; /* لون */
border-radius:50%; /* دائرة */
cursor:pointer; /* مؤشر */
transition:0.3s; /* حركة */
}

.dot.active{
background:#facc15; /* لون نشط */
transform:scale(1.3); /* تكبير */
}

/* MOBILE */ /* موبايل */
@media(max-width:768px){

.page{
grid-template-columns:1fr !important; /* عمود واحد */
}

.card{
height:150px; /* تقليل الارتفاع */
padding:25px; /* تقليل المساحة */
}

.title{
font-size:24px; /* تصغير العنوان */
}

}

/* نهاية السكشن */






/* ================= STEPS ================= */ /* سكشن خطوات العمل */

.steps{ /* الحاوية الرئيسية */
padding:55px 20px; /* مسافة داخلية */
background:radial-gradient(circle at top,#0f1a2e,#0b1320); /* خلفية متدرجة */
text-align:center; /* توسيط النص */
position:relative; /* مرجع للعناصر */

/* animation */ /* حالة البداية */
opacity:0; /* مخفي */
transform:translateY(60px); /* نازل */
transition:1s ease; /* حركة */
}

.steps.show{ /* عند الظهور */
opacity:1; /* يظهر */
transform:translateY(0); /* يرجع */
}

/* TITLE */ /* عنوان السكشن */
.section-title{
color:#fff; /* لون */
font-size:30px; /* حجم */
margin-bottom:50px; /* مسافة */
position:relative;
}

.section-title::after{ /* خط أسفل العنوان */
content:""; /* عنصر وهمي */
width:200px; /* عرض */
height:3px; /* سمك */
background:#facc15; /* لون */
display:block; /* سطر */
margin:20px auto 0; /* توسيط */
}

/* CONTAINER */ /* الحاوية للكروت */
.steps-container{
max-width:1100px; /* أقصى عرض */
margin:auto; /* توسيط */
display:grid; /* grid */
grid-template-columns:repeat(3,1fr); /* 3 أعمدة */
gap:25px; /* مسافة */
}

/* CARD */ /* كارت الخطوة */
.step{
background:rgba(30,41,59,0.9); /* خلفية */
border:1px solid rgba(255,255,255,0.08); /* إطار */
border-radius:20px; /* حواف */
padding:40px 25px 30px; /* مسافة داخلية (مكان الرقم) */
position:relative; /* مرجع */
transition:.4s ease; /* حركة */
overflow:hidden; /* إخفاء الزائد */
}

/* NUMBER 🔥 */ /* رقم الخطوة */
.step-number{
position:absolute; /* ثابت داخل الكارت */
top:12px; /* من الأعلى */
right:12px; /* من اليمين */

width:40px; /* عرض */
height:40px; /* ارتفاع */

background:#facc15; /* لون */
color:#000; /* نص */

border-radius:50%; /* دائرة */
display:flex; /* flex */
align-items:center; /* توسيط رأسي */
justify-content:center; /* توسيط أفقي */

font-weight:700; /* سميك */
font-size:16px; /* حجم */

box-shadow:
0 0 20px rgba(250,204,21,0.6), /* توهج */
0 5px 15px rgba(0,0,0,0.4); /* ظل */

z-index:2; /* فوق */
}

/* glow */ /* توهج خلف الرقم */
.step-number::after{
content:""; /* عنصر وهمي */
position:absolute;
width:100%;
height:100%;
border-radius:50%;
background:#facc15;
opacity:0.2;
filter:blur(10px);
z-index:-1;
}

/* TEXT */ /* النص */
.step h3{
color:#fff; /* لون */
margin-bottom:12px; /* مسافة */
font-size:18px; /* حجم */
}

.step p{
color:#cbd5e1; /* لون */
font-size:14px; /* حجم */
line-height:1.7; /* مسافة */
}

/* HOVER EFFECT */ /* تأثير */
.step::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.15),transparent);
transition:0.6s;
}

.step:hover::before{
left:100%;
}

.step:hover{
transform:translateY(-10px) scale(1.03); /* حركة */
box-shadow:
0 25px 60px rgba(0,0,0,.6),
0 0 20px rgba(250,204,21,0.15);
border-color:rgba(250,204,21,0.4);
}

/* ================= CTA ================= */ /* زر الدعوة */

.steps-cta{
margin-top:60px; /* مسافة */
}

.cta-btn{
display:inline-block; /* زر */
padding:14px 35px; /* مسافة */
background:#facc15; /* لون */
color:#000; /* نص */
font-weight:700; /* سميك */
font-size:16px; /* حجم */
border-radius:30px; /* دائري */
text-decoration:none; /* بدون خط */
transition:.3s; /* حركة */
position:relative; /* ل ::before */
overflow:hidden; /* إخفاء */
}

.cta-btn:hover{
transform:translateY(-3px); /* حركة */
box-shadow:0 15px 40px rgba(250,204,21,0.4); /* ظل */
}

.cta-btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);
transition:0.5s;
}

.cta-btn:hover::before{
left:100%;
}

/* ================= MOBILE ================= */ /* موبايل */

@media(max-width:768px){

.steps-container{
grid-template-columns:1fr; /* عمود واحد */
}

.section-title{
font-size:24px; /* تصغير */
}

}

/* ================= FINAL CTA ================= */ /* سكشن النهاية */

/* TITLE */
.final-cta h2{
font-size:34px; /* حجم */
font-weight:800; /* سميك */
margin-bottom:15px; /* مسافة */
}

/* TEXT */
.final-cta p{
font-size:18px; /* حجم */
margin-bottom:30px; /* مسافة */
}

/* MOBILE */
@media(max-width:768px){

.final-cta h2{
font-size:24px; /* تصغير */
}

.final-cta p{
font-size:14px; /* تصغير */
}

}


/* ================= FOOTER PREMIUM ================= */

/* ================= FOOTER COMPACT PREMIUM ================= */

.footer{

background:
linear-gradient(
to top,
#020617,
#031127,
#07152e
);

padding:65px 25px 22px;

position:relative;

overflow:hidden;
}

/* glow */

.footer::before{

content:"";

position:absolute;

top:-220px;
left:50%;

transform:translateX(-50%);

width:500px;
height:500px;

background:#facc15;

opacity:.035;

filter:blur(140px);
}

/* ================= CONTAINER ================= */

.footer-container{

max-width:1250px;

margin:auto;

display:grid;

grid-template-columns:
1.2fr
1fr
1fr;

align-items:start;

gap:45px;

position:relative;

z-index:2;
}

/* ================= TITLES ================= */

.footer h3,
.footer h4{

color:#fff;

font-weight:800;

margin-bottom:18px;
}

.footer h3{

font-size:36px;

line-height:1.2;
}

.footer h4{

font-size:18px;
}

/* ================= ABOUT ================= */

.footer-about p{

font-size:14px;

line-height:2;

color:#cbd5e1;

max-width:430px;
}

/* ================= CONTACT ================= */

.footer-contact{

margin-top:22px;

display:flex;

flex-direction:column;

gap:12px;
}

.contact-item{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

color:#e2e8f0;
}

.contact-item i{

width:18px;

color:#facc15;

font-size:15px;
}

/* ================= SOCIAL ================= */

.footer-social,
.footer-work{

display:flex;

flex-direction:column;
}

.social-links{

display:flex;

flex-wrap:wrap;

gap:10px;
}

.social-links a{

width:46px;
height:46px;

display:flex;

align-items:center;
justify-content:center;

border-radius:14px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(10px);

color:#fff;

font-size:18px;

text-decoration:none;

transition:.3s;
}

.social-links a:hover{

transform:
translateY(-4px)
scale(1.05);

background:
linear-gradient(
135deg,
#facc15,
#f97316
);

color:#000;

box-shadow:
0 12px 25px rgba(0,0,0,.28);
}

/* ================= WORK ================= */

.work-links{

display:flex;

flex-wrap:wrap;

gap:10px;
}

.work-links a{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

min-width:105px;

padding:12px 16px;

border-radius:14px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(10px);

color:#fff;

font-size:14px;

font-weight:700;

text-decoration:none;

transition:.3s;
}

.work-links a:hover{

transform:
translateY(-4px);

background:
linear-gradient(
135deg,
#facc15,
#f97316
);

color:#000;

box-shadow:
0 12px 24px rgba(0,0,0,.25);
}

/* ================= BOTTOM ================= */

.footer-bottom{

margin-top:45px;

padding-top:18px;

border-top:
1px solid rgba(255,255,255,.08);

text-align:center;

position:relative;

z-index:2;
}

.footer-bottom p{

font-size:13px;

color:#94a3b8;
}

/* ================= MOBILE ================= */

@media(max-width:992px){

.footer{

padding:55px 18px 20px;
}

.footer-container{

grid-template-columns:1fr;

text-align:center;

gap:40px;
}

.footer-about p{

margin:auto;
}

.footer-contact{

align-items:center;
}

.social-links,
.work-links{

justify-content:center;
}

.footer h3{

font-size:30px;
}

.footer h4{

font-size:18px;
}

}

/* ================= CONTACT BAR ================= */

/* ================= CONTACT BAR ================= */

.footer-contact-bar{

margin-top:38px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:14px;

position:relative;

z-index:2;
}

/* BOX */

.contact-box{

display:flex;

align-items:center;

gap:12px;

padding:14px 16px;

border-radius:14px;

background:
rgba(255,255,255,.035);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(8px);

transition:.25s;
}

/* hover */

.contact-box:hover{

transform:translateY(-3px);

border-color:
rgba(250,204,21,.18);

background:
rgba(255,255,255,.05);
}

/* ICON */

.contact-box i{

width:42px;
height:42px;

display:flex;

align-items:center;
justify-content:center;

border-radius:12px;

background:
linear-gradient(
135deg,
#facc15,
#f97316
);

color:#000;

font-size:15px;

flex-shrink:0;
}

/* TEXT */

.contact-box h5{

font-size:12px;

font-weight:700;

margin-bottom:2px;

color:#94a3b8;
}

.contact-box p{

font-size:13px;

color:#fff;

line-height:1.5;

word-break:break-word;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.footer-contact-bar{

grid-template-columns:1fr;

gap:10px;

margin-top:28px;
}

.contact-box{

padding:12px 14px;

border-radius:12px;
}

.contact-box i{

width:38px;
height:38px;

font-size:14px;
}

.contact-box h5{

font-size:11px;
}

.contact-box p{

font-size:12px;
}

}








/* زر واتساب عائم - نسخة احترافية */ /* زر ثابت للتواصل */

/* زر واتساب دائري */ /* الشكل الأساسي */
.whatsapp-float{
position:fixed; /* ثابت على الشاشة */
bottom:25px; /* المسافة من الأسفل */
left:20px; /* المسافة من اليسار */

width:60px; /* العرض */
height:60px; /* الارتفاع */

display:flex; /* flex */
align-items:center; /* توسيط رأسي */
justify-content:center; /* توسيط أفقي */

background:#25D366; /* لون واتساب */
color:#fff; /* لون الأيقونة */

border-radius:50%; /* شكل دائري */

font-size:28px; /* حجم الأيقونة */

text-decoration:none; /* إزالة الخط */

box-shadow:
0 10px 30px rgba(0,0,0,.4), /* ظل */
0 0 0 0 rgba(37,211,102,0.7); /* بداية تأثير pulse */

z-index:9999; /* فوق كل العناصر */

transition:.3s; /* حركة */
}

/* hover */ /* عند المرور */
.whatsapp-float:hover{
transform:scale(1.1); /* تكبير */
box-shadow:
0 15px 40px rgba(0,0,0,.5), /* ظل أكبر */
0 0 20px rgba(37,211,102,0.6); /* توهج */
}

/* pulse animation 🔥 */ /* أنيميشن النبض */
.whatsapp-float{
animation:pulse 2s infinite; /* تكرار مستمر */
}

@keyframes pulse{
0%{
box-shadow:
0 0 0 0 rgba(37,211,102,0.7); /* بداية */
}
70%{
box-shadow:
0 0 0 20px rgba(37,211,102,0); /* انتشار */
}
100%{
box-shadow:
0 0 0 0 rgba(37,211,102,0); /* اختفاء */
}
}

/* icon */ /* الأيقونة داخل الزر */
.whatsapp-float i{
pointer-events:none; /* منع التفاعل المباشر */
}

/* موبايل */ /* تصغير الزر على الشاشات الصغيرة */
@media(max-width:768px){

.whatsapp-float{
width:55px; /* عرض أقل */
height:55px; /* ارتفاع أقل */
font-size:24px; /* حجم أصغر */
bottom:15px; /* أقرب للأسفل */
left:15px; /* أقرب لليسار */
}

}

/* إضافة حركة عائمة + نبض */ /* دمج أنيميشنين */
.whatsapp-float{
animation:pulse 2s infinite, floatY 3s ease-in-out infinite;
}

@keyframes floatY{ /* حركة الطفو */
0%,100%{transform:translateY(0);} /* الوضع الطبيعي */
50%{transform:translateY(-6px);} /* ارتفاع بسيط */
}

















































/* ================= BASIC PROTECTION ================= */

img{

-webkit-user-drag:none;

user-select:none;

pointer-events:auto;
}

body{

-webkit-touch-callout:none;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;
}