/* ============================================================
   Solar Panel Background with Shimmer Effect
   خلفية الألواح الشمسية مع تأثير وميض للخطوط
   ============================================================ */

/* Reusable solar panel background pattern (tile-able) */
.solar-panel-bg {
  background-color: #0b1220;
  background-image:
    /* خلايا الألواح: مربعات داكنة */
    linear-gradient(rgba(30, 58, 138, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.35) 1px, transparent 1px),
    /* الخطوط الفضية الأفقية (busbars) */
    linear-gradient(rgba(180, 200, 230, 0.18) 1px, transparent 1px),
    /* الخطوط الفضية العمودية */
    linear-gradient(90deg, rgba(180, 200, 230, 0.18) 1px, transparent 1px),
    /* تدرج لوني يعطي إحساس السطح الزجاجي */
    radial-gradient(ellipse at top, rgba(30, 64, 175, 0.4), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(15, 23, 42, 0.6), transparent 70%);
  background-size:
    100px 100px,    /* خلايا كبيرة */
    100px 100px,
    20px 20px,      /* الخطوط الفضية الأفقية */
    20px 20px,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
}

/* Variant for sections that need subtle effect */
.solar-panel-bg-soft {
  background-color: #0f172a;
  background-image:
    linear-gradient(rgba(30, 64, 175, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 175, 0.18) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.10) 1px, transparent 1px);
  background-size:
    80px 80px,
    80px 80px,
    16px 16px,
    16px 16px;
}

/* Variant with diagonal cells (hexagonal look) */
.solar-panel-bg-hex {
  background-color: #0a1428;
  background-image:
    /* خطوط قطرية */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 38px,
      rgba(180, 200, 230, 0.12) 38px,
      rgba(180, 200, 230, 0.12) 39px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 38px,
      rgba(180, 200, 230, 0.12) 38px,
      rgba(180, 200, 230, 0.12) 39px
    ),
    radial-gradient(ellipse at center, rgba(30, 64, 175, 0.35), transparent 70%);
}

/* === Hero with animated shimmer === */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  z-index: 1;
  
  /* ترتيب الطبقات من الأعلى (الخطوط الناصعة) إلى الأسفل (الصورة الفاتحة) */
  background-image:
    /* 1. الخطوط الفضية الرئيسية - ناصعة جداً وسميكة لتظهر بوضوح */
        linear-gradient(rgba(30, 58, 138, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.35) 1px, transparent 1px),
    
    /* 2. الخلايا الزرقاء (إطار اللوح) - واضحة ومحددة */
    linear-gradient(to bottom, rgba(59, 130, 246, 0.5) 1px, transparent 1px),
    linear-gradient(to right, rgba(59, 130, 246, 0.5) 1px, transparent 1px),
    
    /* 3. الخطوط الرفيعة الداخلية (busbars) - ذهبية ومكررة بكثافة */
    linear-gradient(to bottom, rgba(245, 158, 11, 0.5) 1px, transparent 1px),
    linear-gradient(to right, rgba(245, 158, 11, 0.5) 1px, transparent 1px),
    
    /* 4. تفتيح الإضاءة الداخلية الداعمة للبريق */
    radial-gradient(circle at 25% 35%, rgba(245, 158, 11, 0.3), transparent 60%),
    radial-gradient(circle at 80% 65%, rgba(251, 191, 36, 0.25), transparent 60%),
    
    /* 5. طبقة تظليل الصورة - خفيفة جداً بنسبة 20% لتبقى الصورة ساطعة وواضحة */
    linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(11, 18, 32, 0.2) 100%),
    
    /* 6. الصورة الخلفية الحقيقية في العمق تماماً */
    url('../img/tais_center.jpg');

  /* تحديد الحجم بشكل صارم ومترابط لكل طبقة على حدة */
  background-size:
    120px 120px, /* حجم شبكة الخطوط الفضية */
    120px 120px,
    20px 20px,   /* حجم مربعات الخلايا الزرقاء (نصف حجم الفضية لتقسيم متناسق) */
    20px 20px,
    20px 20px,   /* حجم الخطوط الرفيعة جداً ل تتكرر بكثافة داخل المربعات */
    20px 20px,
    100% 100%,
    100% 100%,
    100% 100%,
    cover;       /* تغطية كاملة للصورة الخلفية */

  background-position: center;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, fixed;
}

/* وميض الألواح المتحرك */
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -50%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.2) 45%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.2) 55%,
    transparent 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  animation: solarShimmer 6s linear infinite;
}

/* طبقة العمق الإضافية (تم رفع شفافيتها لتبرز فوق الصورة) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 40px,
      rgba(245, 158, 11, 0.25) 40px,
      rgba(245, 158, 11, 0.25) 41px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 40px,
      rgba(245, 158, 11, 0.25) 40px,
      rgba(245, 158, 11, 0.25) 41px
    );
  pointer-events: none;
  z-index: 1;
}

/* حماية النصوص والأزرار وإبرازها فوق الخلفية الفاتحة */
.hero-content {
  position: relative;
  z-index: 3;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9);
}



@keyframes solarShimmer {
  0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
  10% { opacity: 1; }
  50% { opacity: 1; }
  60% { opacity: 0.8; }
  100% { transform: translateX(200%) skewX(-15deg); opacity: 0; }
}

/* وميض ثانوي للخطوط العمودية */
.hero .shimmer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(251, 191, 36, 0.15) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  animation: verticalShimmer 8s linear infinite;
  width: 30%;
}

@keyframes verticalShimmer {
  0% { left: -30%; }
  100% { left: 100%; }
}

/* === Page header with solar panel pattern === */
.page-header {
  position: relative;
  color: #fff;
  padding-top: 1rem ;
  overflow: hidden;
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.30) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.18) 1px, transparent 1px),
    radial-gradient(ellipse at 20% 50%, rgba(245, 158, 11, 0.20), transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(251, 191, 36, 0.18), transparent 50%),
    linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
  background-size:
    100px 100px,
    100px 100px,
    20px 20px,
    20px 20px,
    100% 100%,
    100% 100%,
    100% 100%;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 50px,
      rgba(245, 158, 11, 0.06) 50px,
      rgba(245, 158, 11, 0.06) 51px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 50px,
      rgba(245, 158, 11, 0.06) 50px,
      rgba(245, 158, 11, 0.06) 51px
    );
  pointer-events: none;
}

.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%,
    transparent 100%
  );
  pointer-events: none;
  animation: solarShimmer 5s linear infinite;
}

.page-header > .container {
  position: relative;
  z-index: 2;
}
section{
    padding: 0.1rem 0 0.1rem;
    position: relative;
  color: #fff;
  overflow: hidden;
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.30) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.18) 1px, transparent 1px),
    radial-gradient(ellipse at 20% 50%, rgba(245, 158, 11, 0.20), transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(251, 191, 36, 0.18), transparent 50%),
    linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
  background-size:
    100px 100px,
    100px 100px,
    20px 20px,
    20px 20px,
    100% 100%,
    100% 100%,
    100% 100%;}

section::before{
content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 50px,
      rgba(245, 158, 11, 0.06) 50px,
      rgba(245, 158, 11, 0.06) 51px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 50px,
      rgba(245, 158, 11, 0.06) 50px,
      rgba(245, 158, 11, 0.06) 51px
    );
  pointer-events: none;
}
section::after{
     content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%,
    transparent 100%
  );
  pointer-events: none;
  animation: solarShimmer 5s linear infinite;
}
/* === Counters section with solar panel pattern === */
.counters-section {
  position: relative;
  color: #fff;
  padding: 4rem 0;
  overflow: hidden;
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.28) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.16) 1px, transparent 1px),
    radial-gradient(circle at 30% 40%, rgba(245, 158, 11, 0.20), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(251, 191, 36, 0.18), transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #0b1220 100%);
  background-size:
    90px 90px,
    90px 90px,
    18px 18px,
    18px 18px,
    100% 100%,
    100% 100%,
    100% 100%;
}

.counters-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 45%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent 65%,
    transparent 100%
  );
  pointer-events: none;
  animation: solarShimmer 7s linear infinite;
}

.counters-section > .container {
  position: relative;
  z-index: 2;
}

/* === Footer with solar panel pattern === */
.main-footer {
  position: relative;
  color: #cbd5e1;
  padding: 4rem 0 0;
  overflow: hidden;
  background-color: #0a0f1f;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.20) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.10) 1px, transparent 1px),
    linear-gradient(180deg, #0a0f1f 0%, #060912 100%);
  background-size:
    80px 80px,
    80px 80px,
    16px 16px,
    16px 16px,
    100% 100%;
}

.main-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #fbbf24 100%);
  z-index: 2;
}

/* Subtle shimmer animation across footer */
.main-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 50%,
    rgba(245, 158, 11, 0.06) 60%,
    transparent 70%,
    transparent 100%
  );
  pointer-events: none;
  animation: solarShimmer 9s linear infinite;
}

/* === Body background - subtle solar panel texture === */
body {
  background-color: #f8fafc;
  background-image:
    /* خلايا شمسية خفيفة جداً في الخلفية */
    linear-gradient(rgba(30, 64, 175, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 175, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.03) 1px, transparent 1px);
  background-size:
    80px 80px,
    80px 80px,
    16px 16px,
    16px 16px;
  background-attachment: fixed;
}

/* Background for sections that need the solar panel pattern */
section.solar-section {
  position: relative;
  overflow: hidden;
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.30) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.18) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(245, 158, 11, 0.20), transparent 70%);
  background-size:
    100px 100px,
    100px 100px,
    20px 20px,
    20px 20px,
    100% 100%;
}

section.solar-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 45%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent 65%,
    transparent 100%
  );
  pointer-events: none;
  animation: solarShimmer 6s linear infinite;
}

section.solar-section > .container {
  position: relative;
  z-index: 2;
}

/* Top bar with subtle panel pattern */
.top-bar {
  background-color: #060912;
  background-image:
    linear-gradient(rgba(245, 158, 11, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #060912 0%, #0a0f1f 100%);
  background-size: 60px 60px, 60px 60px, 100% 100%;
}

/* News ticker with solar panel pattern */
.news-ticker {
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(245, 158, 11, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.06) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  position: relative;
  overflow: hidden;
}

.news-ticker::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 158, 11, 0.10) 50%,
    transparent 100%
  );
  pointer-events: none;
  animation: tickerShimmer 4s linear infinite;
  width: 30%;
}

@keyframes tickerShimmer {
  0% { left: -30%; }
  100% { left: 100%; }
}

/* Project detail gallery main */
.project-gallery-main {
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.40) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.40) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.20) 1px, transparent 1px);
  background-size:
    80px 80px,
    80px 80px,
    16px 16px,
    16px 16px;
}

/* Service card gradient - subtle solar panel hint */
.service-img {
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.30) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.15) 1px, transparent 1px);
  background-size:
    60px 60px,
    60px 60px,
    12px 12px,
    12px 12px;
}

.product-thumb,
.project-thumb,
.news-thumb {
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.25) 1px, transparent 1px),
    linear-gradient(rgba(180, 200, 230, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 200, 230, 0.12) 1px, transparent 1px);
  background-size:
    50px 50px,
    50px 50px,
    10px 10px,
    10px 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero {
    background-size:
      80px 80px,
      80px 80px,
      16px 16px,
      16px 16px,
      40px 40px,
      40px 40px,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%;
  }
  .page-header,
  .counters-section {
    background-size:
      70px 70px,
      70px 70px,
      14px 14px,
      14px 14px,
      100% 100%,
      100% 100%,
      100% 100%;
  }
}