/* الألوان الديناميكية المخصصة */
:root {
    --header-bg-color: #e7cd08;
    --hero-bg-color: #e7cd08;
    --call-btn-text-color: #22221b;
    --floating-call-bg-color: #10100f;
    --cta-btn-text-color: #000000;
    --counter-color: #f9e02f;
    --section-title-color: #000000;
    --service-accent-color: #f9e02f;
    --cta-section-bg-color: #f9e02f;
    --feature-color: #f9e02f;
    --footer-bg-color: #f9e02f;
}

/* تطبيق الألوان على العناصر */

/* لون خلفية الهيدر */
.header {
    background-color: var(--header-bg-color) !important;
}

/* لون خلفية الهيرو */
.hero {
    background: linear-gradient(135deg, var(--hero-bg-color) 0%, var(--hero-bg-color) 100%) !important;
}

/* لون نص زر الاتصال */
.call-btn {
    color: var(--call-btn-text-color) !important;
}

/* لون خلفية زر الاتصال العائم */
.floating-call a {
    background-color: var(--floating-call-bg-color) !important;
}

/* لون نص أزرار الإجراء */
.cta-btn {
    color: var(--cta-btn-text-color) !important;
}

/* لون العدادات والأيقونات */
.counter-item i,
.counter-number {
    color: var(--counter-color) !important;
}

/* لون عناوين الأقسام */
.section-title {
    color: var(--section-title-color) !important;
}

.section-title::after {
    background-color: var(--section-title-color) !important;
}

/* لون تمييز الخدمات */
.service-image {
    border-color: var(--service-accent-color) !important;
}

.service-item h3 {
    color: var(--service-accent-color) !important;
}

.service-btn {
    background-color: var(--service-accent-color) !important;
}

.service-item:hover .service-image {
    border-color: var(--service-accent-color) !important;
}

/* لون خلفية قسم الدعوة للعمل */
.cta-section {
    background-color: var(--cta-section-bg-color) !important;
}

/* لون المميزات والخصائص */
.feature-item i {
    color: var(--feature-color) !important;
}

.feature-item h3 {
    color: var(--feature-color) !important;
}

/* لون خلفية التذييل */
.footer {
    background-color: var(--footer-bg-color) !important;
}

/* تحسينات إضافية للألوان */
.service-item:hover .service-btn {
    background-color: var(--service-accent-color) !important;
    opacity: 0.9;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.nav-link.active {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* تأثيرات الهوفر للأزرار */
.call-btn:hover {
    background-color: #f0f8ff !important;
}

.cta-btn:hover {
    background-color: #f0f8ff !important;
}

.floating-call a:hover {
    background-color: var(--floating-call-bg-color) !important;
    opacity: 0.8;
    transform: scale(1.1);
}

.service-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}