/**
 * Layout 9: Centered — كل شي مركزي مع مسافات كبيرة
 */

.layout9-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 60px 80px;
    text-align: center;
    background: var(--cream);
    position: relative;
}

.layout9-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at 50% 30%, rgba(184,134,11,0.06) 0%, transparent 70%);
}

.layout9-hero-inner { position: relative; z-index: 2; max-width: 700px; }
.layout9-hero-badge { display: inline-block; padding: 8px 24px; background: var(--white); border: 1px solid var(--border); border-radius: 50px; font-size: 0.85rem; color: var(--primary); font-weight: 600; margin-bottom: 30px; animation: fadeInDown 0.8s ease both; }
.layout9-hero h1 { font-size: 3.5rem; font-weight: 900; color: var(--text-dark); line-height: 1.15; margin-bottom: 12px; animation: fadeInUp 0.8s ease 0.2s both; }
.layout9-hero .hero-en { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--text-light); letter-spacing: 3px; margin-bottom: 20px; direction: ltr; animation: fadeInUp 0.8s ease 0.35s both; }
.layout9-hero p { font-size: 1.05rem; color: var(--text-mid); line-height: 1.9; margin: 0 auto 40px; animation: fadeInUp 0.8s ease 0.5s both; }
.layout9-hero .hero-buttons { animation: fadeInUp 0.8s ease 0.65s both; }
.layout9-hero-gallery { display: flex; gap: 20px; margin-top: 60px; position: relative; z-index: 2; animation: fadeInUp 1s ease 0.8s both; }
.layout9-hero-img { border-radius: 20px; overflow: hidden; flex: 1; max-height: 250px; box-shadow: var(--shadow-md); transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.layout9-hero-img:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.layout9-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.layout9-hero-img-1 { flex: 2; }

.layout9-stats .stats-grid { display: flex; justify-content: center; gap: 0; }
.layout9-stats .stat-item { border-radius: 0; border: none; border-left: 1px solid var(--border-light); background: transparent; padding: 30px 50px; }
.layout9-stats .stat-item:last-child { border-left: none; }
html[dir="rtl"] .layout9-stats .stat-item { border-left: none; border-right: 1px solid var(--border-light); }
html[dir="rtl"] .layout9-stats .stat-item:last-child { border-right: none; }

.layout9-services .services-grid { grid-template-columns: repeat(3, 1fr); }
.layout9-service-card { text-align: center; }
.layout9-service-featured { grid-column: auto; }

.layout9-projects .projects-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
    .layout9-services .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .layout9-hero { padding: 100px 25px 60px; min-height: auto; }
    .layout9-hero h1 { font-size: 2.5rem; }
    .layout9-hero-gallery { flex-direction: column; margin-top: 40px; }
    .layout9-hero-img { max-height: 180px; }
    .layout9-stats .stats-grid { flex-wrap: wrap; }
    .layout9-stats .stat-item { flex: 0 1 50%; border: none; border-bottom: 1px solid var(--border-light); }
    .layout9-services .services-grid, .layout9-projects .projects-grid { grid-template-columns: 1fr; }
}