/* ============================================================
   Tais Brothers - Solar Energy Website
   Modern, Responsive, Bilingual (AR/EN)
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Almarai:wght@300;400;700;800&family=Rajdhani:wght@500;700&display=swap');

:root{
  /* Brand */
  --primary:        #f59e0b;        /* solar gold */
  --primary-dark:   #d97706;
  --primary-light:  #fbbf24;
  --secondary:      #1e293b;        /* deep navy */
  --accent:         #0c4a6e;        /* sky-deep */
  --dark:           #0f172a;
  --bg:             #f8fafc;
  --bg-alt:         #ffffff;
  --text:           #1f2937;
  --muted:          #64748b;
  --border:         #e2e8f0;
  --white:          #ffffff;
  --danger:         #dc2626;
  --success:        #16a34a;
  --whatsapp:       #25D366;

  /* Gradients */
  --grad:           linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #fbbf24 100%);
  --grad-dark:      linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%);
  --grad-soft:      linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02));

  /* Effects */
  --shadow-sm:      0 2px 8px rgba(0,0,0,.06);
  --shadow:         0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:      0 20px 50px rgba(0,0,0,.15);
  --radius:         14px;
  --radius-sm:      8px;
  --radius-lg:      20px;
  --tr:             .3s cubic-bezier(.4,0,.2,1);
  --tr-fast:        .15s ease;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family: 'Cairo','Almarai',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.rtl{direction:rtl}
body.ltr{direction:ltr}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:var(--tr-fast)}
ul,ol{list-style:none;margin:0;padding:0}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:1.3;font-weight:700;color:var(--secondary);}
p{margin:0 0 .8em}

/* RTL/LTR text alignment helpers */
body.rtl .text-start{text-align:right}
body.rtl .text-end{text-align:left}
body.ltr .text-start{text-align:left}
body.ltr .text-end{text-align:right}

/* ---- Container ---- */
.container{width:92%;max-width:1280px;margin-inline:auto}
.containerr{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.5rem;border-radius:var(--radius);
  background:var(--primary);color:#fff!important;
  font-weight:600;font-size:.95rem;border:none;cursor:pointer;
  transition:var(--tr);text-decoration:none;white-space:nowrap;
}
.btn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 25px rgba(245,158,11,.35)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-lg{padding:1rem 2rem;font-size:1.05rem}
.btn-primary{background:var(--primary)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)!important}
.btn-outline:hover{background:var(--primary);color:#fff!important}
.btn-secondary{background:var(--secondary);color:#fff!important}
.btn-secondary:hover{background:#334155}
.btn-whatsapp{background:var(--whatsapp)}
.btn-whatsapp:hover{background:#1ebd5b}

/* ---- News ticker ---- */
.news-ticker{
  background:var(--secondary);color:#fff;overflow:hidden;
  display:flex;align-items:stretch;font-size:.88rem;
}
.ticker-label{
  background:var(--primary);padding:.55rem 1rem;
  font-weight:700;display:flex;align-items:center;gap:.4rem;
  flex-shrink:0;color:#fff;letter-spacing:.5px;
}
.ticker-track{
  display:flex;gap:2rem;padding:.55rem 1rem;
  white-space:nowrap;overflow:hidden;flex:1;
  animation: ticker 30s linear infinite;
}
.ticker-track a{color:#fff;display:inline-flex;align-items:center;gap:.3rem}
.ticker-track a:hover{color:var(--primary-light)}
@keyframes ticker{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
body.rtl .ticker-track{animation: ticker-rtl 30s linear infinite}
@keyframes ticker-rtl{
  0%{transform:translateX(0)}
  100%{transform:translateX(50%)}
}

/* ---- Top bar ---- */
.top-bar{background:var(--dark);color:#cbd5e1;font-size:.85rem;padding:.55rem 0}
.top-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem}
.top-info{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.top-info > *{display:inline-flex;align-items:center;gap:.4rem}
.top-info i{color:var(--primary);font-size:.85rem}
.top-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.social-mini{display:flex;gap:.4rem}
.social-mini a{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;
  display:grid;place-items:center;font-size:.78rem;transition:var(--tr);
}
.social-mini a:hover{background:var(--primary);transform:translateY(-2px)}
.lang-switch{display:flex;gap:.25rem;background:rgba(255,255,255,.05);border-radius:30px;padding:.2rem}
.lang-switch a{
  padding:.25rem .7rem;border-radius:30px;
  color:#94a3b8;font-size:.8rem;font-weight:600;transition:var(--tr);
}
.lang-switch a.active{background:var(--primary);color:#fff}


/* ---- Header / Navigation ---- */
.main-header{
  background:#fff;box-shadow:var(--shadow);
  position:sticky;top:0;z-index:1000;
  transition:all var(--tr);
}
.main-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 0;gap:1rem;
}
.logo{display:flex;align-items:center;gap:.7rem;color:var(--secondary);flex-shrink:0}
.logo-icon{
  width:50px;height:50px;border-radius:50%;
  background:var(--grad);color:#fff;display:grid;place-items:center;
  font-size:1.4rem;flex-shrink:0;
  box-shadow:0 4px 15px rgba(245,158,11,.4);
}
.logo-text strong{display:block;font-size:4.05rem;
    color:transparent;background: linear-gradient(-40deg, rgb(5 6 6) 45%, #0828df 0);
    line-height:1.2;
    -webkit-background-clip: text;}
animation: pulseGlow 3s ease-in-out infinite; }
.logo-text small{font-size:.7rem;color: #1f2937;font-weight:400;
  animation: pulseGlow 3s ease-in-out infinite; }

/* 1. تعريف حركة الأنيميشن */

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    box-shadow: 0 0 0 0 rgb(0, 123, 255);
  }

  50% {
    box-shadow:
      0 0 1.2rem rgba(255, 255, 255, 0.6),
      0 0 1.2rem rgba(255, 255, 255, 0.6),
      0 0 2.5rem rgba(0, 123, 255, 0.8),
      0 0 1.5rem rgba(0, 123, 255, 0.6),
      0 0 3.5rem rgba(0, 123, 255, 0.6),
      inset 0 0 1.8rem rgba(0, 123, 255, 0.7);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(0, 123, 255);
  }
}


/* 2. تطبيق الأنيميشن على العنصر (مثلاً زر أو لوجو الشركة) */

  
  /* السطر الخاص بك لتشغيل الأنيميشن تلقائياً وبشكل مستمر */



.main-nav{display:flex;align-items:center}
.main-nav > ul{display:flex;gap:.15rem;align-items:center}
.main-nav > ul > li{position:relative}
.main-nav > ul > li > a{
  display:flex;align-items:center;gap:.4rem;
  padding:.65rem .85rem;border-radius:8px;
  color:var(--secondary);font-weight:600;font-size:.92rem;
  transition:var(--tr);position:relative;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a.active{background:var(--grad-soft);color:var(--primary)}
.main-nav > ul > li > a::after{
  content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;
  background:var(--primary);transition:all var(--tr);transform:translateX(-50%);
}
.main-nav > ul > li > a.active::after,
.main-nav > ul > li > a:hover::after{width:60%}

.nav-admin{background:var(--secondary)!important;color:#fff!important;padding:.65rem 1rem!important;border-radius:var(--radius-sm)!important}
.nav-admin:hover{background:var(--primary)!important;color:#fff!important}

.logo-img{
  width:64px;height:64px;flex-shrink:0;
  object-fit:contain;
  border-radius:50%;
  background:transparent;
  transition:transform .35s ease, filter .35s ease;
  filter:drop-shadow(0 3px 8px rgba(20, 38, 76, .25));
}
.logo:hover .logo-img{transform:rotate(-8deg) scale(1.05);filter:drop-shadow(0 5px 14px rgba(245,158,11,.4))}
.logo-text strong{display:block;font-size:2.05rem;color:transparent;background: linear-gradient(-40deg, rgb(5 6 6)  45%, #0828df 0);
    line-height:1.2;
    -webkit-background-clip: text;
  animation: pulseGlow 3s ease-in-out infinite; }
.logo-text small{font-size:.7rem;color: #1f2937;font-weight:400
  animation: pulseGlow 3s ease-in-out infinite; }

/* Footer logo image (on alrae style) */
.footer-logo{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.footer-logo-img{
  width:70px;height:70px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  padding:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .35s ease;
}
.footer-logo:hover .footer-logo-img{transform:rotate(-8deg) scale(1.05)}
.footer-logo h3{margin:0;color:#fff;font-size:1.2rem;line-height:1.2}

/* Dropdown */
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;
  min-width:240px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:var(--tr);z-index:50;
  border:1px solid var(--border);
}
body.rtl .dropdown{left:auto;right:0}
.has-dropdown:hover > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li a{
  display:flex;align-items:center;gap:.6rem;
  padding:.65rem .9rem;border-radius:6px;
  color:var(--text);font-size:.88rem;font-weight:500;transition:var(--tr-fast);
}
.dropdown li a:hover{background:var(--grad-soft);color:var(--primary)}
.dropdown li a i{color:var(--primary);font-size:.85rem;width:18px;text-align:center}

/* Mobile toggle */
.mobile-toggle{
  display:none;background:none;border:none;cursor:pointer;
  padding:.5rem;flex-direction:column;gap:5px;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:8px;transition:var(--tr);
}
.mobile-toggle:hover{background:var(--grad-soft)}
.mobile-toggle span{
  display:block;width:24px;height:2.5px;background:var(--secondary);
  border-radius:3px;transition:var(--tr);transform-origin:center;
}
.mobile-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mobile-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Mobile overlay */
.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:var(--tr);z-index:998;
  backdrop-filter:blur(2px);
}
.nav-overlay.show{opacity:1;visibility:visible}

/* ---- Page header (sub-pages) ---- */
.page-header{
  background:var(--grad-dark);color:#fff;
  position:relative;overflow:hidden;
}
.page-header::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(245,158,11,.25), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(251,191,36,.2), transparent 50%);
}
.page-header::after{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L60 40 L95 40 L66 60 L78 95 L50 75 L22 95 L34 60 L5 40 L40 40 Z' fill='rgba(245,158,11,.05)'/%3E%3C/svg%3E") repeat;
  background-size:80px;opacity:.4;
}
.page-header > .container{position:relative;z-index:2}
.page-header h1{
  color:#fff;font-size:clamp(1rem,4vw,2rem);font-weight:800;margin-bottom:.0rem;
    text-align: center;
}
.page-header h2{
  color:#fff;font-size:clamp(1rem,4vw,2rem);font-weight:800;margin-bottom:.0rem;
    text-align: center;
}
.breadcrumb{
  display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#cbd5e1;flex-wrap:wrap;
}
.breadcrumb a{color:#fff;opacity:.85}
.breadcrumb a:hover{color:var(--primary-light);opacity:1}
.breadcrumb .sep{opacity:.5;font-size:.7rem}

/* ---- Sections ---- */
section{
  padding:4.5rem 0;position:relative;
  background-color: #0b1220;
  background-image:
    /* خلايا الألواح: مربعات داكنة */
    linear-gradient(rgba(30, 58, 138, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.32) 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%;
  color:#e2e8f0;
  overflow:hidden;
}
section .section-title,
section h1, section h2, section h3, section h4{
  color:#fff !important;
}
section p, section .section-subtitle{ color:#cbd5e1 !important; }
section .container{position:relative;z-index:2}

/* Glowing radial halo behind every section — uses --grad-glow */
section::before{
  content:'';position:absolute;inset:0;
  background: var(--grad-glow);
  opacity:.55;pointer-events:none;z-index:0;
  animation: sectionGlowPulse 8s ease-in-out infinite alternate;
}
@keyframes sectionGlowPulse{
  0%   { opacity:.35; transform:scale(1); }
  100% { opacity:.75; transform:scale(1.05); }
}
section > .container{position:relative;z-index:1}

section.bg-alt{
  background-color: #0b1220;
  background-image:
    /* خلايا الألواح: مربعات داكنة */
    linear-gradient(rgba(30, 58, 138, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.32) 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%;
  position:relative;
  color:#e2e8f0;
}
section.bg-alt .section-title,
section.bg-alt h1, section.bg-alt h2, section.bg-alt h3, section.bg-alt h4{
  color:#fff !important;
}
section.bg-alt p, section.bg-alt .section-subtitle{ color:#cbd5e1 !important; }
section.bg-alt::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 55%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 55%);
  opacity:.5;
  animation: sectionGlowPulse 10s ease-in-out infinite alternate;
}
section.bg-alt > .container{position:relative;z-index:1}
section.surface-dark,
section.hero,
section.counters-section,
section.shop-bg,
section.cta-dark,
section.video-section{
  background: var(--surface-dark);
  color: var(--on-dark);
}
section.surface-dark *,
section.hero *,
section.counters-section *,
section.shop-bg *,
section.cta-dark *,
section.video-section *{
  color: var(--on-dark);
}
section.surface-dark a, section.hero a, section.counters-section a,
section.shop-bg a, section.cta-dark a, section.video-section a{
  color: var(--primary-light);
}

.section-title{
  font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:800;
  color:var(--secondary);text-align:center;
  margin-bottom:.6rem;position:relative;
}
.section-title::after{
  content:'';display:block;width:70px;height:4px;
  background:var(--grad);border-radius:2px;margin:.8rem auto 0;
}
.section-subtitle{
  text-align:center;color:var(--text-soft, var(--muted));
  max-width:720px;margin:0 auto 3rem;font-size:1.05rem;
}

/* ---- Hero ---- */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  background:var(--grad-dark);color:#fff;overflow:hidden;
}
.hero-logo-wrap{
  position:relative;width:160px;height:160px;margin:0 auto 1.5rem;
  display:flex;align-items:center;justify-content:center;
}
.hero-logo{
  position:relative;z-index:2;
  width:140px;height:140px;
  object-fit:contain;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  padding:8px;
  box-shadow:0 12px 35px rgba(0,0,0,.4), 0 0 0 4px rgba(245,158,11,.35);
  animation:heroLogoFloat 4s ease-in-out infinite;
}
.hero-logo-ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:2px dashed rgba(251,191,36,.5);
  animation:heroRingSpin 18s linear infinite;
}
@keyframes heroLogoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes heroRingSpin{to{transform:rotate(360deg)}}
@media (max-width: 768px){
  .hero-logo-wrap{width:120px;height:120px}
  .hero-logo{width:100px;height:100px;padding:6px}
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(245,158,11,.3), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(251,191,36,.25), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(245,158,11,.15), transparent 50%);
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L60 40 L95 40 L66 60 L78 95 L50 75 L22 95 L34 60 L5 40 L40 40 Z' fill='rgba(245,158,11,.04)'/%3E%3C/svg%3E") repeat;
  background-size:120px;opacity:.6;animation:heroBg 60s linear infinite;
}
@keyframes heroBg{to{background-position:1000px 0}}
.hero-content{
  position:relative;z-index:2;max-width:920px;margin:0 auto;
  padding:3rem 1rem;text-align:center;
  background-image:url("../img/tais-storefront.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  overflow:hidden;
  isolation:isolate;
}
/* Dark overlay for legibility */
.hero-content::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(15,23,42,.72) 0%, rgba(15,23,42,.55) 45%, rgba(15,23,42,.78) 100%);
  border-radius:inherit;
}
/* Solar panel lines / dividers above the hero */
.hero-content::after{
  content:"";position:absolute;
  top:-14px;left:50%;transform:translateX(-50%);
  width:min(820px, 88%);height:14px;z-index:3;
  background:
    linear-gradient(90deg,
      transparent 0,
      rgba(251,191,36,.0) 6%,
      rgba(251,191,36,.95) 12%,
      rgba(245,158,11,.95) 50%,
      rgba(251,191,36,.95) 88%,
      rgba(251,191,36,.0) 94%,
      transparent 100%);
  border-radius:8px 8px 0 0;
  box-shadow:0 8px 18px rgba(245,158,11,.35);
  background-size:100% 14px;
  background-image:
    linear-gradient(180deg, #1e293b 0 4px, transparent 4px 8px, #1e293b 8px 12px, transparent 12px 14px),
    linear-gradient(90deg,
      transparent 0,
      rgba(251,191,36,.0) 6%,
      rgba(251,191,36,.95) 12%,
      rgba(245,158,11,.95) 50%,
      rgba(251,191,36,.95) 88%,
      rgba(251,191,36,.0) 94%,
      transparent 100%);
}
/* Solar panel cell grid (faux panel look) */
.hero-panels-strip{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:min(820px, 88%);height:22px;z-index:2;
  display:flex;gap:3px;padding:0 4px;pointer-events:none;
}
.hero-panels-strip span{
  flex:1;display:block;
  background:
    repeating-linear-gradient(90deg,
      rgba(30,41,59,.92) 0 8px,
      rgba(15,23,42,.95) 8px 16px),
    linear-gradient(180deg, #0f172a, #1e293b);
  border:1px solid rgba(251,191,36,.5);
  border-radius:3px;
  box-shadow:0 6px 14px rgba(0,0,0,.45);
  position:relative;
}
.hero-panels-strip span::before,
.hero-panels-strip span::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:rgba(96,165,250,.55);
}
.hero-panels-strip span::before{top:50%}
.hero-panels-strip span::after{top:calc(50% + 1px)}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(245,158,11,.15);color:var(--primary-light);
  padding:.5rem 1.2rem;border-radius:30px;font-size:.85rem;font-weight:600;
  border:1px solid rgba(245,158,11,.3);margin-bottom:1.2rem;
  animation:fadeInDown 1s ease;
}
.hero-badge i{color:var(--primary)}
.hero h1{
  color:#fff;font-size:clamp(2rem,5.5vw,3.8rem);font-weight:900;
  line-height:1.15;margin-bottom:1rem;
  animation:fadeInUp 1s ease .1s both;
}
.hero h1 span{
  background:linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shine 3s linear infinite;
}
@keyframes shine{to{background-position:200% center}}
.hero h2{
  color:#e2e8f0;font-size:clamp(1rem,2.4vw,1.3rem);font-weight:400;
  margin-bottom:2rem;animation:fadeInUp 1s ease .25s both;
}
.hero-cta{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  animation:fadeInUp 1s ease .4s both;
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInDown{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}

.hero-scroll{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  color:#fff;opacity:.7;font-size:1.8rem;z-index:2;
  animation:bounce 2s infinite;
}
@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-10px)}
}

/* ---- About ---- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.about-img-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-img-wrap img{width:100%;height:100%;min-height:380px;object-fit:cover;transition:transform .6s}
.about-img-wrap:hover img{transform:scale(1.04)}
.about-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(245,158,11,.15), transparent 60%);
  pointer-events:none;
}

/* About video (replaces the static image) */
.about-video-wrap{
  position:relative;width:100%;aspect-ratio:16/10;
  border-radius:var(--radius-lg);overflow:hidden;
  background:#0f172a;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.45);
}
.about-video{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.about-video-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, transparent 0%, transparent 60%, rgba(0,0,0,.55) 100%);
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.about-video-wrap:hover .about-video-overlay{opacity:1}
.about-play-btn{
  pointer-events:auto;width:74px;height:74px;border-radius:50%;
  background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;text-decoration:none;
  box-shadow:0 12px 30px rgba(245,158,11,.45);
  transform:scale(1);transition:transform .25s;
  border:3px solid rgba(255,255,255,.85);
}
.about-play-btn:hover{transform:scale(1.12)}
.about-play-btn i{margin-inline-start:4px}

.about-experience{
  position:absolute;bottom:1.5rem;inset-inline-start:1.5rem;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  padding:1rem 1.4rem;border-radius:var(--radius);
  display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow);
  z-index:2;
}
.about-experience .num{
  font-size:2.2rem;font-weight:900;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.about-experience .label{font-size:.85rem;color:var(--muted);font-weight:600}

.about-info h3{color:var(--on-dark);font-size:1.6rem;margin-bottom:.8rem}
.about-info > p{color:var( var(--muted));margin-bottom:1.2rem;line-height:1.85;background: (--backgr);}
.feature-list{display:grid;gap:.65rem;margin-bottom:1.5rem}
.feature-list li{
  display:flex;gap:.7rem;align-items:flex-start;
  background:var(--card, #fff);padding:.85rem 1rem;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);transition:var(--tr);
}
.feature-list li:hover{transform:translateX(5px);box-shadow:var(--shadow)}
body.rtl .feature-list li:hover{transform:translateX(-5px)}
.feature-list li i{
  color:var(--primary);font-size:1.15rem;flex-shrink:0;margin-top:.15rem;
  width:24px;text-align:center;
}
.feature-list li span{font-size:.92rem;color:var(--text);font-weight:500}

/* ---- Vision cards ---- */
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.vision-card{
  background:var(--card, #fff);padding:2rem;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);text-align:center;transition:var(--tr);
  border-top:4px solid transparent;
}
.vision-card:hover{
  transform:translateY(-8px);box-shadow:var(--shadow-lg);
  border-top-color:var(--primary);
}
.vision-card .icon{
  width:72px;height:72px;border-radius:50%;margin:0 auto 1rem;
  background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.9rem;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
  transition:var(--tr);
}
.vision-card:hover .icon{transform:scale(1.08) rotate(-5deg)}
.vision-card h3{color:var(--secondary);margin-bottom:.5rem;font-size:1.25rem}
.vision-card p{color:var(--text-soft, var(--text));font-size:.95rem;margin:0}

/* ---- Services ---- */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.service-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--card, #fff);box-shadow:var(--shadow-sm);transition:var(--tr);
  display:flex;flex-direction:column;
  color:var(--text);
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.service-img{height:200px;overflow:hidden;position:relative;background:var(--grad-soft)}
.service-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.service-card:hover .service-img img{transform:scale(1.08)}
.service-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(245,158,11,.85), rgba(249,115,22,.85));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem;
  opacity:0;transition:var(--tr);
}
.service-card:hover .service-overlay{opacity:1}
.service-body{padding:1.5rem;text-align:center;flex:1;display:flex;flex-direction:column}
.service-icon-circle{
  width:60px;height:60px;border-radius:50%;
  background:var(--grad-soft);color:var(--primary);
  display:grid;place-items:center;font-size:1.7rem;margin:-50px auto 1rem;
  border:4px solid #fff;position:relative;z-index:2;
  box-shadow:var(--shadow-sm);
}
.service-body h3{color:var(--secondary);font-size:1.2rem;margin-bottom:.5rem}
.service-body p{color:var(--text-soft, var(--muted));font-size:.92rem;margin:0 0 1rem;flex:1}
.service-link{
  display:inline-flex;align-items:center;gap:.3rem;color:var(--primary);
  font-weight:600;font-size:.88rem;transition:var(--tr);
}
.service-link:hover{gap:.6rem}

/* ---- Counters ---- */
.counters-section{
  position:relative;background:var(--grad-dark);color:#fff;
  padding:4rem 0;overflow:hidden;
}
.counters-section::before{
  content:'';position:absolute;inset:0;opacity:.15;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L60 40 L95 40 L66 60 L78 95 L50 75 L22 95 L34 60 L5 40 L40 40 Z' fill='rgba(245,158,11,.3)'/%3E%3C/svg%3E") repeat;
  background-size:60px;
}
.counters-section .section-title{color:#fff}
.counters-section .section-title::after{background:rgba(255,255,255,.3)}
.counters-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.5rem;text-align:center;position:relative;z-index:2;
}
.counter-item{
  padding:1.5rem 1rem;background:rgba(255,255,255,.05);
  border-radius:var(--radius);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);transition:var(--tr);
}
.counter-item:hover{
  background:rgba(255,255,255,.08);transform:translateY(-5px);
  border-color:var(--primary);
}
.counter-item i{
  color:var(--primary-light);margin-bottom:.5rem;font-size:2.4rem;
  display:inline-block;
}
.counter-num{
  font-size:2.8rem;font-weight:900;margin:.4rem 0;
  background:linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.counter-label{color:#e2e8f0;font-size:.95rem;font-weight:500}

/* ---- Products ---- */
.products{
  position: relative;
  width: 100%;
}

.section-title{
  font-family: 'Almarai';
  font-weight: 700;
  color: var(--secondary);
  display: block;
  /* font-size: 2.3rem; */
  padding: 1rem 0 1rem 0;
  position: relative;
  z-index: 50 !important;
}
.empty .section-title{
    top: 25% !important
  }
  .dashboard-card {
      background:rgba(255, 255, 255, 0.76);
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      text-align: center;
      margin-bottom: 20px;
      margin: 1rem 0;
      position: relative;
      z-index: 2;
      transition: all 0.2s ease-out
    }
    /* Hover Effects */
    .dashboard-card:hover {
      transform: translateY(-8px);
      box-shadow: 3px 120px 157px -42px rgba(18, 67, 213, 0.37);

}
.dashboard-card > i img {
display: block;
width: 100%;
height: 100%;
        border-radius: 35%;
object-fit: cover;
}

    .dashboard-card i {
      font-size: 36px;
      margin-bottom:1px;
      padding:1px;
            width: 250px;
height: 200px;
      border-radius: 35%;
      border: 2px solid;
      display: inline-block;
      transition: all 0.6s ease-out
    }
    .dashboard-card:hover i {
      transform: rotateY(180deg);
    }

    .solar,.battery,.charger,.inverter { color: #007bff; border-color: #007bff; }
    .battery { color: #00c851; border-color: #00c851; }
    .inverter { color: #ffbb33; border-color: #ffbb33; }
    .charger { color: #ff4444; border-color: #ff4444; }
    .dashboard-number {
      font-size: 28px;
      font-weight: bold;
        color:black;
    }
 


.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.products-filter{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:.5rem;margin-bottom:2.5rem;
}
.products-filter a{
  padding:.55rem 1.2rem;background:#fff;border:2px solid var(--border);
  border-radius:30px;color:var(--secondary);font-weight:600;font-size:.88rem;
  transition:var(--tr);display:inline-flex;align-items:center;gap:.4rem;
}
.products-filter a:hover{border-color:var(--primary);color:var(--primary)}
.products-filter a.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px rgba(245,158,11,.3)}

.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.product-card{
  background:var(--card, #fff);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:var(--tr);
  display:flex;flex-direction:column;height:100%;
  color:var(--text);
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.product-thumb{
  height:220px;overflow:hidden;background:var(--grad-soft);
  position:relative;
}
.product-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.product-card:hover .product-thumb img{transform:scale(1.08)}
.product-badge{
  position:absolute;top:12px;inset-inline-start:12px;
  background:var(--primary);color:#fff;padding:.3rem .8rem;
  border-radius:30px;font-size:.72rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.3rem;
  box-shadow:0 4px 10px rgba(245,158,11,.4);
}
.product-badge.new{background:var(--success)}
.product-body{padding:1.3rem;flex:1;display:flex;flex-direction:column}
.product-category{
  font-size:.78rem;color:var(--primary);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem;
}
.product-body h3{color:var(--secondary);font-size:1.1rem;margin-bottom:.4rem;line-height:1.4}
.product-body > p{color:var(--muted);font-size:.88rem;margin-bottom:1rem;flex:1}
.product-meta{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--border);padding-top:.9rem;margin-top:auto;
}
.product-meta .view-link{
  color:var(--primary);font-weight:600;font-size:.85rem;
  display:inline-flex;align-items:center;gap:.3rem;transition:var(--tr);
}
.product-meta .view-link:hover{gap:.5rem}
.product-meta .views{font-size:.8rem;color:var(--muted)}
.product-meta .views i{color:var(--primary);margin-inline-end:.2rem}

/* ---- Projects ---- */

/* ======================================================= */
/* Fourth-project */
/* ======================================================= */

.fourth-projects{
position: relative;
min-height: 70vh;
overflow: hidden;
background: url(../img/sloar_img.jpg);
background-attachment:fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat; 

}
@media (max-width: 992px){
.fourth-projects{
/* padding: 7% 0; */
}
.play{
margin: 2rem 0;
}
}

.hand {
position: relative;
width: 170px;
height: 225px;
margin: auto;
margin-top: .5rem;
border: 5px solid rgb(1, 6, 49);
border-radius: 20px;
padding: 0;
list-style: none;
z-index: 2;
}

/* لي لكل ورقة */
.hand > li {
position: absolute;
top: 0; left: 0;
width: 12rem;            /* 192px */
height: 16.8rem;         /* 268.8px */
overflow: hidden;
border-radius: 15px;
box-shadow:
inset 0 0 80px rgba(3,0,44,0.5),
0 0 3px #001cbd;
transform-style: preserve-3d;
backface-visibility: hidden;
perspective: 1000;
transition: top .5s ease .1s,
          left .5s ease .2s,
          transform .5s ease .2s;
}

/* دوران الورق المبدئي */
.hand > li:nth-child(1) { transform: rotate(-3deg); }
.hand > li:nth-child(2) { transform: rotate(0deg); }
.hand > li:nth-child(3) { transform: rotate(3deg); }
.hand > li:nth-child(4) { transform: rotate(6deg); }

/* الصورة بداخل الورقة */
.hand > li img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* تأثير hover على كل ورقة */
.hand > li:hover {
top: -30px;
left: 0;
z-index: 101;
cursor: pointer;
box-shadow:
inset 0 0 80px rgba(1,6,50,0.3),
0 0 30px rgba(100,150,200,0.8);
}

/* تباعد الورق عند تحريك مؤشر الفأرة */
.hand:hover > li:nth-child(1) {
transform: rotate(-10deg);
left: 0;
}
.hand:hover > li:nth-child(2) {
transform: rotate(0deg);
left: 30px;
}
.hand:hover > li:nth-child(3) {
transform: rotate(10deg);
left: 60px;
}
.hand:hover > li:nth-child(4) {
transform: rotate(20deg);
left: 90px;
}

/* عنوان المشروع */
.project-title {
margin-top: 3.8rem;
color: var(--text);
position: relative;
z-index: 50;
}

.projects-filter{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:.5rem;margin-bottom:2.5rem;
}
.projects-filter a{
  padding:.55rem 1.2rem;background:#fff;border:2px solid var(--border);
  border-radius:30px;color:var(--secondary);font-weight:600;font-size:.88rem;
  transition:var(--tr);
}
.projects-filter a:hover{border-color:var(--primary);color:var(--primary)}
.projects-filter a.active{background:var(--primary);color:#fff;border-color:var(--primary)}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.project-card{
  background:var(--card, #fff);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:var(--tr);
  display:flex;flex-direction:column;height:100%;
  color:var(--text);
}
}
.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.project-thumb{
  height:240px;overflow:hidden;position:relative;background:var(--grad-soft);
}
.project-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.project-card:hover .project-thumb img{transform:scale(1.08)}
.project-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(15,23,42,.85), transparent 60%);
  display:flex;align-items:flex-end;padding:1.2rem;
  opacity:0;transition:var(--tr);
}
.project-card:hover .project-overlay{opacity:1}
.project-card-wrap{position:relative}
.project-gallery-btn{
  position:absolute;top:.7rem;inset-inline-start:.7rem;z-index:5;
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(0,0,0,.7);color:#fff;border:none;
  padding:.4rem .7rem;border-radius:30px;font-size:.78rem;font-weight:700;
  cursor:pointer;backdrop-filter:blur(4px);
  transition:var(--tr);
}
.project-gallery-btn:hover{background:var(--primary);transform:translateY(-1px)}
.project-gallery-btn i{font-size:.85rem}
.project-overlay .view-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:1.2rem;
  margin:auto;transition:var(--tr);
}
.project-card:hover .view-icon{transform:scale(1.1) rotate(10deg)}
.project-body{padding:1.3rem;flex:1;display:flex;flex-direction:column}
.project-tag{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--grad-soft);color:var(--primary);
  padding:.3rem .8rem;border-radius:30px;
  font-size:.75rem;font-weight:600;margin-bottom:.6rem;
  align-self:flex-start;
}
.project-body h3{color:var(--secondary);font-size:1.15rem;margin-bottom:.4rem;line-height:1.4}
.project-body > p{color:var(--muted);font-size:.85rem;margin:0 0 .8rem}
.project-info-row{
  display:flex;gap:1rem;font-size:.8rem;color:var(--muted);flex-wrap:wrap;
  margin-top:auto;padding-top:.8rem;border-top:1px solid var(--border);
}
.project-info-row span{display:inline-flex;align-items:center;gap:.3rem}
.project-info-row i{color:var(--primary)}

/* ---- Project Detail ---- */
.project-detail-wrap{display:grid;grid-template-columns:1fr 320px;gap:2.5rem;align-items:flex-start}
.project-gallery-main{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--grad-dark);
  position:relative;aspect-ratio:16/10;
}
.project-gallery-main img,
.project-gallery-main iframe{
  width:100%;height:100%;object-fit:cover;border:0;display:block;
}
.gallery-thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:.6rem;margin-top:1rem;
}
.gallery-thumbs .thumb{
  aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;
  border:3px solid transparent;transition:var(--tr);background:#f1f5f9;position:relative;
}
.gallery-thumbs .thumb img,
.gallery-thumbs .thumb iframe{
  width:100%;height:100%;object-fit:cover;border:0;pointer-events:none;
}
.gallery-thumbs .thumb.active,
.gallery-thumbs .thumb:hover{border-color:var(--primary);transform:scale(1.05)}
.gallery-thumbs .thumb.video-thumb{background:var(--grad-dark);display:grid;place-items:center;color:#fff}
.gallery-thumbs .thumb.video-thumb i{font-size:1.5rem}

.gallery-nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--primary);
  display:grid;place-items:center;font-size:1rem;
  box-shadow:var(--shadow);cursor:pointer;transition:var(--tr);z-index:3;
  border:none;
}
.gallery-nav-btn:hover{background:#fff;transform:translateY(-50%) scale(1.1)}
.gallery-nav-btn.prev{inset-inline-start:1rem}
.gallery-nav-btn.next{inset-inline-end:1rem}
.gallery-counter{
  position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.75);color:#fff;padding:.4rem .9rem;
  border-radius:30px;font-size:.85rem;font-weight:600;z-index:3;
  display:flex;align-items:center;gap:.4rem;
}

.form-card{
  background:var(--card, #fff);padding:1.8rem;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);margin-bottom:1.5rem;
}
.form-card h2{color:var(--secondary);font-size:1.4rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.form-card h2 i{color:var(--primary)}
.form-card h3{color:var(--secondary);font-size:1.15rem;margin:1.5rem 0 .8rem}
.form-card .meta{
  display:flex;flex-wrap:wrap;gap:1rem;padding-bottom:1rem;
  margin-bottom:1rem;border-bottom:1px solid var(--border);
  font-size:.88rem;color:var(--muted);
}
.form-card .meta span{display:inline-flex;align-items:center;gap:.4rem}
.form-card .meta i{color:var(--primary)}
.form-card .content{color:var(--text-soft, var(--text));line-height:1.9}
.form-card .content p{margin-bottom:.8rem}

.benefits-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;margin-top:1rem;
}
.benefit-item{
  background:var(--grad-soft);border:1px solid rgba(245,158,11,.2);
  padding:1.2rem;border-radius:var(--radius);transition:var(--tr);
}
.benefit-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.benefit-item h4{color:var(--secondary);font-size:1rem;margin-bottom:.4rem}
.benefit-item .value{color:var(--primary);font-weight:600;font-size:.92rem}

/* FAQ accordion (used by menus of type=faq) */
.faq-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.faq-item{
  background:var(--grad-soft);
  border:1px solid rgba(245,158,11,.18);
  border-radius:var(--radius);
  padding:.9rem 1.1rem;
  transition:var(--tr);
}
.faq-item[open]{box-shadow:var(--shadow-sm);border-color:var(--primary)}
.faq-item summary{
  cursor:pointer;font-weight:600;color:var(--secondary);
  display:flex;align-items:center;gap:.5rem;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  margin-inline-start:auto;color:var(--primary);transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-answer{
  margin-top:.7rem;padding-top:.7rem;border-top:1px dashed rgba(245,158,11,.25);
  color:var(--text-soft, var(--text));line-height:1.8
}

/* Sidebar */
.project-sidebar{
  position:sticky;background:var(--card, #fff);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
  border:1px solid var(--border);
}
.sidebar-header{
  background:var(--grad);color:#fff;padding:1.2rem 1.5rem;
}
.sidebar-header h3{margin:0;color:#fff;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
.sidebar-header i{color:#fff}
.sidebar-body{padding:1.5rem}
.info-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 0;border-bottom:1px solid var(--border);
  font-size:.9rem;
}
.info-row:last-child{border-bottom:0}
.info-row .lbl{color:var(--muted);font-weight:500}
.info-row .val{color:var(--secondary);font-weight:600;text-align:end}
.sidebar-cta{
  margin-top:1.2rem;padding:1.2rem;border-radius:var(--radius);
  background:var(--grad);color:#fff;text-align:center;
}
.sidebar-cta h4{color:#fff;font-size:1rem;margin-bottom:.4rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.sidebar-cta p{color:rgba(255,255,255,.95);font-size:.85rem;margin:0 0 .8rem}
.sidebar-cta .btn{background:#fff;color:var(--primary)!important;width:100%}
.sidebar-cta .btn:hover{background:#fff;transform:scale(1.02)}
.sidebar-whatsapp{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--whatsapp);color:#fff!important;
  padding:.85rem;border-radius:var(--radius-sm);font-weight:700;
  margin-top:.8rem;transition:var(--tr);
}
.sidebar-whatsapp:hover{background:#1ebd5b;transform:translateY(-2px)}

/* ---- Gallery ---- */
.gallery-tabs{
  display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin-bottom:2.5rem;
}
.gallery-tabs a{
  padding:.55rem 1.2rem;background:#fff;color:var(--secondary);
  border-radius:30px;font-weight:600;font-size:.9rem;transition:var(--tr);
  border:2px solid var(--border);
}
.gallery-tabs a:hover,
.gallery-tabs a.active{background:var(--primary);color:#fff;border-color:var(--primary)}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.gallery-item{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--grad-dark);aspect-ratio:16/10;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:var(--tr);
}
.gallery-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item .badge-type{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  background:rgba(0,0,0,.65);color:#fff;
  padding:.3rem .7rem;border-radius:30px;font-size:.72rem;font-weight:600;
}
.gallery-item .play-overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.4);color:#fff;font-size:3rem;
  opacity:0;transition:var(--tr);
}
.gallery-item:hover .play-overlay{opacity:1}
.gallery-item .gallery-title{
  position:absolute;bottom:0;inset-inline-start:0;inset-inline-end:0;
  padding:.8rem 1rem;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color:#fff;font-size:.92rem;font-weight:600;
}

/* ---- News ---- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.news-card{
  background:var(--card, #fff);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:var(--tr);
  display:flex;flex-direction:column;height:100%;
}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.news-thumb{height:200px;overflow:hidden;position:relative;background:var(--grad-soft)}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.news-card:hover .news-thumb img{transform:scale(1.08)}
.news-meta{
  font-size:.78rem;color:var(--muted);
  margin-bottom:.5rem;display:inline-flex;align-items:center;gap:.4rem;
}
.news-meta i{color:var(--primary)}
.news-body{padding:1.3rem;flex:1;display:flex;flex-direction:column}
.news-body h3{color:var(--secondary);font-size:1.15rem;margin-bottom:.5rem;line-height:1.4}
.news-body p{color:var(--muted);font-size:.9rem;margin:0 0 1rem;flex:1}
.news-link{
  color:var(--primary);font-weight:600;font-size:.88rem;
  display:inline-flex;align-items:center;gap:.3rem;transition:var(--tr);
}
.news-link:hover{gap:.6rem}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;align-items:flex-start}
.contact-info{display:grid;gap:1rem}
.info-card{
  display:flex;gap:1rem;background:var(--card, #fff);padding:1.3rem;
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:var(--tr);border:1px solid var(--border);
}
.info-card:hover{transform:translateX(5px);box-shadow:var(--shadow)}
body.rtl .info-card:hover{transform:translateX(-5px)}
.info-card .icon-circle{
  width:50px;height:50px;border-radius:50%;background:var(--grad);
  color:#fff;display:grid;place-items:center;font-size:1.3rem;flex-shrink:0;
  box-shadow:0 6px 15px rgba(245,158,11,.3);
}
.info-card h4{color:var(--secondary);margin-bottom:.2rem;font-size:1.05rem}
.info-card p{color:var(--text-soft, var(--text));margin:0;font-size:.9rem}
.contact-form{
  background:var(--card, #fff);padding:2rem;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
}
.contact-form h3{color:var(--secondary);margin-bottom:1.2rem;font-size:1.3rem}
.form-group{margin-bottom:1rem}
.form-group label{
  display:block;color:var(--secondary);font-weight:600;
  margin-bottom:.4rem;font-size:.88rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;padding:.75rem 1rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-family:inherit;font-size:.95rem;
  transition:var(--tr-fast);background:#fff;color:var(--text);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
}
.contact-form textarea{min-height:130px;resize:vertical}
.alert{padding:.85rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem;border:1px solid transparent}
.alert-success{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.alert-error{background:#fee2e2;color:#991b1b;border-color:#fecaca}

/* ---- Footer ---- */
.main-footer{background-color:#0b1220;color:#cbd5e1;padding:4rem 0 0;position:relative;overflow:hidden;background-image:linear-gradient(rgba(30,58,138,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,138,.30) 1px,transparent 1px),linear-gradient(rgba(180,200,230,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(180,200,230,.16) 1px,transparent 1px),radial-gradient(ellipse at top,rgba(30,64,175,.35),transparent 60%),radial-gradient(ellipse at bottom,rgba(15,23,42,.7),transparent 70%);background-size:100px 100px,100px 100px,20px 20px,20px 20px,100% 100%,100% 100%}
.main-footer::before{
  content:'';position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:4px;
  background:var(--grad);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr 1.5fr;gap:2rem;margin-bottom:3rem}
.footer-col h4{color:#fff;margin-bottom:1.2rem;font-size:1.1rem;position:relative;padding-bottom:.6rem}
.footer-col h4::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:45px;height:3px;background:var(--primary);border-radius:2px}
.footer-logo{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.footer-logo h3{color:#fff;font-size:1.25rem;margin:0}
.footer-desc{margin-bottom:1.2rem;font-size:.92rem;line-height:1.8;color:#94a3b8}
.footer-social{display:flex;gap:.5rem}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;
  display:grid;place-items:center;transition:var(--tr);font-size:.95rem;
}
.footer-social a:hover{background:var(--primary);transform:translateY(-3px)}
.footer-links li{margin-bottom:.7rem}
.footer-links a{
  display:inline-flex;align-items:center;gap:.4rem;
  color:#cbd5e1;font-size:.92rem;transition:var(--tr-fast);
}
.footer-links a:hover{color:var(--primary-light);transform:translateX(5px)}
body.rtl .footer-links a:hover{transform:translateX(-5px)}
.footer-links i{color:var(--primary);font-size:.7rem}
.footer-contact li{
  display:flex;gap:.6rem;margin-bottom:.85rem;
  font-size:.92rem;color:#cbd5e1;align-items:flex-start;
}
.footer-contact i{color:var(--primary);margin-top:.2rem;font-size:.95rem;flex-shrink:0}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem 0;text-align:center;font-size:.88rem;
}
.footer-bottom p{margin:.2rem 0;color:#94a3b8}
.footer-bottom a{color:var(--primary-light)}
.footer-bottom a:hover{color:var(--primary)}

/* ---- Floating buttons ---- */
.whatsapp-float,
.back-to-top{
  position:fixed;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;
  color:#fff;box-shadow:0 8px 25px rgba(0,0,0,.25);
  z-index:999;transition:var(--tr);border:none;
}
.whatsapp-float{
  bottom:20px;inset-inline-start:20px;background:var(--whatsapp);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 8px 25px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.7)}
  70%{box-shadow:0 8px 25px rgba(37,211,102,.4), 0 0 0 20px rgba(37,211,102,0)}
  100%{box-shadow:0 8px 25px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,0)}
}
.back-to-top{
  bottom:85px;inset-inline-start:20px;background:var(--primary);
  display:none;opacity:0;
}
.back-to-top.show{display:grid;opacity:1}
.back-to-top:hover{background:var(--primary-dark)}
.whatsapp-float:hover,.back-to-top:hover{transform:scale(1.1)}

/* ---- Lightbox (fullscreen gallery) ---- */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.94);
  z-index:9999;display:none;align-items:center;justify-content:center;
  padding:0;animation:fadeIn .3s ease;
}
.lightbox.show{display:flex}
.lightbox-stage{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:80px 90px;
}
.lightbox-img{
  max-width:100%;max-height:100%;border-radius:var(--radius-sm);
  box-shadow:0 20px 50px rgba(0,0,0,.5);object-fit:contain;
  user-select:none;-webkit-user-drag:none;
}
.lightbox-video-wrap{
  width:100%;max-width:1280px;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5);background:#000;
}
.lightbox-video-wrap iframe{width:100%;height:100%;border:0;display:block}
.lightbox-close{
  position:absolute;top:1.2rem;inset-inline-end:1.2rem;
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;
  display:grid;place-items:center;font-size:1.4rem;cursor:pointer;
  transition:var(--tr);border:none;z-index:10;
  backdrop-filter:blur(6px);
}
.lightbox-close:hover{background:var(--primary);transform:rotate(90deg)}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  display:grid;place-items:center;font-size:1.1rem;cursor:pointer;
  transition:var(--tr);border:none;z-index:10;
  backdrop-filter:blur(6px);
}
.lightbox-nav:hover{background:rgba(255,255,255,.25);transform:translateY(-50%) scale(1.08)}
.lightbox-nav.prev{inset-inline-start:1.5rem}
.lightbox-nav.next{inset-inline-end:1.5rem}
.lightbox-nav:disabled{opacity:.25;cursor:not-allowed}
.lightbox-counter{
  position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#fff;padding:.55rem 1.1rem;
  border-radius:30px;font-size:.9rem;font-weight:600;z-index:10;
  display:flex;align-items:center;gap:.5rem;
  backdrop-filter:blur(6px);
}
.lightbox-counter .type-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.15rem .55rem;border-radius:20px;background:var(--primary);color:#fff;font-size:.72rem;
}
.lightbox-thumbs{
  position:absolute;bottom:1.2rem;right:1.2rem;left:1.2rem;
  display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;
  max-width:60%;margin:0 auto;z-index:10;
  pointer-events:none;
}
.lightbox-thumbs .lt{
  width:46px;height:46px;border-radius:8px;overflow:hidden;cursor:pointer;
  border:2px solid rgba(255,255,255,.2);transition:var(--tr);
  background:var(--grad-dark);display:grid;place-items:center;color:#fff;
  font-size:.9rem;pointer-events:auto;flex-shrink:0;
}
.lightbox-thumbs .lt img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox-thumbs .lt.active{border-color:var(--primary);transform:scale(1.1)}
.lightbox-thumbs .lt:hover{border-color:rgba(255,255,255,.5)}
.lightbox-caption{
  position:absolute;top:1.4rem;left:1.4rem;color:#fff;
  font-size:.9rem;font-weight:600;z-index:10;
  background:rgba(0,0,0,.45);padding:.45rem 1rem;border-radius:30px;
  display:flex;align-items:center;gap:.5rem;
  backdrop-filter:blur(6px);
}
.lightbox-caption i{color:var(--primary)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:768px){
  .lightbox-stage{padding:60px 12px 90px}
  .lightbox-nav{width:42px;height:42px;font-size:.9rem}
  .lightbox-nav.prev{inset-inline-start:.5rem}
  .lightbox-nav.next{inset-inline-end:.5rem}
  .lightbox-thumbs{max-width:90%}
  .lightbox-thumbs .lt{width:38px;height:38px}
}

/* Project gallery main - clickable cursor */
.project-gallery-main{cursor:zoom-in}
.project-gallery-main .gallery-zoom-btn{cursor:pointer}

/* ---- Pagination ---- */
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:2.5rem;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:40px;height:40px;display:grid;place-items:center;
  padding:0 .8rem;background:#fff;border-radius:var(--radius-sm);
  color:var(--secondary);font-weight:600;
  box-shadow:var(--shadow-sm);transition:var(--tr);font-size:.9rem;
}
.pagination a:hover,.pagination .active{background:var(--primary);color:#fff;transform:translateY(-2px)}

/* ---- Empty state ---- */
.empty-state{
  text-align:center;padding:4rem 1rem;color:var(--muted);
  grid-column:1/-1;
}
.empty-state i{font-size:4rem;color:var(--border);margin-bottom:1rem;display:block}
.empty-state h3{color:var(--muted);font-size:1.2rem;margin-bottom:.5rem}
.empty-state p{color:#94a3b8}

/* ---- Responsive ---- */

@media (max-width: 1024px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .about-grid,.contact-grid,.project-detail-wrap{grid-template-columns:1fr}
  .vision-grid{grid-template-columns:repeat(2,1fr)}
  .project-sidebar{position:static}
  .section-title{font-size:1.8rem}
}

@media (max-width: 768px){
  .top-bar .top-info > *:nth-child(n+2){display:none}
  .top-inner{justify-content:center;gap:.5rem}
  .top-info{font-size:.78rem}
  .top-actions{gap:.6rem}

  .mobile-toggle{display:flex}

  .main-nav{
    position:fixed;top:0;bottom:0;width:300px;
    background:#fff;padding:5.5rem 1rem 2rem;
    box-shadow:5px 0 30px rgba(0,0,0,.15);
    z-index:999;overflow-y:auto;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  body.rtl .main-nav{right:0;left:auto;transform:translateX(100%)}
  body.ltr .main-nav{left:0;right:auto;transform:translateX(-100%)}
  .main-nav.open{transform:translateX(0)!important}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:.15rem}
  .main-nav > ul > li{width:100%}
  .main-nav > ul > li > a{
    padding:.9rem 1rem;border-radius:var(--radius-sm);
    justify-content:space-between;
  }
  .main-nav > ul > li > a::after{display:none}
  .main-nav > ul > li > a.active{background:var(--grad-soft)}

  .dropdown{
    position:static;opacity:1;visibility:visible;
    transform:none;box-shadow:none;
    border:none;background:var(--bg);
    max-height:0;overflow:hidden;padding:0;
    transition:max-height .35s ease, padding .35s ease;
    border-radius:var(--radius-sm);margin-top:.2rem;
  }
  .has-dropdown.open > .dropdown{
    max-height:600px;padding:.5rem;
  }
  .dropdown li a{padding:.7rem .9rem}

  .hero{min-height:80vh}
  .hero h1{font-size:clamp(1.7rem,7vw,2.4rem)}
  .hero-cta{flex-direction:column;width:100%;max-width:300px;margin:0 auto}
  .hero-cta a{width:100%}

  section{padding:0rem 0}
  .page-header{padding:0rem 0 0rem}

  .vision-grid,.footer-grid{grid-template-columns:1fr}
  .products-filter,.projects-filter{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem}
  .products-filter a,.projects-filter a{flex-shrink:0}

  .about-info{padding:0 .5rem}
  .gallery-thumbs{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}

  .form-card{padding:1.3rem}
  .contact-form{padding:1.5rem}

  .header-inner{padding:.7rem 0}
  .logo-icon{width:42px;height:42px;font-size:1.2rem}
  .logo-img{width:50px;height:50px}
  .logo-text strong{font-size:.95rem}
  .logo-text small{font-size:.65rem}
}

@media (max-width: 480px){
  .hero{min-height:75vh}
  .container{width:94%}
  .section-title{font-size:1.5rem}
  .about-experience{padding:.8rem 1rem;bottom:1rem;inset-inline-start:1rem}
  .about-experience .num{font-size:1.7rem}
  .counter-num{font-size:2.2rem}
  .product-thumb,.project-thumb{height:200px}
  .sidebar-body{padding:1.2rem}
  .form-card{padding:1.1rem}
  .whatsapp-float,.back-to-top{width:46px;height:46px;font-size:1.3rem}
  .whatsapp-float{bottom:14px;inset-inline-start:14px}
  .back-to-top{bottom:70px;inset-inline-start:14px}
}

/* ---- Print ---- */
@media print{
  .top-bar,.main-header,.main-footer,.whatsapp-float,.back-to-top,.news-ticker{display:none!important}
  body{background:#fff}
}



/* Products */
.swiper-pagination-bullet{border: 1px solid #1da1f2;}.swiper-pagination-bullet-active{background:#1da1f2}
img:not([draggable]), embed, object {
    max-width: 100%;
    height: auto;
}

.swiper-container {
    margin-left: auto;
    margin-right: auto;
 
    overflow: hidden;
    z-index: 1;
    padding-top: 1rem;
    
}


.swiper-container-no-flexbox .swiper-slide {
    float: left
}
.slider-image{
  transition: all 100ms ease-in;
}
.slider-image:hover{
  transform: translateY(-15px);
}

.swiper-container-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0, 0, 0);
}

.swiper-container-multirow>.swiper-wrapper {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    flex-wrap: wrap
}

.swiper-container-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    /* From https://css.glass */
background: rgba(255, 255, 255, 0.09);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
    height: auto
}

.swiper-container-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-wp8-horizontal {
    touch-action: pan-y
}

.swiper-wp8-vertical {
    touch-action: pan-x
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-container-3d {
    -o-perspective: 1200px;
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
    -ms-perspective: 1200px
}

.swiper-container-cube,
.swiper-container-flip {
    overflow: visible
}

.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
}

.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
    pointer-events: none;
    
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
}

.swiper-container-cube .swiper-slide {
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    filter: blur(50px);
    z-index: 0
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-container-vertical>.swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    animation: swiper-preloader-spin 1s steps(12, end) infinite
}

.swiper-lazy-preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat
}

.swiper-lazy-preloader-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

@-webkit-keyframes swiper-preloader-spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    100% {
        transform: rotate(360deg)
    }
}

.swiper-container.one {
    padding-top: 40px;
    text-align: center;
}

.swiper-container.one .swiper-slide {
    padding: 0 43px;
}

.swiper-container {
    width: 100%;
    padding-bottom: 60px;
}

.swiper-slide img {
    display: block;
    margin: auto;
    width: 100%;
}
.swiper-slide.pro img {
  transform: scale(1.4) !important;
}
.swiper-slide {
    width: 320px;
    height: auto;
    padding: 0 15px;
}
.two .swiper-slide {
    width: 300px;
}
.swiper-slide img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    
}

.swiper-slide .slider-image .preview-icon {
    z-index: -1;
    width: calc(100% - 30px);
    
}

.swiper-slide.swiper-slide-active .slider-image:hover .preview-icon {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    z-index: 1;
    
}

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 0;
}

.swiper-pagination-bullet {
	background: transparent none repeat scroll 0 0;
	border: 1px solid var(--color-primary);
	border-radius: 10px;
	display: inline-block;
	height: 10px;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	width: 26px;
    transition: 0.2s;
}

.swiper-pagination-bullet-active {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #f0573c 0%, #c01d00 100%) repeat scroll 0 0;
    border: medium none;
    height: 12px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    width: 12px;
}

.swiper-slide .slider-image{
  position: relative;
}
.swiper-slide h3 {
  position: absolute;
  width: 60%;
  bottom: 17%;
  left: 50%;
  color: #2679ee !important;
  transform: translate(-50%);
  background: rgba(12, 12, 12, 0.271);
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.23);
}

/* ============================================================
   Groups slider (manual, arrow-controlled, no autoplay)
   - Shows ~3 cards on desktop, ~2 on tablet, 1 on mobile
   - Hides native scrollbar; arrows are the only control
   ============================================================ */
.groups-slider {
  position: relative;
  padding: 0 3.5rem; /* room for arrows */
  margin: 0 auto 0rem;
   
}

.groups-slider .slider-viewport {
  overflow-x: auto;             /* enables scrollBy; scrollbar is hidden below */
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.groups-slider .slider-viewport::-webkit-scrollbar { display: none; height: 0; }

.groups-slider .slider-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.groups-slider .slider-slide {
  flex: 0 0 calc((100% - 3rem) / 4); /* 4 cards on desktop, accounting for 3 gaps of 1.5rem */
  min-width: 25%;
  box-sizing: border-box;
}
.groups-slider .slider-slide > a { display: block; height: 100%; }
.groups-slider .slider-slide .dashboard-card { height: 100%; margin: 0; }

/* Arrows */
.groups-slider .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--primary, #f59e0b);
  color: #fff;
  font-size: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.groups-slider .slider-arrow:hover { background: var(--primary-dark, #d97706); transform: translateY(-50%) scale(1.08); }
.groups-slider .slider-arrow:active { transform: translateY(-50%) scale(0.95); }
.groups-slider .slider-arrow:focus-visible { outline: 3px solid rgba(245, 158, 11, 0.4); outline-offset: 2px; }
.groups-slider .slider-arrow--prev { left: 0.25rem; }
.groups-slider .slider-arrow--next { right: 0.25rem; }

/* Disable hover-translate on cards inside slider (to avoid double motion) */
.groups-slider .dashboard-card:hover { transform: none; }
.groups-slider .dashboard-card:hover i   { transform: none; }

/* Tablet: 2 cards visible */
@media (max-width: 992px) {
  .groups-slider .slider-slide { flex: 0 0 calc((100% - 1.5rem) / 2); }
  .groups-slider { padding: 0 3rem; }
}
/* Mobile: 1 card visible */
@media (max-width: 576px) {
  .groups-slider .slider-slide { flex: 0 0 100%; }
  .groups-slider { padding: 0 2.75rem; }
  .groups-slider .slider-arrow { width: 40px; height: 40px; font-size: 1rem; }
}
.fourth-projects .container{position:relative;z-index:2;padding:4rem 0 6rem}
.fourth-projects .section-title{color:#fff}
.hand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  align-items:start;
  margin-top:2rem;
}
.hand-item{display:flex;flex-direction:column;align-items:center}
.hand-item a{display:block}
.hand-item .project-title{color:#bdbdbd;text-align:center;margin-top:2.5rem;z-index:50;position:relative}

 /*social icon
   ===================================================== */
.fa-facebook{
    display: inline-block;           /* حتى نستطيع التحكم في الحجم */
    width: 32px;                      /* عرض الأيقونة */
    height: 32px;                     /* ارتفاع الأيقونة */
    background-image: url('../img/icons/facebook.png'); /* مسار الصورة */
    background-size: cover;           /* جعل الصورة تغطي المساحة */
    background-position: center;      /* توسيط الصورة */
    background-repeat: no-repeat;     /* منع التكرار */
    text-indent: -9999px;             /* إخفاء أي نص داخل العنصر */
}

.fa-twitter {
    display: inline-block;           /* حتى نستطيع التحكم في الحجم */
    width: 32px;                      /* عرض الأيقونة */
    height: 32px;                     /* ارتفاع الأيقونة */
    background-image: url('../img/icons/twitter.svg'); /* مسار الصورة */
    background-size: cover;           /* جعل الصورة تغطي المساحة */
    background-position: center;      /* توسيط الصورة */
    background-repeat: no-repeat;     /* منع التكرار */
    text-indent: -9999px;             /* إخفاء أي نص داخل العنصر */
}
.fa-instagram {
    display: inline-block;           /* حتى نستطيع التحكم في الحجم */
    width: 32px;                      /* عرض الأيقونة */
    height: 32px;                     /* ارتفاع الأيقونة */
    background-image: url('../img/icons/instagram.svg'); /* مسار الصورة */
    background-size: cover;           /* جعل الصورة تغطي المساحة */
    background-position: center;      /* توسيط الصورة */
    background-repeat: no-repeat;     /* منع التكرار */
    text-indent: -9999px;             /* إخفاء أي نص داخل العنصر */
}
.fa-youtube {
    display: inline-block;           /* حتى نستطيع التحكم في الحجم */
    width: 32px;                      /* عرض الأيقونة */
    height: 32px;                     /* ارتفاع الأيقونة */
    background-image: url('../img/icons/youtube.png'); /* مسار الصورة */
    background-size: cover;           /* جعل الصورة تغطي المساحة */
    background-position: center;      /* توسيط الصورة */
    background-repeat: no-repeat;     /* منع التكرار */
    text-indent: -9999px;             /* إخفاء أي نص داخل العنصر */
}
.fa-whatsapp {
    display: inline-block;           /* حتى نستطيع التحكم في الحجم */
    width: 32px;                      /* عرض الأيقونة */
    height: 32px;                     /* ارتفاع الأيقونة */
    background-image: url('../img/icons/whatsapp.png'); /* مسار الصورة */
    background-size: cover;           /* جعل الصورة تغطي المساحة */
    background-position: center;      /* توسيط الصورة */
    background-repeat: no-repeat;     /* منع التكرار */
    text-indent: -9999px;             /* إخفاء أي نص داخل العنصر */
}




/* ========================Youtube Section============================ */
.youtube-gallery{
  position: relative;
  padding-top: 3%;
  padding-bottom: 4%;
  font-family: 'Almarai', sans-serif;
  background: #00052f; 
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* ثابت 4 أعمدة */
  gap: 16px;
  padding: 0 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 1100px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

.solar-item.gallery{
  /* background-image: url(../img/Colored\ Shapes.svg) !important;
  background-size: cover; */
  /* z-index: 10 !important; */
}

.video-card {
  background-color:rgba(255, 255, 255, 0.28);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease;
  z-index: 20 !important;
}

/* .thumbnail:hover {
  transform: scale(1.02);
} */

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

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
  display: block;
  /* transition: transform 0.2s ease; */
}
/* Play Button Container */
.video-card .play-btn {
  position: absolute;
  background: radial-gradient(#2487ce 50%, rgba(36, 135, 206, 0.4) 52%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
  transition: all .3s ease !important;
}

/* Triangle inside the button */
.video-card .play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #cfcfcf;
  z-index: 3;
  transition: all .6s ease !important;
}

/* Pulsing effect */
.video-card .play-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  animation: pulsate-btn 2s infinite;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0);
  z-index: 2;
}

/* Optional hover effect */
.video-card .play-btn:hover::after {
  border-left-color: #000000;

}





.video-img{
  position: relative;
  overflow: hidden;
}
/* Black overlay */
.video-img .thumbnail-overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 0, 41, 0.3); /* Adjust opacity as needed */
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 1;
}
.video-info {
  padding: 10px;
}

.video-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #fff;
}


.video-meta {
  font-size: 14px;
  color: #aaa;
}

.youtube-btn{
  z-index: 2;
}
.youtube-btn a {
  position: relative;
  z-index: 10;
  width: 130px;
  text-align: center;
  border-radius: 20px;
  border: 2px solid #003dcb;
  transition: all 0.4s;
  transition-delay: 0.1s;
  color: #ffffff;
  margin-bottom: 0.5rem;
  margin: auto;
}

.youtube-btn a:hover{
  box-shadow: 0 0 10px #003dcb,
                0 0 30px #003dcb,
                0 0 60px #003dcb;
    background-color: #003dcb;
}

/* Slider Section */
.video-section{
        flex: 2;
    z-index: 2;
    height: 100%;
}
.video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background-color: #000;
}
.recommendation{
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s;
}
.recommendation img {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
}
.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* background-image: 
  url('../img/pattern2.png'),
  linear-gradient(0deg, rgb(1, 6, 49) 0%, rgba(255,255,255,0) 50%, rgb(1, 6, 49) 100%); */
   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;
  background-repeat: repeat;
  background-size: 4rem;
}


.slider-video video {

  opacity: 0;
  transition: opacity 1s;
}
.slider-video video.active {
  opacity: 1;
}
.containtt{
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 1rem;
    flex: 1;
    /* margin: 1rem 0; */}
.sidebar
 {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 2;
}

/* ============================================================
   Animated shop background for the homepage video-section
   - Multi-layer moving gradient + solar grid + floating panels
   ============================================================ */
.shop-bg{
  position:relative;
  min-height:480px;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  background:
    /* layer 1: warm sun glow */
    radial-gradient(circle at 15% 20%, rgba(251,191,36,.45), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(245,158,11,.35), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(15,23,42,.6), transparent 60%),
    /* layer 2: solar grid pattern */
    repeating-linear-gradient(0deg,    rgba(245,158,11,.18) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg,   rgba(245,158,11,.18) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg,    rgba(59,130,246,.25)  0 2px, transparent 2px 20px),
    repeating-linear-gradient(90deg,   rgba(59,130,246,.25)  0 2px, transparent 2px 20px),
    /* layer 3: shop photo */
    linear-gradient(180deg, rgba(15,23,42,.45) 0%, rgba(15,23,42,.75) 100%),
    url('../img/tais_center.jpg');
  background-size:
    100% 100%, 100% 100%, 100% 100%,
    60px 60px, 60px 60px, 20px 20px, 20px 20px,
    100% 100%, cover;
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, fixed;
  animation: shopBgPan 28s linear infinite alternate;
  color:#fff;
}
@keyframes shopBgPan{
  0%   { background-position: 0%   0%,  100% 0%,  50% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, center; }
  100% { background-position: 5%   10%, 95% 10%,  50%  90%, 60px 60px, 60px 60px, 20px 20px, 20px 20px, 0 0, center; }
}
.shop-bg::before{
  /* sweeping shine band */
  content:'';
  position:absolute; inset:-20%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 48%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.10) 52%, transparent 70%);
  transform: translateX(-60%);
  animation: shopShine 6s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes shopShine{
  0%   { transform: translateX(-60%); }
  60%  { transform: translateX(60%); }
  100% { transform: translateX(60%); }
}
.shop-bg::after{
  /* floating solar panels */
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(135deg, rgba(30,58,138,.55), rgba(15,23,42,.75)),
    linear-gradient(rgba(245,158,11,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,158,11,.5) 1px, transparent 1px);
  background-size: 180px 110px, 22px 22px, 22px 22px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0/180px 110px no-repeat,
    linear-gradient(#000 0 0) 220px 30px/140px 80px no-repeat,
    linear-gradient(#000 0 0) 60% 60%/160px 100px no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0/180px 110px no-repeat,
    linear-gradient(#000 0 0) 220px 30px/140px 80px no-repeat,
    linear-gradient(#000 0 0) 60% 60%/160px 100px no-repeat;
  animation: panelsDrift 18s ease-in-out infinite alternate;
  opacity:.55;
  pointer-events:none;
  z-index:1;
}
@keyframes panelsDrift{
  0%   { transform: translate(0,0); }
  100% { transform: translate(-30px, 20px); }
}
.shop-bg > *{ position:relative; z-index:2; }

.shop-bg .shop-title{
  font-size:clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight:900; text-shadow:0 4px 24px rgba(0,0,0,.55);
  margin:0 0 .4rem;
}
.shop-bg .shop-lead{
  font-size:clamp(.95rem, 1.6vw, 1.1rem);
  max-width:680px; line-height:1.7;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  color:#fef3c7;
}
.shop-bg .shop-actions{ margin-top:1.4rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.shop-bg .shop-actions .btn{ box-shadow:0 8px 24px rgba(0,0,0,.4); }
.shop-bg .shop-content{
  position:absolute;
  inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(1.4rem, 4vw, 3.5rem);
}

/* ============================================================
   Contact section (homepage embedded version) + Map
   ============================================================ */
.contact-section-home{
    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;
  padding: 4.5rem 0;
}
.contact-section-home .contact-grid{ grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: stretch; }
.contact-section-home .contact-map{
  width:100%; min-height:380px; height:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  position:relative;z-index:1;
}
.contact-section-home .contact-map iframe{ width:100%; height:100%; border:0; display:block; }
.contact-section-home .info-card{
  background:var(--card, #fff);
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  color: var(--text);
}
.contact-section-home .info-card h4{ color: var(--secondary); }
.contact-section-home .info-card p{ color: var(--text-soft, var(--muted)); }
@media (max-width: 768px){
  .contact-section-home .contact-grid{ grid-template-columns:1fr; }
  .contact-section-home .contact-map{ min-height:300px; }
  .shop-bg{ min-height:380px; }
}

/* ============================================================
   Global text-contrast safety (final pass)
   ============================================================ */
section.bg-alt, section.bg-alt *{ color: var(--text); }
section.bg-alt .section-title,
section.bg-alt .section-subtitle,
section.bg-alt .info-card h4,
section.bg-alt .info-card p,
section.bg-alt .feature-list li span,
section.bg-alt .vision-card h3,
section.bg-alt .vision-card p,
section.bg-alt .product-card h3,
section.bg-alt .product-card p,
section.bg-alt .product-category,
section.bg-alt .news-card h3,
section.bg-alt .news-card p,
section.bg-alt .news-meta,
section.bg-alt .project-card h3,
section.bg-alt .project-card p,
section.bg-alt .project-tag,
section.bg-alt .about-info h3,
section.bg-alt .about-info p{ color: var(--text); }

/* dark sections: keep all text light by default */
section.hero, section.hero *,
section.counters-section, section.counters-section *,
section.surface-dark, section.surface-dark *,
section.shop-bg, section.shop-bg *,
section.video-section, section.video-section *,
section.map-section, section.map-section *{ color: var(--on-dark); }

.section-title, .section-subtitle{ color: var(--on-dark); }
section.hero .section-title, section.hero .section-subtitle,
section.surface-dark .section-title, section.surface-dark .section-subtitle{ color: var(--on-dark); }

/* ============================================================
   Branches Section (contact page + footer)
   ============================================================ */
.branches-section{ padding: 4rem 0; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.branches-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.6rem;
  max-width: 1100px;
  margin: 0 auto;
}
.branch-card{
  position: relative;
  background: var(--card-bg, #fff);
  border-radius: 18px;
  padding: 1.8rem 1.5rem 1.5rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .04);
  border: 1px solid var(--border, #e2e8f0);
  transition: transform .3s ease, box-shadow .3s ease;
  overflow: hidden;
}
.branch-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(245, 158, 11, .15), 0 0 0 1px rgba(245, 158, 11, .25);
}
.branch-card-main{
  border-color: rgba(245, 158, 11, .35);
  background: linear-gradient(180deg, #fffbeb 0%, #fff 60%);
}
.branch-corner-badge{
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  background: var(--grad, linear-gradient(135deg, #f59e0b, #ea580c));
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .35);
}
.branch-card-head{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.branch-icon{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(245, 158, 11, .15), rgba(37, 99, 235, .12));
  color: var(--primary, #f59e0b);
  font-size: 1.5rem;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .25);
}
.branch-card h3{
  margin: 0 0 .25rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text, #0f172a);
}
.branch-city{
  font-size: .85rem;
  color: var(--text-soft, #64748b);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.branch-city i{ color: var(--primary, #f59e0b); }
.branch-info-list{
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.branch-info-list li{
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--text, #1e293b);
  line-height: 1.5;
}
.branch-info-list i{
  color: var(--primary, #f59e0b);
  margin-top: 3px;
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
}
.branch-info-list strong{ color: var(--secondary, #1e293b); font-weight: 700; }
.branch-info-list a{ color: var(--primary, #f59e0b); text-decoration: none; }
.branch-info-list a:hover{ text-decoration: underline; }
.branch-sub-phone{ color: var(--text-soft, #64748b); font-size: .88rem; }
.branch-card-actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.branch-card-actions .btn{ padding: .55rem 1rem; font-size: .88rem; }

/* Footer branches list (compact) */
.footer-branches{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.footer-branch-item{
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
  padding: .7rem .8rem;
  border-inline-start: 3px solid var(--primary, #f59e0b);
  font-size: .88rem;
  line-height: 1.5;
}
.footer-branch-item .footer-branch-head{
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .35rem;
  color: #fff;
  flex-wrap: wrap;
}
.footer-branch-item .footer-branch-head strong{ font-weight: 700; }
.branch-badge{
  background: var(--primary, #f59e0b);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: 999px;
  margin-inline-start: .3rem;
}
.footer-branch-sub{
  color: rgba(255, 255, 255, .7);
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.footer-branch-sub i{
  color: var(--primary, #f59e0b);
  width: 14px;
  text-align: center;
  flex: 0 0 14px;
}
.footer-branch-sub a{ color: rgba(255, 255, 255, .9); text-decoration: none; }
.footer-branch-sub a:hover{ color: var(--primary, #f59e0b); }
.footer-sales-contact{
  margin-top: 1rem;
  padding: .8rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, .15), rgba(37, 99, 235, .1));
  border-radius: 10px;
  font-size: .85rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  border: 1px solid rgba(245, 158, 11, .25);
}
.footer-sales-contact i{ color: var(--primary, #f59e0b); margin-inline-end: .3rem; }
.footer-sales-contact a{ color: #fff; text-decoration: none; }
.footer-sales-contact a:hover{ color: var(--primary, #f59e0b); }
.sales-wa{ color: #25D366 !important; font-weight: 700; }

@media (max-width: 768px){
  .hero-content{ padding: 2rem .8rem; }
  .hero-panels-strip{ height: 16px; top: -16px; }
  .branches-grid{ grid-template-columns: 1fr; }
  .branch-card{ padding: 1.4rem 1.2rem; }
  .branch-corner-badge{ top: 10px; inset-inline-end: 10px; }
}

.hero h1 span{ color: transparent; }   /* keep gradient effect */
/* ============================================================
   AI Assistant styles (added v3.7)
   ============================================================ */
.ai-bubble{position:fixed;bottom:24px;inset-inline-end:24px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));box-shadow:0 8px 32px rgba(245,158,11,.4),0 2px 8px rgba(0,0,0,.2);cursor:pointer;z-index:9998;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,box-shadow .3s ease;border:3px solid #fff;overflow:hidden}
.ai-bubble:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 12px 40px rgba(245,158,11,.55),0 4px 12px rgba(0,0,0,.25)}
.ai-bubble img{width:100%;height:100%;object-fit:cover;display:block}
.ai-bubble-badge{position:absolute;top:-4px;inset-inline-end:-4px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);animation:ai-pulse-badge 2s ease-in-out infinite}
@keyframes ai-pulse-badge{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.ai-panel{position:fixed;bottom:96px;inset-inline-end:24px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 130px);background:var(--card,#fff);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.1);z-index:9999;display:none;flex-direction:column;overflow:hidden;border:1px solid var(--border,#e2e8f0);animation:ai-slideUp .35s cubic-bezier(.16,1,.3,1)}
.ai-panel.open{display:flex}
@keyframes ai-slideUp{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.ai-header{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem;border-bottom:1px solid rgba(0,0,0,.08)}
.ai-avatar{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:2px solid rgba(255,255,255,.5)}
.ai-avatar img{width:100%;height:100%;object-fit:cover}
.ai-title{flex:1;min-width:0}
.ai-title h3{margin:0;font-size:1.05rem;font-weight:700;line-height:1.2}
.ai-title p{margin:0;font-size:.78rem;opacity:.95;line-height:1.2;display:flex;align-items:center;gap:.4rem}
.ai-online-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:ai-online-pulse 2s infinite}
@keyframes ai-online-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.ai-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .2s}
.ai-close:hover{background:rgba(255,255,255,.3)}
.ai-body{flex:1;overflow-y:auto;padding:1rem;background:var(--bg-soft,#f8fafc);display:flex;flex-direction:column;gap:.8rem}
.ai-body::-webkit-scrollbar{width:6px}
.ai-body::-webkit-scrollbar-track{background:transparent}
.ai-body::-webkit-scrollbar-thumb{background:var(--border,#cbd5e1);border-radius:3px}
.ai-msg{max-width:85%;padding:.7rem 1rem;border-radius:18px;font-size:.92rem;line-height:1.5;word-wrap:break-word;animation:ai-msgIn .3s ease-out}
@keyframes ai-msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ai-msg.bot{background:var(--card,#fff);color:var(--text,#1e293b);border:1px solid var(--border,#e2e8f0);border-bottom-left-radius:6px;align-self:flex-start;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.ai-msg.user{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.ai-msg .study-card{background:rgba(245,158,11,.08);border:1px solid var(--primary);border-radius:12px;padding:.8rem;margin-top:.6rem}
.ai-msg .study-row{display:flex;justify-content:space-between;padding:.25rem 0;font-size:.85rem;border-bottom:1px dashed rgba(245,158,11,.2)}
.ai-msg .study-row:last-child{border-bottom:none}
.ai-msg .study-row strong{color:var(--primary)}
.ai-msg ul{margin:.5rem 0;padding-inline-start:1.5rem}
.ai-msg ul li{margin:.25rem 0}
.ai-typing{display:flex;gap:.3rem;padding:.7rem 1rem;background:var(--card,#fff);border-radius:18px;border-bottom-left-radius:6px;align-self:flex-start;border:1px solid var(--border,#e2e8f0)}
.ai-typing span{width:8px;height:8px;background:var(--primary);border-radius:50%;animation:ai-typing 1.4s infinite}
.ai-typing span:nth-child(2){animation-delay:.2s}
.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes ai-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-8px);opacity:1}}
.ai-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 .8rem .8rem;background:var(--bg-soft,#f8fafc)}
.ai-quick-btn{background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);color:var(--text);padding:.4rem .8rem;border-radius:14px;font-size:.78rem;cursor:pointer;transition:all .2s}
.ai-quick-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px)}
.ai-input{padding:.8rem;border-top:1px solid var(--border,#e2e8f0);background:var(--card,#fff);display:flex;gap:.5rem;align-items:flex-end}
.ai-input textarea{flex:1;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;font-size:.9rem;font-family:inherit;resize:none;max-height:80px;background:var(--bg-soft,#f8fafc);color:var(--text)}
.ai-input textarea:focus{outline:none;border-color:var(--primary);background:#fff}
.ai-send{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .2s;flex-shrink:0}
.ai-send:hover{transform:scale(1.08)}
.ai-send:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:480px){.ai-panel{width:calc(100vw - 24px);inset-inline-end:12px;bottom:88px;height:calc(100vh - 110px)}.ai-bubble{width:54px;height:54px;bottom:16px;inset-inline-end:16px}}

/* ============================================================
   Section divider (animated gradient + glow between sections)
   ============================================================ */
section + section{position:relative}
section + section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(720px,90%);height:2px;background:linear-gradient(90deg,transparent 0%,var(--primary) 15%,var(--primary-light) 30%,#fff 50%,var(--primary-light) 70%,var(--primary) 85%,transparent 100%);background-size:200% 100%;opacity:.75;animation:sectionGlowShift 3s linear infinite,sectionGlowPulse 2.4s ease-in-out infinite;pointer-events:none;z-index:3;box-shadow:0 0 12px rgba(245,158,11,.6),0 0 3px rgba(251,191,36,.95)}
section + section::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(420px,65%);height:20px;background:radial-gradient(ellipse at center,rgba(251,191,36,.55) 0%,rgba(245,158,11,.3) 35%,transparent 75%);pointer-events:none;z-index:2;animation:sectionGlowPulse 2.4s ease-in-out infinite}
@keyframes sectionGlowShift{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes sectionGlowPulse{0%,100%{opacity:.4}50%{opacity:1}}
section.hero + section::before,section.hero + section::after{display:none}
@media(max-width:768px){section + section::before{width:94%}section + section::after{width:80%;height:14px}}

/* ============================================================
   Solar panel section text contrast
   ============================================================ */
section.solar-panel-bg,section.solar-panel-bg-soft,section.solar-panel-bg-hex{position:relative;color:#e2e8f0}
section.solar-panel-bg h1,section.solar-panel-bg h2,section.solar-panel-bg h3,section.solar-panel-bg-soft h1,section.solar-panel-bg-soft h2,section.solar-panel-bg-soft h3,section.solar-panel-bg-hex h1,section.solar-panel-bg-hex h2,section.solar-panel-bg-hex h4{color:#fff !important}
section.solar-panel-bg p,section.solar-panel-bg-soft p,section.solar-panel-bg-hex p{color:#cbd5e1}
section.solar-panel-bg .section-subtitle,section.solar-panel-bg-soft .section-subtitle,section.solar-panel-bg-hex .section-subtitle{color:#cbd5e1 !important}
section.solar-panel-bg-soft{background-color:var(--bg-alt,#f8fafc);color:var(--text)}
section.solar-panel-bg-soft h1,section.solar-panel-bg-soft h2,section.solar-panel-bg-soft h3{color:var(--secondary) !important}
section.solar-panel-bg-soft p,section.solar-panel-bg-soft .section-subtitle{color:var(--text-soft) !important}

/* ============================================================
   Services Page
   ============================================================ */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;padding:2rem 0}
.service-card{background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:16px;padding:2rem 1.5rem;text-align:center;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;cursor:pointer;opacity:0;animation:cardFadeIn .6s ease-out forwards;animation-delay:var(--delay,0s)}
@keyframes cardFadeIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.service-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--primary));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,.12),0 4px 12px rgba(245,158,11,.15);border-color:var(--primary)}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{width:80px;height:80px;margin:0 auto 1.2rem;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#fff;box-shadow:0 8px 20px rgba(245,158,11,.3);transition:transform .35s}
.service-card:hover .service-icon{transform:scale(1.08) rotate(8deg)}
.service-card h3{color:var(--secondary);margin:0 0 .8rem;font-size:1.3rem;font-weight:700}
.service-card p{color:var(--text-soft);line-height:1.6;margin:0 0 1.2rem;font-size:.95rem}
.service-card .btn-link{color:var(--primary);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:gap .25s}
.service-card .btn-link:hover{gap:.7rem}
.service-no-details{background:transparent;border:none;box-shadow:none;padding:0}
.service-no-details-box{background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:2px dashed rgba(245,158,11,.45);border-radius:18px;padding:2.5rem 2rem;text-align:center;color:#7c2d12;box-shadow:0 4px 14px rgba(245,158,11,.08)}
.service-no-details-box i{font-size:3rem;color:var(--primary);margin-bottom:1rem;display:block}
.service-no-details-box h3{color:#7c2d12;margin:0 0 .8rem;font-size:1.4rem}
.service-no-details-box p{color:#92400e;margin:0 0 1.5rem;line-height:1.6}
.service-section{padding:2rem 0;border-bottom:1px solid var(--border,#e2e8f0)}
.service-section:last-child{border-bottom:none}
.service-section-title{color:var(--secondary);font-size:1.4rem;font-weight:700;margin:0 0 1.2rem;display:flex;align-items:center;gap:.6rem}
.service-section-title i{color:var(--primary);font-size:1.2rem}
.service-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.service-feature-card{background:var(--bg-soft,#f8fafc);border:1px solid var(--border);border-radius:12px;padding:1.2rem;transition:all .3s;position:relative}
.service-feature-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:var(--primary)}
.service-feature-card h4{margin:0 0 .5rem;color:var(--secondary);font-size:1.05rem}
.service-feature-card p{margin:0;color:var(--text-soft);font-size:.9rem;line-height:1.5}
.service-feature-card .badge-type{display:inline-block;padding:.2rem .6rem;border-radius:8px;font-size:.7rem;font-weight:600;background:var(--primary);color:#fff;margin-bottom:.5rem}
.service-feature-card .badge-type.benefit{background:#22c55e}
.service-feature-card .badge-type.feature{background:#3b82f6}
.service-cta{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;padding:2rem;border-radius:16px;text-align:center;margin:2rem 0;box-shadow:0 8px 24px rgba(245,158,11,.25)}
.service-cta h3{color:#fff;margin:0 0 .8rem;font-size:1.5rem}
.service-cta p{color:rgba(255,255,255,.95);margin:0 0 1.5rem;font-size:1.05rem;line-height:1.6}
.service-cta .btn{background:#fff;color:var(--primary);font-weight:700;padding:.8rem 2rem;border-radius:30px;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s}
.service-cta .btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15)}

/* ============================================================
   Quote Form
   ============================================================ */
.quote-form-wrap{max-width:720px;margin:0 auto;background:var(--card,#fff);border-radius:20px;padding:2.5rem;box-shadow:0 8px 32px rgba(0,0,0,.08);border:1px solid var(--border)}
.quote-form-header{text-align:center;margin-bottom:2rem}
.quote-form-header h2{color:var(--secondary);font-size:1.8rem;margin:0 0 .5rem}
.quote-form-header p{color:var(--text-soft);margin:0}
.quote-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.quote-form-grid .full{grid-column:1/-1}
.quote-form label{display:block;margin-bottom:.4rem;color:var(--text);font-weight:600;font-size:.9rem}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--border);border-radius:10px;font-size:.95rem;font-family:inherit;background:var(--bg-soft,#f8fafc);color:var(--text);transition:all .25s}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.quote-form textarea{resize:vertical;min-height:80px}
.quote-form-submit{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;padding:1rem 2.5rem;border-radius:30px;font-size:1.05rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;transition:all .3s;box-shadow:0 4px 12px rgba(245,158,11,.3);margin-top:1rem}
.quote-form-submit:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(245,158,11,.4)}
.quote-form-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.quote-summary{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1px solid var(--primary);border-radius:14px;padding:1.2rem;margin-bottom:1.5rem}
.quote-summary h4{color:var(--secondary);margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem}
.quote-summary-row{display:flex;justify-content:space-between;padding:.3rem 0;font-size:.9rem;color:#7c2d12}
.quote-summary-row strong{color:var(--primary)}
.quote-success{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:2px solid #22c55e;border-radius:14px;padding:2rem;text-align:center;color:#166534;margin:1.5rem 0}
.quote-success i{font-size:3rem;color:#22c55e;margin-bottom:1rem;display:block}
.quote-success h3{color:#166534;margin:0 0 .8rem}
.quote-ref{background:rgba(34,197,94,.15);padding:.5rem 1rem;border-radius:8px;display:inline-block;font-family:monospace;font-weight:700;margin-top:.8rem}
@media(max-width:640px){.quote-form-grid{grid-template-columns:1fr}.quote-form-wrap{padding:1.5rem}}

/* ============================================================
   Admin styles for services / branches / quote_requests
   ============================================================ */
.admin-table{width:100%;background:var(--card);border-radius:12px;overflow:hidden;border:1px solid var(--border);border-collapse:collapse}
.admin-table th{background:var(--bg-soft);color:var(--secondary);font-weight:700;padding:1rem;text-align:start;border-bottom:2px solid var(--border);font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}
.admin-table td{padding:1rem;border-bottom:1px solid var(--border);color:var(--text);font-size:.92rem}
.admin-table tr:hover{background:var(--bg-soft)}
.admin-table tr:last-child td{border-bottom:none}
.admin-status{display:inline-block;padding:.3rem .8rem;border-radius:12px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.admin-status.new{background:#dbeafe;color:#1e40af}
.admin-status.contacted{background:#fef3c7;color:#92400e}
.admin-status.qualified{background:#e0e7ff;color:#3730a3}
.admin-status.closed{background:#d1fae5;color:#065f46}
.admin-status.rejected{background:#fee2e2;color:#991b1b}
.admin-form-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem}
.admin-form-card h3{color:var(--secondary);margin:0 0 1rem;font-size:1.2rem}
.admin-detail-list{display:flex;flex-direction:column;gap:.8rem}
.admin-detail-item{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:1rem;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}
.admin-detail-item .detail-num{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.admin-detail-item .detail-info h4{margin:0 0 .3rem;color:var(--secondary);font-size:1rem}
.admin-detail-item .detail-info p{margin:0;color:var(--text-soft);font-size:.85rem}
.admin-detail-actions{display:flex;gap:.4rem}
.admin-detail-actions button{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.admin-detail-actions .edit{background:#3b82f6;color:#fff}
.admin-detail-actions .delete{background:#ef4444;color:#fff}
.admin-detail-actions button:hover{transform:scale(1.1)}


/* ============================================================
   Section dark BG — keep cards readable
   All .service-card, .product-card, etc. inside solar-dark
   sections must keep white background and dark text
   ============================================================ */
section .service-card,
section .product-card,
section .project-card,
section .news-card,
section .vision-card,
section .info-card,
section .feature-card,
section .branch-card,
section .testimonial-card,
section .team-card,
section .stat-card,
section .value-card,
section .benefit-card,
section .quote-card,
section .post-card{
  background:var(--card, #fff) !important;
  color:var(--text) !important;
  border:1px solid var(--border, #e2e8f0);
}
section .service-card *,
section .product-card *,
section .project-card *,
section .news-card *,
section .vision-card *,
section .info-card *,
section .feature-card *,
section .branch-card *,
section .testimonial-card *,
section .team-card *,
section .stat-card *,
section .value-card *,
section .benefit-card *,
section .quote-card *,
section .post-card *{
  color:inherit;
}
section .service-card h3,
section .product-card h3,
section .project-card h3,
section .news-card h3,
section .vision-card h3,
section .info-card h3, section .info-card h4,
section .feature-card h3, section .feature-card h4,
section .branch-card h3,
section .testimonial-card h3,
section .team-card h3,
section .stat-card h3,
section .value-card h3,
section .benefit-card h3,
section .quote-card h3,
section .post-card h3{
  color:var(--secondary) !important;
}
section .service-card p,
section .product-card p,
section .project-card p,
section .news-card p,
section .vision-card p,
section .info-card p,
section .feature-card p,
section .branch-card p,
section .testimonial-card p,
section .team-card p,
section .stat-card p,
section .value-card p,
section .benefit-card p,
section .quote-card p,
section .post-card p{
  color:var(--text-soft, #64748b) !important;
}

/* Section dark BG — make form/button text visible */
section form label{ color:#fff !important; }
section form .form-text,
section form .help-block{ color:#cbd5e1 !important; }

/* Service detail page sections stay readable */
section .service-no-details-box{
  background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%) !important;
  color:#7c2d12 !important;
}
section .service-no-details-box h3{ color:#7c2d12 !important; }
section .service-no-details-box p{ color:#92400e !important; }