/* Base - نظام ألوان تراثي سعودي احترافي */
:root{
  /* نظام ألوان تراثي سعودي متقدم */
  --heritage-gold:#D4AF37;        /* ذهب تراثي أصيل */
  --heritage-copper:#B87333;      /* نحاس تراثي */
  --heritage-bronze:#CD7F32;       /* برونزي تراثي */
  --heritage-sand:#F4E4BC;        /* رمل الصحراء */
  --heritage-earth:#8B4513;       /* لون الأرض */
  --heritage-sky:#4682B4;         /* لون السماء الصافية */
  
  /* ألوان ذهبية متدرجة */
  --gold-primary:#D4AF37;
  --gold-secondary:#F4E4BC;
  --gold-accent:#B8860B;
  --gold-light:#FFD700;
  --gold-dark:#8B7355;
  --gold-heritage:#9b7242;
  /* إضافات لضمان اتساق الثيم في جميع الاستدعاءات */
  --primary-gold: var(--gold-primary);
  --gold-1: var(--gold-primary);
  --gold-2: var(--gold-secondary);
  --gold-5: var(--gold-primary);
  
  /* ألوان النص المحسنة للقراءة */
  --text-primary:#FFFFFF;
  --text-secondary:#F5F5F5;
  --text-muted:#B8B8B8;
  --text-accent:var(--gold-primary);
  --text-heritage:var(--gold-heritage);
  
  /* ألوان الخلفية التراثية */
  --surface-dark:#0A0A0A;
  --surface-medium:#1A1A1A;
  --surface-light:#2A2A2A;
  --surface-heritage:#1C1C1C;
  --ink:#0A0A0B;
  --ink-2:#111113;
  --ink-3:#1A1A1C;
  --ink-4:#2A2A2C;
  
  /* ألوان إضافية */
  --light:#F7F7F7;
  --muted:#9BA0A6;
  --accent:#FF6B35;
  --success:#00C851;
  --warning:#FFBB33;
  --error:#FF4444;
  
  /* نظام الظلال المحسن */
  --shadow-sm:0 2px 4px rgba(0,0,0,.1);
  --shadow-md:0 4px 12px rgba(0,0,0,.15);
  --shadow-lg:0 8px 24px rgba(0,0,0,.2);
  --shadow-xl:0 16px 48px rgba(0,0,0,.25);
  --shadow-2xl:0 24px 64px rgba(0,0,0,.3);
  --shadow-gold:0 8px 32px rgba(201,169,110,.3);
  --shadow-glow:0 0 40px rgba(201,169,110,.2);
  /* إعدادات الزجاج العامة */
  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border: 1px solid rgba(255,255,255,0.12);
  --glass-gold-border: 1px solid rgba(212,175,55,0.25);
  --glass-blur: blur(20px);
  
  /* نظام المساحات المحسن */
  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2rem;
  --space-xl:3rem;
  --space-2xl:4rem;
  --space-3xl:6rem;
  
  /* التدرجات التراثية المحسنة */
  --gradient-heritage:linear-gradient(135deg,var(--heritage-gold),var(--heritage-copper),var(--heritage-bronze));
  --gradient-gold:linear-gradient(135deg,var(--gold-primary),var(--gold-secondary),var(--gold-accent));
  --gradient-dark:linear-gradient(135deg,var(--surface-dark),var(--surface-medium),var(--surface-light));
  --gradient-accent:linear-gradient(135deg,var(--heritage-sky),var(--gold-primary));
  --gradient-glass:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.05));
  --gradient-glow:radial-gradient(ellipse at center,rgba(212,175,55,.2),transparent 70%);
  --gradient-text:linear-gradient(135deg,var(--gold-primary),var(--gold-secondary));
  --gradient-heritage-text:linear-gradient(135deg,var(--heritage-gold),var(--heritage-sand));
  
  /* تأثيرات الضبابية التراثية */
  --blur-sm:blur(4px);
  --blur-md:blur(8px);
  --blur-lg:blur(16px);
  --blur-xl:blur(24px);
  
  /* تأثيرات الانتقال المتقدمة */
  --transition-fast:0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal:0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-heritage:0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* تأثيرات تراثية متقدمة */
  --heritage-pattern:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --heritage-border:linear-gradient(45deg, var(--heritage-gold), var(--heritage-copper), var(--heritage-bronze));
}

*{box-sizing:border-box;}

html{
  scroll-behavior:auto; /* تحسين الأداء على الجوال */
  -webkit-overflow-scrolling:touch; /* سلاسة التمرير على iOS */
  /* تحسين rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* تحسين scroll performance */
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  /* تحسين rendering */
  text-rendering: optimizeSpeed;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* تحسين scroll على الجوال */
@media (max-width: 768px) {
  html {
    scroll-behavior: auto; /* إيقاف smooth scroll على الجوال لتحسين الأداء */
  }
  
  body {
    overscroll-behavior-y: contain; /* منع overscroll bounce على iOS */
    -webkit-overflow-scrolling: touch;
  }
}

/* استيراد الخطوط التراثية الاحترافية */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;700&display=swap');

body{
  margin:0;
  font-family:'Cairo','Tajawal','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  background:var(--surface-dark);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
  overflow-x:hidden;
  line-height:1.7;
  direction:rtl;
  text-align:right;
  font-weight:400;
  letter-spacing:0.01em;
  /* تحسين scroll performance */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* نظام الطباعة الهرمي */
.heading-1 { 
  font-family:'Amiri','Scheherazade New','Tajawal',serif;
  font-size:clamp(3rem,6vw,5rem); 
  font-weight:700; 
  line-height:1.1;
  background:var(--gradient-heritage-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:0.02em;
  padding:30px 0;
  overflow:visible;
  text-align:center;
  direction:rtl;
  unicode-bidi:bidi-override;
  text-shadow:0 0 40px rgba(212,175,55,0.5), 0 0 30px rgba(201,169,110,0.3);
  position:relative;
  filter:drop-shadow(0 4px 20px rgba(184,134,11,0.2));
}

.heading-2 { 
  font-family:'Amiri','Scheherazade New','Tajawal',serif;
  font-size:clamp(2.5rem,5vw,3.5rem); 
  font-weight:700; 
  line-height:1.2;
  color:var(--gold-primary);
  letter-spacing:0.01em;
  text-align:center;
  margin-bottom:2rem;
  position:relative;
}

.heading-3 { 
  font-family:'Cairo','Tajawal',sans-serif;
  font-size:clamp(1.5rem,3vw,2rem); 
  font-weight:600; 
  line-height:1.3;
  color:var(--gold-secondary);
  margin-bottom:1rem;
}

.body-large { 
  font-family:'Cairo','Tajawal',sans-serif;
  font-size:1.25rem; 
  line-height:1.7; 
  color:var(--text-secondary);
  font-weight:400;
  letter-spacing:0.01em;
}

.body-regular { 
  font-size:1rem; 
  line-height:1.5; 
  color:var(--text-secondary);
  font-weight:400;
}

.body-small { 
  font-size:0.875rem; 
  line-height:1.4; 
  color:var(--text-muted);
  font-weight:400;
}

.container{
  max-width:1400px;
  width:min(1400px,92%);
  margin:0 auto;
  padding:0 var(--space-lg);
  position:relative;
  border:none !important;
  outline:none !important;
}

/* نظام Grid متقدم */
.grid {
  display:grid;
  gap:var(--space-lg);
}

.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-auto { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

/* نظام Flexbox محسن */
.flex {
  display:flex;
  gap:var(--space-md);
}

.flex-center {
  display:flex;
  align-items:center;
  justify-content:center;
}

.flex-between {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.flex-column {
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}

/* Smooth animations */
@media (prefers-reduced-motion: no-preference) {
  *{transition:all var(--transition-normal);}
}

/* تأثيرات Glassmorphism التراثية */
.glass-card {
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(184,115,51,0.05));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(212,175,55,0.1);
  transition: var(--transition-heritage);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--heritage-pattern);
  opacity: 0.1;
  pointer-events: none;
}

.glass-card:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(184,115,51,0.08));
  border-color: rgba(212,175,55,0.4);
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(212,175,55,0.2);
}

/* تأثيرات Parallax */
.parallax-section {
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  position:relative;
  overflow:hidden;
}

.parallax-section::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:1;
}

.parallax-content {
  position:relative;
  z-index:2;
}

/* تأثيرات Hover تراثية متقدمة */
.interactive-card {
  transition:var(--transition-heritage);
  transform-style:preserve-3d;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(212,175,55,0.1);
}

.interactive-card::before {
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transition:left 0.6s ease;
}

.interactive-card:hover::before {
  left:100%;
}

.interactive-card:hover {
  transform:translateY(-12px) rotateX(8deg) scale(1.02);
  box-shadow:var(--shadow-2xl), 0 0 30px rgba(212,175,55,0.3);
  border-color:rgba(212,175,55,0.4);
}

/* تأثيرات الضوء التراثي المتحرك */
.light-effect {
  position:relative;
  overflow:hidden;
  background:var(--heritage-pattern);
  background-size:60px 60px;
  /* تم إزالة background-opacity لأنها خاصية غير صحيحة في CSS */
}

.light-effect::before {
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle,rgba(212,175,55,0.15) 0%,transparent 70%);
  animation:rotate 10s linear infinite;
  pointer-events:none;
}

@keyframes rotate {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

/* تأثيرات تراثية متقدمة */
@keyframes heritageGlow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(212,175,55,0.3), 0 0 40px rgba(212,175,55,0.1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(212,175,55,0.5), 0 0 60px rgba(212,175,55,0.2);
  }
}

@keyframes heritagePulse {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.05);
    filter: brightness(1.1);
  }
}

/* خطوط تراثية متحركة */
.animated-line {
  position:relative;
  overflow:hidden;
  animation:heritageGlow 3s ease-in-out infinite alternate;
}

.animated-line::after {
  content:'';
  position:absolute;
  bottom:0;
  left:-100%;
  width:100%;
  height:3px;
  background:var(--gradient-heritage);
  animation:slideIn 2s ease-in-out infinite;
  border-radius:2px;
}

@keyframes slideIn {
  0% { left:-100%; }
  100% { left:100%; }
}

/* تأثيرات تراثية متقدمة للأنيميشن */
@keyframes heritageFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg);
  }
  50% { 
    transform: translateY(-10px) rotate(2deg);
  }
}

@keyframes heritageShimmer {
  0% { 
    background-position: -200% 0;
  }
  100% { 
    background-position: 200% 0;
  }
}

/* تأثير الكتابة التراثي */
.typewriter {
  overflow:hidden;
  border-right:3px solid var(--heritage-gold);
  white-space:nowrap;
  animation:typing 3s steps(40,end),blink 0.75s step-end infinite;
  font-family:'Amiri','Scheherazade New','Tajawal',serif;
}

@keyframes typing {
  from { width:0; }
  to { width:100%; }
}

@keyframes blink {
  from,to { border-color:transparent; }
  50% { border-color:var(--heritage-gold); }
}

/* Header تراثي احترافي */
.site-header{
  position:sticky;top:0;z-index:100;
  background: linear-gradient(135deg, rgba(26,26,28,.95), rgba(26,26,28,.9));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-gold-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition:var(--transition-heritage);
  /* تحسين الأداء */
  transform: translateZ(0);
  will-change: background-color, box-shadow;
}

/* تقليل backdrop-filter على الجوال لتحسين الأداء */
@media (min-width: 768px) {
  .site-header {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}

.site-header::before{
  content:'';position:absolute;inset:0;
  background:var(--gradient-glass);
  opacity:0.7;
  z-index:-1;
  animation:heritagePulse 4s ease-in-out infinite;
}

.site-header.scrolled{
  background: linear-gradient(135deg, rgba(26,26,28,.98), rgba(26,26,28,.95));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:var(--shadow-2xl), var(--shadow-gold);
  border-bottom: var(--glass-gold-border);
}

@media (min-width: 768px) {
  .site-header.scrolled {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}

.site-header.scrolled::before{
  opacity:0.9;
  animation:heritageGlow 3s ease-in-out infinite alternate;
}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 0;
  border:none !important;
  outline:none !important;
  background-color:transparent !important;
}

.container.header-inner{
  border:none !important;
  outline:none !important;
  background-color:transparent !important;
}

/* Mobile Menu (Glass) */
.menu-toggle{
  display:none;
  width:44px;height:44px;border-radius:10px;
  background:linear-gradient(135deg, rgba(26,26,28,.6), rgba(26,26,28,.4));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  align-items:center;justify-content:center;
  gap:4px;cursor:pointer;
}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

@media (max-width: 640px){
  .menu-toggle{display:flex}
  .nav{
    display:none;
    position:fixed;
    top:70px;
    right:16px;
    left:16px;
    background:linear-gradient(135deg, rgba(26,13,10,.95), rgba(42,21,16,.9));
    border:1px solid rgba(212,175,55,.3);
    border-radius:16px;
    padding:16px;
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    box-shadow:0 20px 50px rgba(0,0,0,.7), 0 0 30px rgba(212,175,55,.2);
    z-index:9999;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
  }
  .nav.show{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .nav a{
    padding:12px 16px;
    border-radius:10px;
    font-size:1rem;
    text-align:right;
  }
  .nav a:hover{
    background:rgba(255,255,255,.08);
  }
  .header-inner{
    position:relative;
  }
}

.brand{
  display:flex;align-items:center;gap:16px;
  text-decoration:none;color:#fff;
  transition:var(--transition-heritage);
  font-family:'Amiri','Scheherazade New','Tajawal',serif;
  font-weight:700;
  letter-spacing:0.5px;
}

.brand:hover{
  transform:scale(1.05);
  color:var(--gold-primary);
  text-shadow:0 0 15px rgba(212,175,55,0.6), 0 0 10px rgba(201,169,110,0.4);
}

.brand-logo{
  width:48px;height:48px;
  filter:drop-shadow(0 4px 12px rgba(212,175,55,.5));
  transition:var(--transition-heritage);
  border-radius:8px;
}

.brand:hover .brand-logo{
  filter:drop-shadow(0 6px 20px rgba(212,175,55,.7)) drop-shadow(0 0 15px rgba(201,169,110,.4));
  transform:rotate(5deg) scale(1.1);
}

.brand-name{
  font-weight:700;font-size:1.1rem;
  letter-spacing:0.5px;
  background:var(--gradient-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-family:'Amiri','Scheherazade New','Tajawal',serif;
  filter:drop-shadow(0 2px 8px rgba(212,175,55,0.4));
}

.nav{
  display:flex;align-items:center;gap:32px;
  font-family:'Cairo','Tajawal',sans-serif;
  font-weight:500;
  letter-spacing:0.3px;
}

.nav a{
  color:#fff;text-decoration:none;
  font-weight:500;font-size:0.95rem;
  position:relative;
  padding:8px 16px;
  transition:var(--transition-heritage);
  border-radius:8px;
  border:1px solid transparent;
}

.nav a::after{
  content:'';position:absolute;
  bottom:0;left:0;width:0;height:3px;
  background:var(--gradient-heritage);
  transition:width var(--transition-heritage);
  border-radius:2px;
}

.nav a:hover::after{width:100%;}

.nav a:hover{
  color:var(--gold-primary);
  transform:translateY(-3px);
  background:rgba(212,175,55,0.15);
  border-color:rgba(212,175,55,0.4);
  text-shadow:0 0 15px rgba(212,175,55,0.5), 0 0 10px rgba(201,169,110,0.3);
  box-shadow:0 4px 15px rgba(212,175,55,0.2);
}

/* Buttons تراثية */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 36px;
  border-radius:50px;
  text-decoration:none;
  border:2px solid transparent;
  font-weight:600;
  font-size:1rem;
  position:relative;
  font-family:'Cairo','Tajawal',sans-serif;
  letter-spacing:0.5px;
  text-transform:uppercase;
  overflow:hidden;
  transition:var(--transition-heritage);
  cursor:pointer;
  backdrop-filter:blur(20px);
}

/* أزرار تراثية متطورة */
.btn-premium {
  position:relative;
  background:var(--gradient-gold);
  color:#fff;
  font-weight:700;
  padding:20px 40px;
  border-radius:50px;
  border:2px solid var(--gold-primary);
  cursor:pointer;
  overflow:hidden;
  transition:var(--transition-heritage);
  font-family:'Cairo','Tajawal',sans-serif;
  letter-spacing:0.5px;
  text-transform:uppercase;
  box-shadow:0 8px 25px rgba(212,175,55,0.4), 0 0 20px rgba(201,169,110,0.2);
}

.btn-premium::before {
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,0.4),transparent);
  transition:left 0.6s ease;
}

.btn-premium:hover::before {
  left:100%;
}

.btn-premium:hover {
  transform:translateY(-5px) scale(1.08);
  box-shadow:var(--shadow-2xl), 0 0 40px rgba(212,175,55,0.6), 0 0 30px rgba(201,169,110,0.4);
  filter:brightness(1.2) saturate(1.3);
  border-color:var(--gold-accent);
  background:var(--gradient-gold);
}

.btn-outline {
  background:transparent;
  color:var(--gold-primary);
  border:2px solid var(--gold-primary);
  position:relative;
  overflow:hidden;
}

.btn-outline::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:100%;
  background:var(--primary-gold);
  transition:width var(--transition-normal);
  z-index:-1;
}

.btn-outline:hover::before {
  width:100%;
}

.btn-outline:hover {
  color:#fff;
  background:var(--gradient-gold);
  border-color:var(--gold-accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-gold), 0 0 20px rgba(212,175,55,0.3);
}

.btn::before{
  content:'';position:absolute;
  top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left 0.6s ease;
}

.btn:hover::before{left:100%;}

.btn::after{
  content:'';position:absolute;
  inset:0;border-radius:16px;
  padding:1px;
  background:var(--gradient-gold);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.3s ease;
}

.btn:hover::after{opacity:1;}

.btn-gold{
  background:var(--gradient-gold);
  color:#1a1a1c;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(212,163,84,.4);
  position:relative;
}

.btn-gold::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
}

.btn-gold:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:var(--shadow-2xl);
  filter:brightness(1.15) saturate(1.1);
}

.btn-ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(20px);
}

.btn-ghost:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--gold-1);
  transform:translateY(-2px) scale(1.02);
  box-shadow:var(--shadow-xl);
  color:var(--gold-2);
} 

/* Hero Gallery */
.hero-gallery{position:absolute;inset:0;z-index:1;}
.gallery-slider{position:relative;width:100%;height:100%;overflow:hidden;}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.1);
  transition:all 1.2s cubic-bezier(0.4,0,0.2,1);
}
.slide.active{
  opacity:1;
  transform:scale(1);
}
.slide img{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  width:100%;
  height:100%;
}
.hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.7) contrast(1.1);
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
.gallery-dots{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:10;}
.dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s ease;}
.dot.active{background:var(--gold-1);box-shadow:0 0 20px rgba(212,163,84,.6);}
.dot:hover{background:rgba(255,255,255,.6);}

.hero-content{
  text-align:center;position:relative;z-index:10;
  padding:100px 0;max-width:900px;margin:0 auto;
  animation:fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow:visible;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(50px) scale(0.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.hero h1{
  margin:0 0 24px;
  font-size:clamp(3rem,6vw,5rem);
  font-weight:900;
  color:var(--gold-5);
  text-shadow:none;
  letter-spacing:-0.03em;
  line-height:1.2;
  position:relative;
  animation:titleGlow 3s ease-in-out infinite alternate;
  padding:20px 0;
  overflow:visible;
}

@keyframes titleGlow{
  0%{filter:drop-shadow(0 0 20px rgba(155,114,66,.3));}
  100%{filter:drop-shadow(0 0 40px rgba(155,114,66,.6));}
}

.hero h1::after{
  content:'';position:absolute;
  bottom:-8px;left:50%;transform:translateX(-50%);
  width:100px;height:3px;
  background:var(--gold-5);
  border-radius:2px;
  animation:underlineGlow 2s ease-in-out infinite alternate;
}

@keyframes underlineGlow{
  0%{width:100px;opacity:0.6;}
  100%{width:150px;opacity:1;}
}

.subtitle{
  margin:0 auto 48px;
  max-width:700px;
  color:rgba(255,255,255,.85);
  font-size:1.3rem;
  font-weight:300;
  line-height:1.7;
  text-shadow:0 4px 8px rgba(0,0,0,.4);
  animation:fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.cta-group{
  display:flex;gap:24px;
  justify-content:center;flex-wrap:wrap;
  margin-top:60px;
  animation:fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

/* Sections */
.section{
  padding:100px 0;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(26,26,28,.65), rgba(26,26,28,.55));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: var(--glass-gold-border);
  border-bottom: var(--glass-border);
}

.section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,163,84,.5),transparent);
}

.section-dark{
  background: linear-gradient(135deg, rgba(18,18,20,.70), rgba(28,28,30,.60));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: var(--glass-gold-border);
  border-bottom: var(--glass-border);
}

.two-col{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:48px;align-items:center;
}

.two-col .text p{
  color:#FFFFFF !important;
  font-size:1.1rem;line-height:1.7;
}

/* Founder Section */
.founder-section{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:60px;align-items:center;
  margin-top:48px;
}

.founder-info h3{
  font-size:2rem;font-weight:700;
  background:var(--gradient-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0 0 24px;
}

.founder-info p{
  color:rgba(255,255,255,.8);
  font-size:1.1rem;line-height:1.8;
  margin:0 0 32px;
}

.founder-highlights{
  display:flex;flex-direction:column;
  gap:16px;
}

.highlight-item{
  display:flex;align-items:center;
  gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,.05);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  transition:all 0.3s ease;
}

.highlight-item:hover{
  background:rgba(255,255,255,.08);
  transform:translateX(8px);
  border-color:var(--gold-1);
}

.highlight-icon{
  font-size:1.5rem;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

.highlight-item span:last-child{
  color:rgba(255,255,255,.9);
  font-weight:500;
  font-size:0.95rem;
}

.founder-image{
  position:relative;
}

.founder-image::before{
  content:'';position:absolute;
  top:-10px;left:-10px;right:-10px;bottom:-10px;
  background:var(--gradient-gold);
  border-radius:24px;
  opacity:0.2;
  z-index:-1;
  transition:opacity 0.3s ease;
}

.founder-image:hover::before{
  opacity:0.3;
}

.card-img{
  width:100%;height:auto;
  border-radius:20px;
  box-shadow:var(--shadow-xl);
  transition:transform 0.3s ease;
}

.card-img:hover{transform:scale(1.02);}

.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;margin-top:48px;
}

.card{
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius:24px;
  padding:40px;
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-xl);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:'';position:absolute;
  inset:0;border-radius:24px;
  padding:1px;
  background:var(--gradient-gold);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.3s ease;
}

.card:hover::before{opacity:1;}

.card::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:var(--gradient-gold);
  transform:scaleX(0);
  transition:transform 0.4s ease;
}

.card:hover::after{transform:scaleX(1);}

.card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:var(--shadow-2xl), var(--shadow-gold);
  border-color:rgba(212,175,55,.5);
  background: var(--glass-bg-strong);
}

.card h3{
  margin:0 0 20px;
  font-size:1.4rem;font-weight:800;
  background:var(--gradient-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
  filter:drop-shadow(0 2px 10px rgba(212,175,55,0.3));
}

.card h3::after{
  content:'';position:absolute;
  bottom:-4px;left:0;width:0;height:2px;
  background:var(--gradient-gold);
  transition:width 0.3s ease;
}

.card:hover h3::after{width:30px;}

.card p{
  margin:0;color:#FFFFFF !important;
  line-height:1.7;font-size:1rem;
  font-weight:300;
}

/* Services & Achievements Showcase */
.services-showcase, .achievements-showcase{
  text-align:center;margin:48px 0;
  position:relative;
}

.services-image, .achievements-image{
  max-width:900px;
  width:100%;
  height:auto;
  max-height:600px;
  object-fit:cover;
  border-radius:24px;
  box-shadow:var(--shadow-xl);
  border:1px solid rgba(212,175,55,.3);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter:brightness(1.05) contrast(1.1) saturate(1.1);
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

.services-image:hover, .achievements-image:hover{
  transform:scale(1.02);
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  border-color:var(--gold-1);
  filter:brightness(1.1) contrast(1.15) saturate(1.2);
}

.achievements-showcase{
  margin:60px 0;
}

.achievements-image{
  border-color:rgba(201,169,110,.3);
}

.achievements-image:hover{
  border-color:var(--accent);
}

.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;margin-top:48px;
}

.gallery-item{
  width:100%;height:320px;object-fit:cover;
  border-radius:20px;border:1px solid rgba(212,175,55,0.3);
  transition:var(--transition-heritage);
  cursor:pointer;position:relative;overflow:hidden;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 25px rgba(0,0,0,0.3), 0 0 15px rgba(212,175,55,0.2);
  display:block;
  opacity:1;
  visibility:visible;
  background:linear-gradient(135deg, rgba(212,175,55,0.12), rgba(184,134,11,0.08));
}

.gallery-item::before{
  content:'';position:absolute;
  inset:0;border-radius:20px;
  background:var(--gradient-gold);
  opacity:0;transition:opacity 0.3s ease;
  z-index:1;
}

.gallery-item:hover::before{opacity:0.15;}

.gallery-item::after{
  content:'';position:absolute;
  inset:0;border-radius:20px;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);
  transform:translateX(-100%);
  transition:transform 0.6s ease;
  z-index:2;
}

.gallery-item:hover::after{transform:translateX(100%);}

.gallery-item:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:var(--shadow-2xl), var(--shadow-gold);
  border-color:var(--gold-primary);
  filter:brightness(1.1) contrast(1.05);
}


/* Force all images to be visible */
img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Ensure images don't get hidden */
img[src] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Gallery images specific styles */
.gallery-item img,
.gallery-item {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Specific gallery item fixes */
.gallery-item {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  border: 2px solid rgba(212,175,55,0.2) !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
  transition: all 0.3s ease !important;
}

.gallery-item:hover {
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
  border-color: var(--heritage-gold) !important;
}

/* Fallback for missing images */
.gallery-item:not([src]) {
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(184,115,51,0.1)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--heritage-gold) !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  text-align: center !important;
}

.section-subtitle{text-align:center;color:#b8bcc0;margin-bottom:24px;font-size:1.1rem;} 

/* Featured Image Section */
.featured-image{text-align:center;padding:60px 0;}
.featured-img{
  max-width:800px;width:100%;height:auto;
  max-height:500px;object-fit:cover;
  border-radius:20px;
  box-shadow:var(--shadow-xl);
  border:1px solid rgba(212,175,55,.35);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter:brightness(1.05) contrast(1.1) saturate(1.1);
}
.featured-img:hover{
  transform:scale(1.03);
  box-shadow:0 25px 70px rgba(0,0,0,.4);
  border-color:var(--gold-1);
  filter:brightness(1.1) contrast(1.15) saturate(1.2);
} 

/* Footer تراثي احترافي */
.site-footer{
  border-top: 1px solid rgba(212,175,55,.4);
  background: linear-gradient(135deg, rgba(26,13,10,.9), rgba(42,21,16,.8));
  box-shadow: 0 -4px 20px rgba(184,134,11,.15);
  padding:48px 0 32px;
  margin-top:48px;
  position:relative;
  overflow:hidden;
}

.site-footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--heritage-pattern);
  opacity:0.05;
  pointer-events:none;
}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px;}
.contact-info{margin-top:8px;}
.phone{color:var(--gold-1);font-weight:600;font-size:1rem;margin:4px 0;}
.email{color:var(--gold-2);font-weight:600;font-size:1rem;margin:4px 0;}
.social-links h4{margin:0 0 12px;color:#fff;font-size:.9rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;opacity:.8;}
.social-grid{display:flex;gap:8px;flex-wrap:wrap;}
.social-btn{
  display:flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:12px;
  text-decoration:none;color:#fff;font-weight:500;
  font-size:.9rem;transition:var(--transition-heritage);
  border:2px solid rgba(212,175,55,0.2);
  background:linear-gradient(135deg, rgba(212,175,55,0.1), rgba(184,115,51,0.05));
  backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;
}
.social-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 25px rgba(0,0,0,0.3), 0 0 15px rgba(212,175,55,0.3);
  border-color:rgba(212,175,55,0.5);
  background:linear-gradient(135deg, rgba(212,175,55,0.2), rgba(184,115,51,0.1));
}
.social-btn.whatsapp:hover{background:linear-gradient(135deg,#25D366,#128C7E);}
.social-btn.phone:hover{background:linear-gradient(135deg,var(--gold-1),var(--gold-2));color:#1b1b1c;}
.social-btn.email:hover{background:linear-gradient(135deg,#EA4335,#FF6B6B);}
.social-btn.instagram:hover{background:linear-gradient(135deg,#E4405F,#C13584,#833AB4);}
.social-btn.tiktok:hover{background:linear-gradient(135deg,#000000,#FF0050);}
.social-btn.youtube:hover{background:linear-gradient(135deg,#FF0000,#CC0000);}
.social-btn.snapchat:hover{background:linear-gradient(135deg,#FFFC00,#FFD700);color:#000;}
.social-btn.twitter:hover{background:linear-gradient(135deg,#1DA1F2,#0d8bd9);}
.small{font-size:.9rem}
.muted{color:#aeb3b9}

/* Heritage Arts Section */
.heritage-intro{
  margin:32px 0 48px;
  text-align:center;
}

.heritage-intro p{
  font-size:1.2rem;
  line-height:1.8;
  color:rgba(255,255,255,.9);
  max-width:800px;
  margin:0 auto;
}

.heritage-arts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
  margin:48px 0;
}

.art-card{
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius:20px;
  padding:32px;
  text-align:center;
  backdrop-filter:blur(20px);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.art-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:var(--gradient-gold);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.3s ease;
}

.art-card:hover::before{opacity:1;}

.art-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-2xl);
  border-color:rgba(212,163,84,.4);
  background:rgba(26,26,28,.8);
}

.art-icon{
  font-size:3rem;
  margin-bottom:16px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

.art-card h3{
  margin:0 0 16px;
  font-size:1.4rem;
  font-weight:700;
  background:var(--gradient-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.art-card p{
  margin:0 0 24px;
  color:rgba(255,255,255,.8);
  line-height:1.6;
  font-size:1rem;
}

.video-container{
  margin:var(--space-lg) 0;
  border-radius:20px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(26,26,28,.6), rgba(212,175,55,0.06));
  position:relative;
  box-shadow:var(--shadow-xl), 0 0 20px rgba(212,175,55,0.1);
  border:1px solid rgba(212,175,55,0.25);
  transition:var(--transition-heritage);
}

.video-container::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,rgba(201,169,110,0.1) 0%,transparent 50%,rgba(201,169,110,0.1) 100%);
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--transition-normal);
}

.video-container:hover::before {
  opacity:1;
}

.video-container:hover{
  transform:scale(1.02) translateY(-5px);
  box-shadow:var(--shadow-2xl),var(--shadow-glow);
  border-color:rgba(201,169,110,0.3);
}

.video-container video,
.video-poster{
  width:100%;
  height:auto;
  max-height:350px;
  object-fit:cover;
  display:block;
  border-radius:20px;
  transition:all var(--transition-normal);
  position:relative;
  z-index:0;
}

.video-container:hover video{
  transform:scale(1.02);
  filter:brightness(1.05) contrast(1.1);
}

.video-info{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.8));
  color:var(--text-primary);
  padding:var(--space-lg);
  z-index:2;
  transform:translateY(100%);
  transition:transform var(--transition-normal);
  display:flex;
  flex-direction:column;
  gap:4px;
}

.video-container:hover .video-info {
  transform:translateY(0);
}

.video-duration{
  font-size:0.875rem;
  color:var(--text-muted);
  font-weight:500;
}

.video-quality{
  font-size:1rem;
  color:var(--primary-gold);
  font-weight:600;
}

.video-link{
  font-size:0.875rem;
  color:var(--primary-gold);
  text-decoration:none;
  font-weight:500;
  padding:4px 8px;
  background:rgba(212,163,84,0.1);
  border-radius:6px;
  transition:all var(--transition-normal);
  margin-top:4px;
  display:inline-block;
  width:fit-content;
}

.video-link:hover{
  background:rgba(212,163,84,0.2);
  color:var(--primary-gold);
  transform:translateY(-1px);
}

.video-player{
  margin:var(--space-md) 0;
  border-radius:20px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(26,26,28,.6), rgba(45,45,45,.6));
  position:relative;
  box-shadow:var(--shadow-xl);
  border: var(--glass-border);
  transition:all var(--transition-normal);
}

.video-player:hover{
  transform:scale(1.02) translateY(-5px);
  box-shadow:var(--shadow-2xl),var(--shadow-glow);
  border-color:rgba(201,169,110,0.3);
}

.video-player video{
  width:100%;
  height:auto;
  max-height:350px;
  object-fit:cover;
  display:block;
  border-radius:20px;
  transition:all var(--transition-normal);
}

.video-player .btn-primary{
  width:100%;
  padding:16px 24px;
  font-size:1rem;
  font-weight:600;
  text-align:center;
  background:var(--gradient-gold);
  color:var(--text-dark);
  border:none;
  border-radius:12px;
  text-decoration:none;
  display:block;
  transition:all var(--transition-normal);
  box-shadow:var(--shadow-lg);
}

.video-player .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-xl);
  background:linear-gradient(135deg, #d4a354 0%, #b8941f 100%);
}


/* Video Showcase in Heritage Pages */
.video-showcase{
  margin:48px 0;
  background:rgba(155,114,66,.05);
  border:1px solid rgba(155,114,66,.2);
  border-radius:20px;
  padding:32px;
}

.video-showcase h3{
  margin:0 0 24px;
  color:var(--gold-5);
  font-size:1.5rem;
  font-weight:600;
  text-align:center;
}

.video-showcase .video-container{
  margin:0;
}

.video-showcase .video-container video{
  max-height:400px;
  border-radius:16px;
  box-shadow:var(--shadow-xl);
}

.cultural-note{
  background:rgba(155,114,66,.1);
  border:1px solid rgba(155,114,66,.3);
  border-radius:16px;
  padding:24px;
  margin:48px 0;
  text-align:center;
}

.cultural-note h4{
  margin:0 0 16px;
  color:var(--gold-5);
  font-size:1.2rem;
  font-weight:600;
}

.cultural-note p{
  margin:0;
  color:rgba(255,255,255,.9);
  line-height:1.7;
  font-size:1.1rem;
}

/* Testimonials Section */
.testimonials-intro{
  text-align:center;
  margin:32px 0 48px;
}

.testimonials-intro p{
  font-size:1.1rem;
  line-height:1.8;
  color:rgba(255,255,255,.9);
  max-width:700px;
  margin:0 auto;
}

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:32px;
  margin:48px 0;
}

.testimonial-card{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:32px;
  backdrop-filter:blur(20px);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.testimonial-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:var(--gradient-gold);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.3s ease;
}

.testimonial-card:hover::before{opacity:1;}

.testimonial-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-2xl);
  border-color:rgba(212,163,84,.4);
  background:rgba(26,26,28,.8);
}

.testimonial-content{
  margin-bottom:24px;
}

.testimonial-content p{
  margin:0;
  font-size:1.1rem;
  line-height:1.7;
  color:rgba(255,255,255,.9);
  font-style:italic;
}

.testimonial-author{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.testimonial-author strong{
  color:var(--gold-2);
  font-size:1rem;
  font-weight:600;
}

.testimonial-author span{
  color:#FFFFFF !important;
  font-size:0.9rem;
}

.feedback-highlights{
  margin:48px 0;
  background:rgba(155,114,66,.05);
  border:1px solid rgba(155,114,66,.2);
  border-radius:16px;
  padding:32px;
}

.feedback-highlights h3{
  margin:0 0 24px;
  color:var(--gold-5);
  font-size:1.3rem;
  font-weight:600;
  text-align:center;
}

.highlights-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;
}

.highlights-list li{
  padding:16px;
  background:rgba(255,255,255,.05);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  transition:all 0.3s ease;
}

.highlights-list li:hover{
  background:rgba(255,255,255,.08);
  transform:translateX(8px);
  border-color:var(--gold-1);
}

.highlights-list li strong{
  color:var(--gold-2);
  font-weight:600;
}

/* Heritage Pages */
.heritage-page{
  min-height:100vh;
  background:var(--ink);
}

.heritage-hero{
  background:var(--gradient-dark);
  padding:120px 0 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.heritage-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 1200px 600px at 20% 20%, rgba(155,114,66,.15) 0%, transparent 50%),
    radial-gradient(ellipse 1000px 500px at 80% 80%, rgba(212,163,84,.1) 0%, transparent 50%);
  animation:heritageGlow 8s ease-in-out infinite alternate;
}

@keyframes heritageGlow{
  0%{opacity:0.7;transform:scale(1) rotate(0deg);}
  100%{opacity:1;transform:scale(1.02) rotate(1deg);}
}

.heritage-hero-content{
  position:relative;
  z-index:10;
}

.heritage-hero h1{
  font-size:clamp(3rem,6vw,4.5rem);
  font-weight:900;
  color:var(--gold-5);
  margin:0 0 24px;
  text-shadow:0 4px 8px rgba(0,0,0,.3);
}

.heritage-subtitle{
  font-size:1.3rem;
  color:rgba(255,255,255,.9);
  margin:0 0 32px;
  font-weight:300;
}

.heritage-badge{
  display:inline-block;
  background:rgba(155,114,66,.2);
  border:1px solid rgba(155,114,66,.4);
  border-radius:50px;
  padding:12px 24px;
  backdrop-filter:blur(20px);
}

.heritage-badge span{
  color:var(--gold-5);
  font-weight:600;
  font-size:1rem;
}

.heritage-details{
  padding:80px 0;
}

.heritage-description h2{
  font-size:2.5rem;
  font-weight:700;
  color:var(--gold-5);
  margin:0 0 24px;
  text-align:center;
}

.heritage-description p{
  font-size:1.2rem;
  line-height:1.8;
  color:rgba(255,255,255,.9);
  margin:0 0 32px;
  text-align:center;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:32px;
  margin:48px 0;
}

.feature-item{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:var(--space-2xl) var(--space-lg);
  text-align:center;
  backdrop-filter:blur(20px);
  transition:all var(--transition-slow);
  position:relative;
  overflow:hidden;
}

.feature-item::before {
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(201,169,110,0.1),transparent);
  transition:left 0.6s ease;
}

.feature-item:hover::before {
  left:100%;
}

.feature-item:hover{
  transform:translateY(-12px) scale(1.03);
  box-shadow:var(--shadow-2xl),var(--shadow-glow);
  border-color:rgba(201,169,110,.4);
  background:rgba(26,26,28,.9);
}

.feature-icon{
  font-size:2.5rem;
  margin-bottom:16px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

.feature-item h4{
  margin:0 0 12px;
  color:var(--gold-2);
  font-size:1.2rem;
  font-weight:600;
}

.feature-item p{
  margin:0;
  color:rgba(255,255,255,.8);
  line-height:1.6;
  font-size:0.95rem;
}

.audio-samples{
  margin:64px 0;
  background:rgba(155,114,66,.05);
  border:1px solid rgba(155,114,66,.2);
  border-radius:20px;
  padding:48px 32px;
}

.audio-samples h3{
  margin:0 0 32px;
  color:var(--gold-5);
  font-size:1.8rem;
  font-weight:600;
  text-align:center;
}

.audio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
}

.audio-item{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:24px;
  backdrop-filter:blur(20px);
}

.audio-item h4{
  margin:0 0 12px;
  color:var(--gold-2);
  font-size:1.1rem;
  font-weight:600;
}

.audio-item p{
  margin:0 0 16px;
  color:rgba(255,255,255,.8);
  font-size:0.95rem;
  line-height:1.5;
}

.audio-player{
  width:100%;
}

.audio-player audio{
  width:100%;
  height:40px;
  border-radius:8px;
}

.poetry-section{
  margin:64px 0;
  background:rgba(155,114,66,.05);
  border:1px solid rgba(155,114,66,.2);
  border-radius:20px;
  padding:48px 32px;
}

.poetry-section h3{
  margin:0 0 32px;
  color:var(--gold-5);
  font-size:1.8rem;
  font-weight:600;
  text-align:center;
}

.poetry-samples{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:32px;
}

.poem-item{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:32px;
  backdrop-filter:blur(20px);
}

.poem-item h4{
  margin:0 0 16px;
  color:var(--gold-2);
  font-size:1.2rem;
  font-weight:600;
}

.poem-text{
  margin:0;
  color:rgba(255,255,255,.9);
  font-size:1.1rem;
  line-height:1.8;
  font-style:italic;
  text-align:center;
}

.rhythm-types{
  margin:64px 0;
  background:rgba(155,114,66,.05);
  border:1px solid rgba(155,114,66,.2);
  border-radius:20px;
  padding:48px 32px;
}

.rhythm-types h3{
  margin:0 0 32px;
  color:var(--gold-5);
  font-size:1.8rem;
  font-weight:600;
  text-align:center;
}

.rhythm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
}

.rhythm-item{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:24px;
  backdrop-filter:blur(20px);
  text-align:center;
}

.rhythm-item h4{
  margin:0 0 12px;
  color:var(--gold-2);
  font-size:1.1rem;
  font-weight:600;
}

.rhythm-item p{
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:0.95rem;
  line-height:1.5;
}

.occasions{
  margin:64px 0;
  background:rgba(155,114,66,.05);
  border:1px solid rgba(155,114,66,.2);
  border-radius:20px;
  padding:48px 32px;
}

.occasions h3{
  margin:0 0 32px;
  color:var(--gold-5);
  font-size:1.8rem;
  font-weight:600;
  text-align:center;
}

.occasions-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
}

.occasion-item{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:24px 20px;
  text-align:center;
  color:rgba(255,255,255,.9);
  font-weight:500;
  transition:all 0.3s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.occasion-item:hover{
  background:rgba(26,26,28,.8);
  transform:translateY(-4px);
  border-color:var(--gold-1);
  color:var(--gold-2);
  box-shadow:0 8px 24px rgba(212,175,55,.15);
}

.occasion-icon{
  font-size:2.5rem;
  line-height:1;
  margin-bottom:8px;
  filter:drop-shadow(0 2px 8px rgba(212,175,55,.3));
}

.occasion-item h4{
  margin:0;
  color:var(--gold-1);
  font-size:1.2rem;
  font-weight:600;
}

.occasion-item p{
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:0.95rem;
  line-height:1.6;
}

.heading-4{
  font-size:1.2rem;
  font-weight:600;
  line-height:1.4;
  color:var(--gold-1);
  margin:0;
}

.performance-details{
  margin:64px 0;
  background:rgba(155,114,66,.05);
  border:1px solid rgba(155,114,66,.2);
  border-radius:20px;
  padding:48px 32px;
}

.performance-details h3{
  margin:0 0 32px;
  color:var(--gold-5);
  font-size:1.8rem;
  font-weight:600;
  text-align:center;
}

.performance-info{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
}

.info-item{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:20px;
  backdrop-filter:blur(20px);
  text-align:center;
}

.info-item strong{
  color:var(--gold-2);
  font-weight:600;
  display:block;
  margin-bottom:8px;
}

.booking-section{
  text-align:center;
  margin:64px 0;
  background:rgba(155,114,66,.1);
  border:1px solid rgba(155,114,66,.3);
  border-radius:20px;
  padding:48px 32px;
}

.booking-section h3{
  margin:0 0 16px;
  color:var(--gold-5);
  font-size:1.8rem;
  font-weight:600;
}

.booking-section p{
  margin:0 0 32px;
  color:rgba(255,255,255,.9);
  font-size:1.1rem;
}

/* Team Page */
.team-page{
  min-height:100vh;
  background:var(--ink);
}

.team-hero{
  background:var(--gradient-dark);
  padding:120px 0 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.team-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 1200px 600px at 20% 20%, rgba(155,114,66,.15) 0%, transparent 50%),
    radial-gradient(ellipse 1000px 500px at 80% 80%, rgba(212,163,84,.1) 0%, transparent 50%);
  animation:teamGlow 8s ease-in-out infinite alternate;
}

@keyframes teamGlow{
  0%{opacity:0.7;transform:scale(1) rotate(0deg);}
  100%{opacity:1;transform:scale(1.02) rotate(1deg);}
}

.team-hero-content{
  position:relative;
  z-index:10;
}

.team-hero h1{
  font-size:clamp(3rem,6vw,4.5rem);
  font-weight:900;
  color:var(--gold-5);
  margin:0 0 24px;
  text-shadow:0 4px 8px rgba(0,0,0,.3);
}

.team-subtitle{
  font-size:1.3rem;
  color:rgba(255,255,255,.9);
  margin:0 0 32px;
  font-weight:300;
}

.team-badge{
  display:inline-block;
  background:rgba(155,114,66,.2);
  border:1px solid rgba(155,114,66,.4);
  border-radius:50px;
  padding:12px 24px;
  backdrop-filter:blur(20px);
}

.team-badge span{
  color:var(--gold-5);
  font-weight:600;
  font-size:1rem;
}

.team-intro{
  padding:80px 0;
  background:var(--ink-2);
}

.intro-content{
  text-align:center;
  max-width:800px;
  margin:0 auto;
}

.intro-content h2{
  font-size:2.5rem;
  font-weight:700;
  color:var(--gold-5);
  margin:0 0 24px;
}

.intro-content p{
  font-size:1.2rem;
  line-height:1.8;
  color:rgba(255,255,255,.9);
  margin:0;
}

.team-members{
  padding:80px 0;
}

.team-members h2{
  font-size:2.5rem;
  font-weight:700;
  color:var(--gold-5);
  margin:0 0 48px;
  text-align:center;
}

.members-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:40px;
}

.member-card{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:32px;
  backdrop-filter:blur(20px);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.member-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:1px;
  background:var(--gradient-gold);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.3s ease;
}

.member-card:hover::before{opacity:1;}

.member-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:var(--shadow-2xl);
  border-color:rgba(212,163,84,.4);
  background:rgba(26,26,28,.8);
}

.member-image{
  width:120px;
  height:120px;
  margin:0 auto 24px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--gold-5);
  box-shadow:0 8px 24px rgba(155,114,66,.3);
}

.member-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s ease;
}

.member-card:hover .member-image img{
  transform:scale(1.1);
}

.member-info{
  text-align:center;
}

.member-info h3{
  margin:0 0 8px;
  font-size:1.4rem;
  font-weight:700;
  color:var(--gold-2);
}

.member-role{
  margin:0 0 16px;
  color:var(--gold-5);
  font-size:1rem;
  font-weight:600;
}

.member-description{
  margin:0 0 24px;
  color:rgba(255,255,255,.8);
  line-height:1.6;
  font-size:0.95rem;
}

.member-skills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

.skill{
  background:rgba(155,114,66,.2);
  border:1px solid rgba(155,114,66,.4);
  border-radius:20px;
  padding:6px 12px;
  font-size:0.85rem;
  color:var(--gold-2);
  font-weight:500;
}

.team-values{
  padding:80px 0;
  background:var(--ink-2);
}

.team-values h2{
  font-size:2.5rem;
  font-weight:700;
  color:var(--gold-5);
  margin:0 0 48px;
  text-align:center;
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:32px;
}

.value-item{
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:32px 24px;
  text-align:center;
  backdrop-filter:blur(20px);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-item:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-xl);
  border-color:rgba(155,114,66,.4);
  background:rgba(26,26,28,.8);
}

.value-icon{
  font-size:3rem;
  margin-bottom:16px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

.value-item h3{
  margin:0 0 16px;
  color:var(--gold-2);
  font-size:1.3rem;
  font-weight:600;
}

.value-item p{
  margin:0;
  color:rgba(255,255,255,.8);
  line-height:1.6;
  font-size:0.95rem;
}

.join-team{
  padding:80px 0;
}

.join-content{
  text-align:center;
  max-width:800px;
  margin:0 auto;
  background:rgba(155,114,66,.05);
  border:1px solid rgba(155,114,66,.2);
  border-radius:24px;
  padding:48px 32px;
}

.join-content h2{
  font-size:2.5rem;
  font-weight:700;
  color:var(--gold-5);
  margin:0 0 24px;
}

.join-content p{
  font-size:1.2rem;
  line-height:1.8;
  color:rgba(255,255,255,.9);
  margin:0 0 32px;
}

.join-requirements{
  text-align:right;
  margin:32px 0;
  background:rgba(26,26,28,.6);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:24px;
}

.join-requirements h3{
  margin:0 0 16px;
  color:var(--gold-2);
  font-size:1.2rem;
  font-weight:600;
}

.join-requirements ul{
  list-style:none;
  padding:0;
  margin:0;
}

.join-requirements li{
  padding:8px 0;
  color:rgba(255,255,255,.8);
  font-size:1rem;
  position:relative;
  padding-right:20px;
}

.join-requirements li::before{
  content:'✓';
  position:absolute;
  right:0;
  color:var(--gold-2);
  font-weight:bold;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .container { 
    max-width: 100%; 
    padding: 0 var(--space-md); 
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px){
  .container { padding: 0 var(--space-sm); }
  .two-col{grid-template-columns:1fr; gap: var(--space-xl);}
  .cards{grid-template-columns:1fr 1fr; gap: var(--space-lg);}
  .gallery-dots{bottom:20px;}
  .founder-section{grid-template-columns:1fr;gap:var(--space-2xl);}
  .founder-info h3{font-size:1.7rem;}
  .heritage-arts{grid-template-columns:1fr; gap: var(--space-lg);}
  .testimonials-grid{grid-template-columns:1fr; gap: var(--space-lg);}
  .features-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap: var(--space-lg);}
  .audio-grid{grid-template-columns:1fr; gap: var(--space-lg);}
  .poetry-samples{grid-template-columns:1fr; gap: var(--space-lg);}
  .rhythm-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap: var(--space-lg);}
  .occasions-list{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap: var(--space-md);}
  .performance-info{grid-template-columns:1fr; gap: var(--space-md);}
  .members-grid{grid-template-columns:1fr; gap: var(--space-lg);}
  .values-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap: var(--space-lg);}
  .video-container video{max-height:300px;}
  .hero h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); }
  .heading-1 { font-size: clamp(2rem, 5vw, 2.5rem); }
  .heading-2 { font-size: clamp(1.5rem, 4vw, 2rem); }
}
@media (max-width: 768px) {
  .container { padding: 0 var(--space-sm); }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
  .heading-1 { font-size: clamp(1.75rem, 6vw, 2rem); }
  .heading-2 { font-size: clamp(1.5rem, 5vw, 1.75rem); }
  .heading-3 { font-size: clamp(1.25rem, 4vw, 1.5rem); }
  
  .two-col { grid-template-columns: 1fr; gap: var(--space-xl); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  
  .nav { 
    gap: var(--space-sm); 
    flex-wrap: wrap;
  }
  .nav a { 
    font-size: 0.9rem; 
    padding: var(--space-xs) var(--space-sm);
  }
  
  .cta-group { 
    flex-direction: column; 
    align-items: center; 
    gap: var(--space-md);
  }
  
  .cards { 
    grid-template-columns: 1fr; 
    gap: var(--space-lg);
  }
  
  .gallery-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: var(--space-md);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .feature-item {
    padding: var(--space-lg);
  }
}

@media (max-width: 640px){
  .nav{display:none}
  .cards{grid-template-columns:1fr; gap: var(--space-lg);}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-sm);}
  .gallery-item{height:200px;min-height:200px;}
  .hero-content{padding:60px 0 80px;}
  .gallery-dots{bottom:15px;gap:8px;}
  .dot{width:10px;height:10px;}
  .section{padding:60px 0;}
  .container{padding:0 16px;}
  .brand-name{font-size:0.9rem;}
  .hero h1{font-size:clamp(1.75rem, 8vw, 2.25rem);}
}
  .featured-image{padding:var(--space-2xl) 0;}
  .featured-img{
    max-width:90%;max-height:300px;
    border-radius:16px;
  }
  .services-showcase, .achievements-showcase{margin:var(--space-lg) 0;}
  .services-image, .achievements-image{
    max-width:95%;max-height:400px;
    border-radius:20px;
  }
  .footer-inner{flex-direction:column;gap:var(--space-md);text-align:center;}
  .social-grid{justify-content:center;gap:var(--space-xs);}
  .social-btn{padding:6px 10px;font-size:.8rem;}
  .founder-section{gap:var(--space-lg);margin-top:var(--space-lg);}
  .founder-info h3{font-size:1.5rem;margin-bottom:var(--space-md);}
  .founder-info p{font-size:1rem;margin-bottom:var(--space-lg);}
  .highlight-item{padding:10px 12px;gap:10px;}
  .highlight-item span:last-child{font-size:.9rem;}
  .video-container video{max-height:250px;}
  .video-info{font-size:0.7rem;padding:3px 6px;}
  .hero h1 { font-size: 1.75rem; }
  .cta-group { 
    flex-direction: column; 
    align-items: center; 
  }
  .gallery-grid { 
    grid-template-columns: 1fr; 
  }
  .header-inner {
    flex-direction: column;
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(1.5rem, 8vw, 2rem); }
  .video-container video { max-height: 200px; }
  .container { padding: 0 12px; }
  .feature-item { padding: var(--space-md); }
  .btn { padding: 12px 20px; font-size: 0.85rem; }
  .section{padding:50px 0;}
  .heading-2{font-size:clamp(1.5rem, 6vw, 2rem);}
  .heading-3{font-size:clamp(1.1rem, 5vw, 1.4rem);}
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-item{height:250px;min-height:250px;}
  .brand-name{font-size:0.8rem;}
  .menu-toggle{width:40px;height:40px;}
}

/* Video Player Enhanced Styles */
.video-player {
  position: relative;
  margin-top: 1.5rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  border: 2px solid rgba(255, 215, 0, 0.2);
}

.video-player:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 215, 0, 0.4);
}

.main-video {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 18px;
  transition: all 0.3s ease;
  filter: brightness(0.9);
}

.video-player:hover .main-video {
  filter: brightness(1);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.4s ease;
  border-radius: 18px;
  backdrop-filter: blur(2px);
}

.video-player:hover .video-overlay {
  opacity: 1;
}

.play-button {
  font-size: 4rem;
  color: #ffd700;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.9);
  margin-bottom: 1rem;
  animation: pulse 2s infinite;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-button:hover {
  transform: scale(1.2);
  text-shadow: 0 0 40px rgba(255, 215, 0, 1);
}

.video-title {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.9);
  margin: 0;
  text-align: center;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.15); 
    opacity: 1;
  }
}

/* Video Controls Enhancement */
.main-video::-webkit-media-controls {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
}

.main-video::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}

/* Mobile Video Adjustments */
@media (max-width: 768px) {
  .main-video {
    height: 250px;
  }
  
  .play-button {
    font-size: 3rem;
  }
  
  .video-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .main-video {
    height: 200px;
  }
  
  .play-button {
    font-size: 2.5rem;
  }
  
  .video-title {
    font-size: 1rem;
  }
}

/* Heritage Portraits Styles */
.heritage-portraits {
  margin: 4rem 0;
  text-align: center;
}

.heritage-portraits h3 {
  color: var(--gold-2);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.heritage-portraits p {
  color: #FFFFFF !important;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.portraits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.portrait-item {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 215, 0, 0.2);
}

.portrait-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 215, 0, 0.4);
}

/* Gallery Item Enhancements for Cultural Portraits */
.gallery-item {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments for portraits */
@media (max-width: 768px) {
  .portraits-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
  
  .portrait-item {
    height: 250px;
  }
  
  .gallery-item {
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .portraits-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .portrait-item {
    height: 200px;
  }
  
  .gallery-item {
    max-height: 250px;
  }
}




@keyframes backgroundFlow {
  0%, 100% { 
    transform: translateX(0px) translateY(0px) rotate(0deg);
    opacity: 0.8;
  }
  25% { 
    transform: translateX(10px) translateY(-5px) rotate(1deg);
    opacity: 1;
  }
  50% { 
    transform: translateX(-5px) translateY(10px) rotate(-1deg);
    opacity: 0.9;
  }
  75% { 
    transform: translateX(-10px) translateY(-5px) rotate(0.5deg);
    opacity: 1;
  }
}

@keyframes particleFloat {
  0% { 
    transform: translateY(0px) translateX(0px);
    opacity: 0.6;
  }
  25% { 
    transform: translateY(-25px) translateX(10px);
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-50px) translateX(-5px);
    opacity: 1;
  }
  75% { 
    transform: translateY(-75px) translateX(5px);
    opacity: 0.8;
  }
  100% { 
    transform: translateY(-100px) translateX(0px);
    opacity: 0.6;
  }
}





/* Heritage Elements */
.heritage-elements {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.heritage-icon {
  font-size: 2.5rem;
  animation: heritageFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3));
}

.heritage-icon:nth-child(1) {
  animation-delay: 0s;
}

.heritage-icon:nth-child(2) {
  animation-delay: 0.5s;
}

.heritage-icon:nth-child(3) {
  animation-delay: 1s;
}

@keyframes heritageFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-10px) rotate(5deg); 
    opacity: 1;
  }
}







@keyframes logoGlow {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1);
  }
  50% { 
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive Loading Screen */
@media (max-width: 768px) {
  .heritage-elements {
    gap: 1.5rem;
  }
  
  .heritage-icon {
    font-size: 2rem;
  }
  
}

@media (max-width: 480px) {
  .heritage-elements {
    gap: 1rem;
  }
  
  .heritage-icon {
    font-size: 1.5rem;
  }
  
  
}

/* Saudi Heritage Section */
.heritage-bg {
  background: 
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%),
    radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
  position: relative;
  overflow: hidden;
}

.heritage-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Saudi Traditional Patterns */
    radial-gradient(3px 3px at 20px 30px, rgba(255, 215, 0, 0.2), transparent),
    radial-gradient(3px 3px at 40px 70px, rgba(255, 215, 0, 0.15), transparent),
    radial-gradient(2px 2px at 90px 40px, rgba(255, 215, 0, 0.25), transparent),
    radial-gradient(2px 2px at 25px 75px, rgba(255, 215, 0, 0.18), transparent);
  background-repeat: repeat;
  background-size: 150px 100px;
  animation: saudiHeritagePatterns 30s linear infinite;
  pointer-events: none;
}

@keyframes saudiHeritagePatterns {
  0% { transform: translateX(0px) translateY(0px); }
  25% { transform: translateX(25px) translateY(-15px); }
  50% { transform: translateX(-15px) translateY(25px); }
  75% { transform: translateX(-25px) translateY(-15px); }
  100% { transform: translateX(0px) translateY(0px); }
}

.heritage-title {
  color: var(--gold-2);
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.heritage-subtitle {
  text-align: center;
  color: #FFFFFF !important;
  margin-bottom: 3rem;
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
}

.heritage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.heritage-card {
  background: rgba(26, 26, 28, 0.9);
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  backdrop-filter: blur(15px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.heritage-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.heritage-card:hover::before {
  opacity: 1;
}

.heritage-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 60px rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.4);
}

.heritage-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: heritageIconFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3));
}

.heritage-card:nth-child(1) .heritage-icon {
  animation-delay: 0s;
}

.heritage-card:nth-child(2) .heritage-icon {
  animation-delay: 0.5s;
}

.heritage-card:nth-child(3) .heritage-icon {
  animation-delay: 1s;
}

.heritage-card:nth-child(4) .heritage-icon {
  animation-delay: 1.5s;
}

@keyframes heritageIconFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-8px) rotate(3deg); 
    opacity: 1;
  }
}

.heritage-card h3 {
  color: var(--gold-2);
  margin-bottom: 1rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.heritage-card p {
  color: #FFFFFF !important;
  line-height: 1.6;
  font-size: 1rem;
}

/* Responsive Heritage */
@media (max-width: 768px) {
  .heritage-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .heritage-card {
    padding: 2rem 1.5rem;
  }
  
  .heritage-icon {
    font-size: 3rem;
  }
}

@media (max-width: 480px) {
  .heritage-card {
    padding: 1.5rem 1rem;
  }
  
  .heritage-icon {
    font-size: 2.5rem;
  }
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--gradient-gold);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  box-shadow: 0 8px 25px rgba(255, 140, 0, 0.5), 0 0 15px rgba(255, 107, 53, 0.3);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 140, 0, 0.6), 0 0 25px rgba(255, 107, 53, 0.4);
  background: var(--gradient-gold);
}

/* Progress Bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--gradient-gold);
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
  z-index: 9998;
  transition: width 0.1s ease;
}

/* Floating WhatsApp Button */
.floating-whatsapp{
  position:fixed;
  bottom:24px;
  left:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.35), 0 0 0 2px rgba(212,175,55,.25) inset;
  border:2px solid rgba(212,175,55,.35);
  backdrop-filter:blur(10px);
  z-index:10001;
  transition:transform .25s ease, box-shadow .25s ease;
}

.floating-whatsapp:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 16px 40px rgba(37,211,102,.45), 0 0 0 2px rgba(212,175,55,.45) inset;
}

.floating-whatsapp svg{display:block}

@media (max-width:640px){
  .floating-whatsapp{bottom:18px; left:18px; width:54px; height:54px;}
}

/* Enhanced Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Smooth Scrolling - محسّن للأداء */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Enhanced Gallery with Lightbox Effect */
.gallery-item {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Parallax Effect for Hero */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  transform: translateZ(0);
}

.hero-spark {
  position: absolute;
  bottom: -25%;
  left: -25%;
  width: 100vw;
  height: 100vw;
  background: radial-gradient(circle, rgba(212,175,55,.25), rgba(212,175,55,.15), rgba(184,134,11,.1), transparent 70%);
  filter: blur(60px);
  opacity: 0.3;
}

/* Enhanced Video Player */
.video-player {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.video-player::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.video-player:hover::before {
  opacity: 1;
}

/* Performance Optimizations */
* {
  will-change: auto;
}

/* Critical Performance Improvements */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* GPU Acceleration for smooth animations */
.hero-gallery,
.gallery-slider,
.slide,
.gallery-item,
.card,
.btn {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimize image rendering */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
}

/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  
  .hero-image,
  .gallery-item,
  .card {
    transition-duration: 0.2s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.gallery-item,
.video-player,
.card {
  will-change: transform;
}

/* Glass Unification for key cards */
.card, .why-card, .stat-card, .team-card {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  backdrop-filter: var(--glass-blur) !important;
}

.card:hover, .why-card:hover, .stat-card:hover, .team-card:hover {
  border-color: rgba(212,163,84,.35) !important;
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid currentColor;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
}

/* Why Choose Us Section */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.why-card {
  text-align: center;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
  transition: left 0.6s ease;
}

.why-card:hover::before {
  left: 100%;
}

.why-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  display: block;
  animation: iconFloat 3s ease-in-out infinite;
}

.why-card:nth-child(2) .why-icon {
  animation-delay: 0.5s;
}

.why-card:nth-child(3) .why-icon {
  animation-delay: 1s;
}

.why-card:nth-child(4) .why-icon {
  animation-delay: 1.5s;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Statistics Section */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.stat-card {
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-number {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--gold-primary);
  margin-bottom: 0.5rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.02em;
  opacity: 1;
  visibility: visible;
}

.stat-label {
  font-size: 1.1rem;
  color: #FFFFFF !important;
  font-weight: 500;
}

/* Saudi Heritage Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: 
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%),
    radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.05) 50%, transparent 70%),
    linear-gradient(-45deg, transparent 30%, rgba(255, 215, 0, 0.03) 50%, transparent 70%),
    /* Saudi Heritage Patterns */
    radial-gradient(2px 2px at 20px 30px, rgba(255, 215, 0, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 215, 0, 0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 215, 0, 0.4), transparent);
  background-repeat: repeat;
  background-size: 200px 150px;
  animation: saudiHeritageFlow 20s ease-in-out infinite;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    /* Saudi Traditional Patterns */
    conic-gradient(from 0deg at 25% 25%, transparent 0deg, rgba(255, 215, 0, 0.1) 45deg, transparent 90deg),
    conic-gradient(from 180deg at 75% 75%, transparent 0deg, rgba(255, 215, 0, 0.08) 45deg, transparent 90deg);
  animation: saudiPatterns 25s linear infinite;
}

@keyframes saudiHeritageFlow {
  0%, 100% { 
    transform: translateX(0px) translateY(0px) rotate(0deg);
    opacity: 0.8;
  }
  25% { 
    transform: translateX(15px) translateY(-10px) rotate(1deg);
    opacity: 1;
  }
  50% { 
    transform: translateX(-10px) translateY(15px) rotate(-1deg);
    opacity: 0.9;
  }
  75% { 
    transform: translateX(-15px) translateY(-10px) rotate(0.5deg);
    opacity: 1;
  }
}

@keyframes saudiPatterns {
  0% { 
    transform: rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% { 
    transform: rotate(90deg) scale(1.1);
    opacity: 0.8;
  }
  50% { 
    transform: rotate(180deg) scale(1);
    opacity: 1;
  }
  75% { 
    transform: rotate(270deg) scale(1.1);
    opacity: 0.8;
  }
  100% { 
    transform: rotate(360deg) scale(1);
    opacity: 0.6;
  }
}

/* Formal Card Styles */
.card, .why-card, .stat-card, .team-card {
  background: rgba(26, 26, 28, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.card:hover, .why-card:hover, .stat-card:hover, .team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 215, 0, 0.3);
}

/* Formal Typography */
.heading-1 {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.heading-2 {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.heading-3 {
  color: var(--gold-2);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Formal Button Styles */
.btn-premium {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 2px solid var(--gold-2);
  color: var(--gold-2);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.btn-premium:hover {
  background: linear-gradient(135deg, var(--gold-2) 0%, #ffed4e 100%);
  color: #1a1a1a;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

.btn-outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold-2);
  color: var(--gold-2);
}

/* Enhanced Gallery with Masonry Effect */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  grid-auto-rows: masonry;
}

.gallery-item {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(255, 215, 0, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.gallery-item:hover::before {
  opacity: 1;
}

.gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}


/* Formal Header Styles */
.site-header {
  background: linear-gradient(135deg, rgba(26,26,28,.95), rgba(26,26,28,.9));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-gold-border);
  transition: var(--transition-heritage);
}

.site-header.scrolled {
  background: linear-gradient(135deg, rgba(26,26,28,.98), rgba(26,26,28,.95));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:var(--shadow-2xl), var(--shadow-gold);
  border-bottom: var(--glass-gold-border);
}

.brand {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nav a {
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* Formal Video Player */
.video-player {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.video-player:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 215, 0, 0.3);
}

/* Formal Footer */
.site-footer {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-btn {
  background: rgba(26, 26, 28, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.social-btn:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--gold-2);
  color: var(--gold-2);
}

/* Responsive Enhancements */
@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
  
  .why-icon {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-number {
    font-size: 2rem;
  }
}


/* Lightbox Styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  animation: lightboxFadeIn 0.3s ease forwards;
}

@keyframes lightboxFadeIn {
  to { opacity: 1; }
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: var(--gradient-gold);
  border: none;
  color: var(--surface-dark);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.lightbox-close:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

/* Advanced Particle Effects */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255, 215, 0, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 215, 0, 0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 215, 0, 0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 215, 0, 0.3), transparent);
  background-repeat: repeat;
  background-size: 150px 100px;
  animation: particleFloat 20s linear infinite;
  pointer-events: none;
}

@keyframes particleFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-100px); }
}

/* Premium Glassmorphism */
.glass-card {
  background: rgba(26, 26, 28, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Advanced Hover Effects */
.interactive-card {
  position: relative;
  overflow: hidden;
}

.interactive-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
  transition: left 0.6s ease;
}

.interactive-card:hover::after {
  left: 100%;
}

/* Premium Typography Effects */
.heading-2 {
  position: relative;
  overflow: hidden;
}

.heading-2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--gradient-gold);
  transition: width 0.6s ease;
}

.heading-2:hover::after {
  width: 100%;
}

/* Advanced Button Animations */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}


/* Professional Team Section */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.team-card {
  text-align: center;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
  transition: left 0.6s ease;
}

.team-card:hover::before {
  left: 100%;
}

.team-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  display: block;
  animation: teamIconFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3));
}

.team-card:nth-child(2) .team-icon {
  animation-delay: 0.5s;
}

.team-card:nth-child(3) .team-icon {
  animation-delay: 1s;
}

@keyframes teamIconFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

.team-message {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
  border-radius: 20px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.team-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
  animation: messageShimmer 3s ease-in-out infinite;
}

@keyframes messageShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.team-message p {
  position: relative;
  z-index: 1;
  color: var(--gold-2);
  font-weight: 600;
  font-size: 1.3rem;
  text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

/* Enhanced Statistics Animation */
.stat-number {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--gold-primary);
  margin-bottom: 0.5rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
  position: relative;
  overflow: hidden;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.02em;
  opacity: 1;
  visibility: visible;
}

.stat-number::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
  animation: statShine 2s ease-in-out infinite;
}

@keyframes statShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Force statistics to be visible and animated */
.stat-number {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 4rem !important;
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  color: var(--gold-primary) !important;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.4) !important;
  background: var(--gradient-gold) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: statPulse 2s ease-in-out infinite alternate !important;
  transition: all 0.3s ease !important;
}

/* Ensure numbers are always visible */
.stat-number:not([data-animated="true"]) {
  animation: statGlow 1s ease-in-out infinite alternate !important;
}

@keyframes statGlow {
  0% { 
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    transform: scale(1);
  }
  100% { 
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
    transform: scale(1.02);
  }
}

@keyframes statPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* Responsive Team Section */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .team-icon {
    font-size: 3rem;
  }
  
  .team-message p {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .team-card {
    padding: 2rem 1.5rem;
  }
  
  .team-icon {
    font-size: 2.5rem;
  }
  
  .team-message {
    padding: 1.5rem;
  }
  
  .team-message p {
    font-size: 1rem;
  }
}

/* تحسينات الأداء للجوال - Performance Optimizations for Mobile */
@media (max-width: 768px) {
  /* تقليل backdrop-filter على الجوال لتحسين الأداء */
  .card, .why-card, .stat-card, .team-card, .art-card,
  .glass-card, .gallery-item, .video-player, .btn-ghost,
  .nav, .site-footer, .founder-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(26, 26, 28, 0.95) !important;
  }
  
  /* تقليل animations على الجوال - تقليل التأثير فقط */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* تقليل animation duration على الجوال */
  .card, .why-card, .stat-card, .team-card,
  .hero::before, .hero::after {
    animation-duration: 0.5s !important;
    transition-duration: 0.2s !important;
  }
  
  /* إيقاف animations المعقدة على الجوال */
  .hero::before,
  .hero::after,
  .hero-spark,
  .site-header::before,
  .card::before,
  .card::after,
  .gallery-item::before,
  .gallery-item::after {
    animation: none !important;
  }
  
  /* تحسين scroll performance - استخدام GPU acceleration فقط للعناصر المهمة */
  .site-header, .card, .gallery-item, .scroll-to-top {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* تقليل shadows على الجوال */
  .card, .why-card, .stat-card, .team-card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  }
  
  /* تعطيل hover effects على الجوال */
  .card:hover, .why-card:hover, .stat-card:hover, .team-card:hover {
    transform: none !important;
  }
}

/* تحسينات عامة للأداء */
@media (max-width: 768px) {
  /* تقليل filter effects */
  img, video {
    filter: none !important;
  }
  
  /* تحسين rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
  }
  
  /* تقليل will-change */
  * {
    will-change: auto !important;
  }
  
  /* تحسين overflow */
  .hero {
    overflow: hidden;
  }
}