/* CSS مخصص للتصميم الاحترافي والخطوط - تم تحديث الألوان للمطابقة الدقيقة */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
 
:root {
    /* الألوان الأساسية (الوضع النهاري) */
    --color-dark-green: #0a462b;    /* الأساس الداكن (للنصوص والخلفيات الداكنة) */
    --color-light-green: #a7f0ba;   /* الإبراز الفاتح (الحدود، الأيقونات) */
    --color-main-green: #38b056;    /* الأزرار، الأيقونات، التركيز */
    --color-black: #080808;         /* للنصوص الأساسية على الخلفية الفاتحة */
    --color-white: #ffffff;         /* لخلفية البطاقات النظيفة/النصوص على الخلفية الداكنة */
    --color-bg-very-light: #f7fff7; /* خلفية الصفحة الفاتحة جداً (أقرب لصورك) */
    --color-header-links: #4a4a4a;  /* لون روابط الهيدر */
    --header-height: 64px; 
}

/* ========================================= */
/* الوضع الليلي (DARK MODE) */
/* ========================================= */
.dark-mode {
    --color-dark-green: #101010;    /* خلفية داكنة جداً */
    --color-light-green: #7fd294;   /* إبراز فاتح */
    --color-main-green: #38b056;    /* تركيز أخضر (يبقى ساطعاً) */
    --color-black: #ffffff;         /* النصوص الأساسية تصبح بيضاء */
    --color-white: #1e1e1e;         /* خلفية البطاقات تصبح داكنة */
    --color-bg-very-light: #0d0d0d; /* خلفية الصفحة الأساسية تصبح أغمق */
    --color-header-links: #aaaaaa;  /* روابط الهيدر تصبح رمادية فاتحة */
}

/* ========================================= */
/* الأنماط العامة */
/* ========================================= */

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--color-bg-very-light); /* الخلفية الفاتحة جداً */
    color: var(--color-black);
    min-height: 100vh;
    transition: background-color 0.3s;
    margin: 0; /* إزالة هوامش الجسم الافتراضية */
    padding: 0;
    overflow-x: hidden; /* حل مشكلة الشريط الجانبي الأفقي */
}

/* الألوان الأساسية للواجهة */
.bg-primary-dark { background-color: var(--color-dark-green); } /* الإحصائيات والفوتير */
.text-primary-light { color: var(--color-main-green); } /* الشعار والعناوين الفرعية */

/* شريط التنقل */
.bg-navbar-light { 
    background-color: var(--color-white); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.dark-mode .bg-navbar-light {
    background-color: var(--color-white); /* خلفية شريط التنقل داكنة في الوضع الليلي */
    box-shadow: 0 2px 10px rgba(255,255,255,0.05);
}
.dark-mode .text-black {
    color: var(--color-black); /* النص يصبح أبيض */
}
.dark-mode .text-gray-700, .dark-mode .text-gray-800 {
    color: #b0b0b0;
}


/* تنسيق الأزرار الرئيسي */
.btn-primary {
    background-color: var(--color-main-green);
    color: var(--color-white); 
    transition: all 0.3s ease;
    /* ظل أعمق وأكثر احترافية */
    box-shadow: 0 8px 25px rgba(56, 176, 86, 0.45);
}
.btn-primary:hover {
    background-color: var(--color-dark-green); 
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(56, 176, 86, 0.7);
}
 
/* تصميم البطاقات - لون أخضر خفيف جداً يطابق صورك */
.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-light-green);
    transition: box-shadow 0.3s ease, transform 0.3s;
    color: var(--color-black);
    /* ظل أعمق */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
/* إضافة نمط الوضع الداكن للبطاقات التي كانت تعتمد على خلفية بيضاء */
.dark-mode .card {
    background-color: var(--color-white); /* استخدام لون البطاقات الداكن */
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.05);
}
.card:hover {
     border-color: var(--color-main-green);
     transform: translateY(-5px); 
     box-shadow: 0 15px 30px rgba(56, 176, 86, 0.3);
}
.feature-icon {
    color: var(--color-main-green);
}

/* تصميم البطاقات المكدسة الداكنة الجديدة */
.sticky-card-dark {
    /* تطبيق الخلفية الداكنة في الوضع النهاري والليلي */
    background-color: var(--color-dark-green) !important;
    color: var(--color-white) !important; 
    border: 1px solid var(--color-main-green) !important; 
}
.sticky-card-dark .card-title {
    /* العنوان أبيض في الوضعين */
    color: var(--color-black) !important; 
}
.sticky-card-dark .card-text {
    /* النص التوضيحي بلون فاتح مائل للخضرة في الوضعين */
    color: var(--color-light-green) !important; 
}
.sticky-card-dark .feature-icon {
    /* الأيقونات بلون فاتح مائل للخضرة في الوضعين */
    color: var(--color-light-green) !important; 
}

/* تطبيق الألوان في الوضع النهاري (لضمان أن يكون النص أبيض على الخلفية الداكنة) */
.sticky-card-dark:not(.dark-mode) .card-title,
.sticky-card-dark:not(.dark-mode) .card-text {
    color: var(--color-white) !important;
}
.sticky-card-dark:not(.dark-mode) .feature-icon {
    color: var(--color-light-green) !important; 
}
 
/* تأثير النبض على العنوان */
@keyframes pulse-main-green {
    0% { text-shadow: 0 0 5px rgba(56, 176, 86, 0); }
    50% { text-shadow: 0 0 15px rgba(56, 176, 86, 0.7); }
    100% { text-shadow: 0 0 5px rgba(56, 176, 86, 0); }
}
.hero-title-pulse span {
    animation: pulse-main-green 3s infinite ease-in-out;
}

/* تنسيق البطاقات المكدسة */
.sticky-card-container { 
    padding-bottom: 0; 
    max-width: 900px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 0; 
}
.sticky-card {
    /* بقية التنسيق كما هو */
    position: sticky;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 30px; 
    margin-bottom: 0; 
    transform: scale(1.0); 
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    min-height: 200px; 
}
/* تحديد موضع البطاقات المكدسة */
.sticky-card:nth-child(1) { top: calc(var(--header-height) + 15px); z-index: 1; } 
.sticky-card:nth-child(2) { top: calc(var(--header-height) + 30px); z-index: 2; }
.sticky-card:nth-child(3) { top: calc(var(--header-height) + 45px); z-index: 3; }
.sticky-card:nth-child(4) { top: calc(var(--header-height) + 60px); z-index: 4; }
.sticky-card:nth-child(5) { top: calc(var(--header-height) + 75px); z-index: 5; }
.sticky-card:nth-child(6) { top: calc(var(--header-height) + 90px); z-index: 6; }
.sticky-card:nth-child(7) { top: calc(var(--header-height) + 105px); z-index: 7; }
.sticky-card:nth-child(8) { top: calc(var(--header-height) + 120px); z-index: 8; }
.sticky-card:nth-child(9) { top: calc(var(--header-height) + 135px); z-index: 9; } 
 
/* تعديل موضع الإحصائيات لتبدأ تحت الفاصل الجديد */
#stats { 
    margin-top: 0; 
    position: relative; 
    z-index: 10; 
}
 
/* تحسين مظهر التمرير الأفقي (إخفاء شريط التمرير الافتراضي) */
.scrolling-wrapper::-webkit-scrollbar { display: none; }
.scrolling-wrapper { -ms-overflow-style: none; scrollbar-width: none; }

/* أنماط الأكورديون (الأسئلة الشائعة) - تم التعديل هنا ليكون داكناً وراقياً */
.faq-accordion-dark details {
    margin-bottom: 1rem;
    border: 1px solid var(--color-main-green);
    border-radius: 0.75rem;
    background-color: var(--color-dark-green); /* خلفية داكنة */
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    color: var(--color-white);
}
.faq-accordion-dark details:hover {
    background-color: var(--color-dark-green);
    border-color: var(--color-light-green); /* تفتيح الحدود عند التمرير */
}
.faq-accordion-dark summary {
    font-weight: 700;
    /* تم التعديل هنا (1): لضمان لون النص الأبيض/الفاتح */
    color: var(--color-black); 
    list-style: none;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.faq-accordion-dark details[open] summary {
    /* تم التعديل هنا (2): لضمان لون الإبراز عند الفتح */
    color: var(--color-light-green); 
    border-bottom: 1px solid var(--color-main-green);
}
.faq-accordion-dark details[open] summary svg {
     transform: rotate(180deg);
     color: var(--color-light-green);
}
.faq-accordion-dark summary svg {
     /* الأيقونة يجب أن تكون بيضاء/فاتحة في الوضع العادي أيضاً */
     color: var(--color-black);
     transition: transform 0.3s, color 0.3s;
}
.faq-accordion-dark .faq-content {
    color: var(--color-light-green); /* محتوى الإجابة بلون فاتح */
    padding: 1.25rem;
    line-height: 1.75;
}
.faq-question-icon {
    color: var(--color-main-green);
    margin-left: 10px;
}


/* CTA Animations */
@keyframes shimmering-border {
    0% { box-shadow: 0 0 0 0px rgba(56, 176, 86, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(56, 176, 86, 0); }
    100% { box-shadow: 0 0 0 0px rgba(56, 176, 86, 0.5); }
}
@keyframes button-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
.cta-container-glow {
    background-color: var(--color-main-green); 
    box-shadow: 0 0 20px rgba(56, 176, 86, 0.7); 
    animation: shimmering-border 4s infinite cubic-bezier(0.4, 0, 0.6, 1);
    position: relative;
    overflow: hidden;
    color: var(--color-white);
}
.cta-button-animated {
    animation: button-pulse 1.5s infinite ease-in-out;
}
.cta-button-animated:hover {
    animation: none;
}
.whatsapp-text { color: var(--color-main-green); } 
 
/* تحسين مظهر قسم الإحصائيات (القسم الداكن) */
.stats-card {
    background-color: var(--color-dark-green) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}
.stats-card:hover {
     transform: translateY(-5px) scale(1.02);
}
 
/* أنيميشن الاهتزاز للمربعات الثلاثة */
@keyframes shake-and-lift {
    0% { transform: translateY(0); }
    25% { transform: translateY(-5px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
.why-card-animated {
    animation: shake-and-lift 2s ease-in-out 0s 1; /* تشغيل مرة واحدة عند التحميل */
}
.why-card-animated:hover {
     /* إلغاء اهتزاز التحميل واستبداله بتأثير الرفع فقط عند التمرير */
     animation: none;
     transform: translateY(-5px) !important; 
}

/* أنيميشن ظهور الأقسام عند التمرير (FadeInUp) */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.section-animated {
    opacity: 0; /* يبدأ مخفياً */
}
.section-visible {
    animation: fadeInUp 1s ease-out forwards;
}
 
/* ========================================= */
/* تحديثات الفخامة والـ Animations */
/* ========================================= */
 
/* الحركة عند ظهور صورة الهيرو */
@keyframes hero-image-pop {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.hero-image-container {
     animation: hero-image-pop 1s ease-out forwards;
     opacity: 0; /* يبدأ مخفياً قبل الحركة */
}

/* تنسيق الشعار المخصص (Botify Logo) - تم التعديل ليكون أيقونة فقط */
.botify-logo-icon {
    display: flex;
    align-items: center;
    height: 40px; /* لتحديد ارتفاع الأيقونة */
    width: auto;
    object-fit: contain;
}
 
/* تحسينات الاحترافية على الخطوط */
h1, h2, h3 {
     font-weight: 900; /* جعل العناوين أكثر بروزاً */
}
 
/* ========================================= */
/* التعديلات لـ "لا أريد فراغات أبداً" */
/* ========================================= */
 
/* إزالة الهوامش الرأسية الأساسية بين الأقسام */
section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
 
/* تصحيح الهوامش الداخلية الأساسية للأقسام للبدء/الانتهاء عند الحافة */
.section-content-wrapper {
     /* هذا هو div داخلي جديد للتحكم في عرض المحتوى وترك الهوامش الجانبية فقط */
     max-width: 1280px; /* max-w-7xl */
     margin: 0 auto;
     padding: 4rem 1rem; /* إعادة إضافة padding رأسي موحد لكل قسم للمحتوى الداخلي */
     box-sizing: border-box; /* التأكد من أن الهوامش لا تزيد من العرض الكلي */
     width: 100%; /* التأكد من أخذ العرض بالكامل داخل القسم */
}
 
/* استثناء قسم البطل (Hero) لأنه يحتاج ارتفاعًا */
#hero {
     padding-top: 5rem !important; /* pt-20 */
     padding-bottom: 7rem !important; /* pb-28 */
}
 
/* استثناء حاوية الشعار المكدس التي كانت تسبب فراغاً */
#detailed-features .sticky-card-container {
     margin-bottom: 0;
     padding-bottom: 4rem; /* فقط لإعطاء مسافة تحت البطاقة الأخيرة قبل نهاية القسم */
}
 
/* إزالة الفاصل البصري السابق */
.section-divider {
    display: none !important; 
}

/* تعديل التذييل ليتصل بالقسم الأخير (CTA) */
footer {
    margin-top: 0 !important; /* إزالة mt-16 */
    padding-top: 1.5rem !important; /* تقليل الهوامش الداخلية */
    padding-bottom: 1.5rem !important;
}

/* تعديل CTA ليتصل بالقسم الذي يليه */
#cta-last {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
 
/* نمط الزر الجديد للاستشارة */
.btn-secondary-dark {
    background-color: var(--color-dark-green);
    color: var(--color-light-green);
    border: 2px solid var(--color-light-green);
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.btn-secondary-dark:hover {
    background-color: var(--color-main-green);
    color: var(--color-white);
    border-color: var(--color-white);
    transform: scale(1.05);
}
 
/* ========================================= */
/* أنماط القائمة الجانبية (Side Menu) */
/* ========================================= */
.side-menu {
    position: fixed;
    top: 0;
    right: -300px; /* إخفاء القائمة في البداية */
    width: 300px;
    max-width: 80vw;
    height: 100%;
    background-color: var(--color-dark-green);
    color: var(--color-black);
    z-index: 1000;
    padding: 2rem 1.5rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
}

.side-menu.open {
    right: 0;
}

.side-menu a {
    display: block;
    padding: 0.75rem 0;
    color: var(--color-black);
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.2s;
}
.side-menu a:hover {
    color: var(--color-main-green);
}

/* تعديل لزر "ابدأ مجاناً" داخل القائمة الجانبية ليكون نصه في المنتصف */
.side-menu .btn-primary {
    width: 100%;
    margin-top: 1.5rem;
    text-align: center; /* لجعل النص في المنتصف */
}
 
/* ========================================= */
/* تصميم قسم الإحصائيات الجديد (stats) */
/* ========================================= */
#stats {
    background: linear-gradient(135deg, var(--color-dark-green) 0%, #1a5e3a 100%); /* تدرج لوني جديد */
    position: relative;
    overflow: hidden; /* لإخفاء أي جزء زائد من الأشكال الزخرفية */
}

/* الأشكال الزخرفية في الخلفية */
#stats::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--color-main-green) 0%, transparent 70%);
    opacity: 0.1;
    transform: rotate(45deg);
}
#stats::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--color-light-green) 0%, transparent 70%);
    opacity: 0.15;
    transform: rotate(-30deg);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1; /* للتأكد من أن البطاقات فوق الأشكال الزخرفية */
}
@media (min-width: 768px) { /* md breakpoint */
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stats-item {
    background-color: rgba(255, 255, 255, 0.05); /* خلفية شبه شفافة */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem; /* حواف أكثر دائرية */
    padding: 2.5rem 1.5rem; /* زيادة حجم الـ padding */
    text-align: center;
    backdrop-filter: blur(5px); /* تأثير الزجاج الضبابي */
    transition: all 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
    /* إزالة الظل من العنصر الرئيسي */
    box-shadow: none; 
}

.dark-mode .stats-item {
     /* لتقليل الشفافية في الوضع الليلي */
    background-color: rgba(255, 255, 255, 0.03); 
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.stats-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-8px) scale(1.03); /* رفع وتكبير أكبر */
    /* إضافة ظل بسيط عند التمرير لتحسين تأثير الرفع */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--color-main-green); /* حدود بلون الإبراز عند التمرير */
}

.stats-item::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background: var(--color-main-green);
    border-radius: 50%;
    opacity: 0.1;
    filter: blur(20px);
    transition: all 0.4s ease-in-out;
}

.stats-item:hover::before {
    transform: scale(1.5) translate(10px, 10px);
    opacity: 0.2;
}

.stats-icon-wrapper {
    background: linear-gradient(45deg, var(--color-main-green), var(--color-light-green));
    -webkit-background-clip: text;
    background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-size: 3.5rem; /* حجم أكبر للأيقونة */
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-block; /* لضمان تطبيق التدرج اللوني على الأيقونة بشكل صحيح */
    filter: drop-shadow(0 5px 10px rgba(56, 176, 86, 0.5));
    transition: all 0.4s ease-in-out;
}
.stats-item:hover .stats-icon-wrapper {
    transform: rotate(5deg) scale(1.1);
    filter: drop-shadow(0 8px 15px rgba(56, 176, 86, 0.7));
}

.stats-value {
    font-size: 4rem; /* حجم أكبر جداً للرقم */
    font-weight: 900;
    color: var(--color-white);
    /* تم حذف الـ text-shadow بالكامل */
    margin-bottom: 0.5rem;
    line-height: 1;
    transition: all 0.4s ease-in-out;
}
.stats-item:hover .stats-value {
    color: var(--color-light-green);
    /* تم حذف الـ text-shadow بالكامل */
}

.stats-description {
    font-size: 1.25rem; /* نص أكبر قليلاً */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85); /* لون أبيض فاتح جداً */
    line-height: 1.4;
}

/* ========================================= */
/* تصميم قسم شعارات العملاء (Client Logos) - شريط لا نهائي وفخم */
/* ========================================= */

/* مفتاح الحركة لـ RTL (يمين لليسار) */
@keyframes scroll-rtl {
    0% { transform: translateX(0); }
    /* تحريك المجموعة الواحدة (50%) ثم تكرارها */
    100% { transform: translateX(-50%); } 
}
 
.client-logo-strip {
     overflow: hidden;
     white-space: nowrap;
     position: relative;
     width: 100%;
     padding: 1.5rem 0; /* زيادة المسافة الرأسية للشريط */
     background-color: var(--color-white); /* التأكد من الخلفية البيضاء */
     /* إضافة قناع متدرج (Gradient Mask) لإخفاء/إظهار الشعارات بسلاسة على الحواف */
     -webkit-mask-image: linear-gradient(to left, transparent 0%, black 5%, black 95%, transparent 100%);
     mask-image: linear-gradient(to left, transparent 0%, black 5%, black 95%, transparent 100%);
     box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* ظل خفيف تحت الشريط */
}
 
/* الوضع الليلي للشريط */
.dark-mode .client-logo-strip {
    background-color: var(--color-white); /* لون الخلفية الداكنة */
    box-shadow: 0 5px 15px rgba(255,255,255,0.05);
}
.dark-mode .client-logo-item {
     /* تفتيح الشعارات في الوضع الداكن */
    filter: grayscale(100%) opacity(80%) invert(100%); 
}
.dark-mode .client-logo-item:hover {
     /* تلوين كامل للشعارات عند التمرير في الوضع الداكن */
     filter: grayscale(0%) opacity(100%) invert(0); 
}

.client-logo-group {
     display: inline-flex;
     /* يجب أن تكون مدة الأنميشن ضعف المدة السابقة لأننا نكرر المجموعة مرتين */
     animation: scroll-rtl 30s linear infinite; 
}
 
.client-logo-strip:hover .client-logo-group {
    animation-play-state: paused; /* إيقاف الحركة عند التمرير */
}
 
.client-logo-item {
     width: 150px; /* عرض ثابت لكل شعار */
     flex-shrink: 0;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 2.5rem; /* زيادة المسافة بين الشعارات */
     transition: all 0.4s ease;
     /* مظهر احترافي: أبيض وأسود مع تلاشي عند عدم التمرير */
     filter: grayscale(100%) opacity(60%);
     cursor: pointer;
}

.client-logo-item:hover {
     filter: grayscale(0%) opacity(100%);
     transform: scale(1.15); /* تكبير أكثر عند التمرير */
}

.client-logo-img {
     max-width: 90%;
     max-height: 90%;
     object-fit: contain;
}
/* ========================================= */
/* أنماط تعليقات العملاء (Testimonials) */
/* ========================================= */
.scrolling-wrapper {
    /* إضافة بعض الزخرفة الإضافية للتمرير الأفقي */
    border-radius: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    /* إضافة ظل خفيف لا يتأثر بالوضع الليلي */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05); 
}
.card.flex-none {
    /* جعل بطاقة التعليق تبدو أكثر فخامة */
    border-left: 5px solid var(--color-main-green); /* خط عمودي على الجانب */
    border-top: none; 
    transition: all 0.4s ease-in-out;
}
.card.flex-none:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(56, 176, 86, 0.4);
}
/* تنسيق الصورة الشخصية للعميل في البطاقة */
.card .rounded-full {
    border: 3px solid var(--color-main-green);
    object-fit: cover;
    box-shadow: 0 0 5px rgba(56, 176, 86, 0.5);
}
.card .text-sm.text-primary-light {
    font-weight: 500;
}


/* ========================================= */
/* أنماط الأقسام ذات الخلفية البيضاء في الوضع النهاري */
/* ========================================= */

/* تعيين لون خلفية داكن للأقسام التي كانت بيضاء (مثل كيف نعمل، الاستخدام المتقدم، لماذا بوتيفاي، آراء العملاء، الاستشارة، وأقسام المحتوى المتغيرة) */
.dark-mode #how-it-works,
.dark-mode #advanced-use,
.dark-mode #why-botify,
.dark-mode #testimonials,
.dark-mode #faq,
.dark-mode #client-logos,
.dark-mode section:not(#stats):not(#cta-last):not(#hero) {
    background-color: var(--color-bg-very-light) !important; /* لون الخلفية الداكنة للصفحة */
    color: var(--color-black); /* لون النص الأبيض */
}

/* تعيين لون خلفية داكن لبطاقة الهيرو الداخلية */
.dark-mode #hero-image {
    background-color: var(--color-dark-green) !important;
}

/* تعديل خلفية الـ CTA Consultation ليتناسب مع الوضع الداكن */
.dark-mode #consultation {
    /* الخلفية الداكنة */
    background-color: var(--color-bg-very-light) !important;
    /* الحدود الخضراء تصبح بلون فاتح */
    border-top-color: var(--color-light-green) !important;
}

/* تعديل الحدود والتفاصيل الأخرى التي قد تبقى بيضاء */
.dark-mode #detailed-features {
    border-top-color: var(--color-light-green) !important;
}
.dark-mode section.rounded-3xl {
     border-top-color: var(--color-light-green) !important;
     border-bottom-color: var(--color-light-green) !important;
}

/* لضمان أن النصوص الرمادية داخل البطاقات تصبح فاتحة */
.dark-mode .text-gray-700,
.dark-mode .text-gray-600,
.dark-mode .text-gray-800 {
    color: var(--color-header-links) !important; /* استخدام لون رمادي فاتح مخصص */
}

/* لضمان أن زر "كيف نعمل" في الهيرو يصبح داكناً */
.dark-mode .bg-gray-200 {
    background-color: var(--color-white) !important; /* استخدام لون البطاقات الداكنة */
    border-color: var(--color-light-green) !important;
    color: var(--color-black) !important;
}
.dark-mode .bg-gray-200:hover {
    background-color: var(--color-dark-green) !important; 
    border-color: var(--color-main-green) !important;
}

/* لضمان أن لون النص في رابط الدردشة المباشرة (Live Chat) يظل مرئياً */
.dark-mode .border-t {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* تعديل الخلفية في قسم Hero Image */
.dark-mode #hero-image {
     background-color: var(--color-white) !important;
}

/* ========================================= */
/* التعديلات الخاصة بقسم "جميع صلاحيات الأتمتة بين يديك" في الوضع النهاري */
/* ========================================= */

#detailed-features h2 {
    color: var(--color-dark-green) !important;
}