/* ========================================
Dynamic Theme Variables - Generated from Database
======================================== */

:root {
/* Primary Colors - الألوان الرئيسية */
--gold-primary: #e5dfcd;
--gold-dark: #beb8a6;
--gold-light: #ffffff;
--gold-metallic: linear-gradient(135deg, #e5dfcd 0%, #ffffff 50%, #e5dfcd100%);

/* Secondary Colors - الألوان الثانوية */
--black-primary: #7f0b66;
--black-soft: #98247f;
--black-lighter: #cb57b2;

/* Text Colors */
--text-primary: #6b6b6b;

/* Background */
--bg-primary: #d4d4d4;

/* Dynamic Images - متغير الصورة الجديد */
--hero-bg-image: url('../images/hero-bg.png?v=1765224232');

/* Gradients */
--gradient-gold: linear-gradient(135deg, #e5dfcd 0%, #ffffff 50%, #e5dfcd100%);
--gradient-gold-radial: radial-gradient(circle, #ffffff 0%, #e5dfcd 100%);
--gradient-black-gold: linear-gradient(135deg, #7f0b66 0%,
#b23e99 50%, #e5dfcd 100%);

/* Shadow with primary color */
--shadow-gold: 0 4px 30px #e5dfcd4D;
--shadow-gold-strong: 0 8px 40px #e5dfcd80;
}

/* ========================================
Hero Section Image Control
======================================== */

/* تطبيق الصورة الديناميكية على قسم الهيرو */
.hero {
background-image: var(--hero-bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

/* إخفاء الصورة القديمة الموجودة في HTML */
.hero .hero-bg,
.hero img.hero-bg {
display: none !important;
}

/* طبقة التظليل لتحسين قراءة النص */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, #e5dfcd4D 100%);
z-index: -1;
}

/* تحسين النص داخل الهيرو */
.hero .about-content {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

/* ========================================
Dark Mode Logic
======================================== */

/* ========================================
Hero Section Dynamic Styles
======================================== */

/* Hero Content - جعل العنوان في الوسط بدون مربع */
.hero-content {
text-align: center;
color: white;
max-width: 900px;
margin: 0 auto;
padding: 2rem;
position: relative;
z-index: 2;
}

.hero-title {
font-size: 4rem;
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
/* هايلايت خفيف فقط - بدون خلفية ملونة */
display: inline-block;
padding: 0.5rem 1rem;
position: relative;
/* تدرج نصي خفيف */
background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 50%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 1px;
}

/* تأثير هايلايت خفيف فقط تحت العنوان */
.hero-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
background: #e5dfcd;
opacity: 0.5;
border-radius: 2px;
}

.hero-subtitle {
font-size: 1.8rem;
margin-bottom: 1.5rem;
opacity: 0.9;
font-weight: 500;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-description {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 2.5rem;
opacity: 0.85;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.hero-cta {
margin-top: 2rem;
}

.btn-gold {
background: linear-gradient(135deg, #e5dfcd, #ffffff) !important;
color: #7f0b66 !important;
padding: 1rem 2.5rem !important;
border-radius: 30px !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
border: none !important;
box-shadow: 0 4px 20px rgba(229,
223, 205, 0.3) !important;
transition: all 0.3s ease !important;
display: inline-block !important;
text-decoration: none !important;
}

.btn-gold:hover {
transform: translateY(-3px) !important;
box-shadow: 0 6px 30px rgba(229,
223, 205, 0.5) !important;
}

/* تحسين طبقة التظليل للخلفية */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(229, 223,
205, 0.4) 50%,
rgba(0, 0, 0, 0.6) 100%);
z-index: 1;
}

/* تنسيق responsive للهيرو */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
padding: 0.3rem 0.8rem;
}

.hero-subtitle {
font-size: 1.3rem;
}

.hero-description {
font-size: 1rem;
padding: 0 1rem;
}
}

@media (max-width: 576px) {
.hero-title {
font-size: 2rem;
}

.hero-subtitle {
font-size: 1.1rem;
}

.hero-description p {
font-size: 0.95rem;
}
}