/* ========================================
   HOME PAGE — Specific Styles
   ======================================== */

/* Hero */
.hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.15); } }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(14,14,14,0.85) 0%, rgba(14,14,14,0.4) 50%, rgba(14,14,14,0.7) 100%); z-index: 1; }
.hero-content { position: relative; z-index: 2; padding: 0 clamp(24px, 8vw, 120px); max-width: 800px; }
.hero-label { font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--color-accent); font-weight: 400; margin-bottom: 24px; opacity: 0; animation: fadeUp 1s 0.5s var(--transition) forwards; }
.hero-title { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 300; line-height: 1.05; color: var(--color-white); margin-bottom: 20px; opacity: 0; animation: fadeUp 1s 0.7s var(--transition) forwards; }
.hero-title em { font-style: italic; color: var(--color-accent); }
.hero-subtitle { font-size: 1rem; color: var(--color-text-muted); font-weight: 300; line-height: 1.8; max-width: 480px; margin-bottom: 40px; opacity: 0; animation: fadeUp 1s 0.9s var(--transition) forwards; }
.hero-content .hero-cta { opacity: 0; animation: fadeUp 1s 1.1s var(--transition) forwards; }
.hero-scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: fadeUp 1s 1.5s var(--transition) forwards; }
.hero-scroll-indicator span { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-text-muted); }
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--color-accent), transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.5); } 50% { opacity: 1; transform: scaleY(1); } }

/* Intro Section */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.intro-image { position: relative; overflow: hidden; border-radius: 2px; }
.intro-image img { width: 100%; height: 500px; object-fit: cover; transition: transform 1.2s var(--transition); }
.intro-image:hover img { transform: scale(1.05); }
.intro-image::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--color-border); pointer-events: none; }
.intro-stats { display: flex; gap: 40px; margin-top: 40px; }
.stat-item { text-align: center; }
.stat-number { font-family: var(--font-display); font-size: 2.4rem; font-weight: 300; color: var(--color-accent); }
.stat-label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }

/* ========================================
   MODIFIED SERVICES (Image Based)
   ======================================== */
.services-strip { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* مسافة بين البطاقات */
    padding: 60px 0;
}

.service-item { 
    position: relative;
    border: 1px solid var(--color-border); 
    background: transparent;
    transition: all 0.5s var(--transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0; /* إلغاء التبطين الداخلي لتلتصق الصورة بالحواف */
}

/* حاوية الصورة */
.service-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10; /* أبعاد الصورة */
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

.service-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.service-item:hover img {
    transform: scale(1.1);
}

.service-item:hover { 
    border-color: var(--color-accent);
    background: rgba(201,169,110,0.02); 
}

/* النصوص تحت الصورة */
.service-name { 
    font-family: var(--font-display); 
    font-size: 1.1rem; 
    font-weight: 400; 
    color: var(--color-white); 
    margin: 25px 20px 10px; /* هوامش داخلية للنص */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.service-text { 
    font-size: 0.85rem; 
    color: var(--color-text-muted); 
    line-height: 1.7; 
    padding: 0 20px 30px; /* هوامش داخلية للوصف */
}

/* Featured Section */
.featured-project { position: relative; overflow: hidden; border-radius: 2px; cursor: pointer; }
.featured-project img, .featured-video { width: 100%; height: 70vh; min-height: 400px; object-fit: cover; transition: transform 1.5s var(--transition); }
.featured-project:hover img { transform: scale(1.06); }
.featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,14,14,0.9) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(30px, 5vw, 60px); }
.featured-tag { font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; }
.featured-name { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 300; color: var(--color-white); margin-bottom: 8px; }
.featured-info { font-size: 0.85rem; color: var(--color-text-muted); }

/* RTL Support */
html[dir="rtl"] .hero-content, 
html[dir="rtl"] .service-name, 
html[dir="rtl"] .service-text,
html[dir="rtl"] .intro-grid { text-align: right; }

/* Responsiveness */
@media (max-width: 1024px) { 
    .intro-grid { grid-template-columns: 1fr; } 
    .services-strip { grid-template-columns: 1fr 1fr; } /* صورتين في الصف للأجهزة المتوسطة */
}

@media (max-width: 768px) {
  .services-strip { grid-template-columns: 1fr; gap: 30px; }
  .service-item { border-bottom: 1px solid var(--color-border); }
  .intro-image img { height: 350px; }
}

@media (max-width: 480px) { 
    .hero-title { font-size: 2.4rem; } 
    .intro-stats { flex-direction: column; gap: 20px; } 
}