/* ============================================================
   KAZAA — Main Stylesheet  (kazaa.css)
   Compatible with Laravel Blade / @yield / @section
   All colours via CSS variables — override in your layout
   ============================================================ */

/* ── 0. GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Tajawal:wght@400;700;900&display=swap');

/* ── 1. RESET & TOKENS ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  { font-family:'Cairo',sans-serif; color:var(--text); background:#fff; overflow-x:hidden; }
img   { max-width:100%; display:block; }
a     { text-decoration:none; color:inherit; }
button{ cursor:pointer; font-family:'Cairo',sans-serif; }
ul    { list-style:none; }
textarea { resize:vertical; }

:root {
  --blue:       #1a7fd4;
  --blue-dark:  #0d5fa3;
  --blue-deeper:#0a3d6b;
  --blue-black: #061e35;
  --blue-light: #e8f4fd;
  --blue-mid:   #4a9ee0;
  --blue-pale:  #b8d9f5;
  --gray:       #f5f7fa;
  --text:       #1a2332;
  --text-muted: #6b7c93;
  --border:     #e8edf2;
  --green:      #27ae60;
  --orange:     #f39c12;
  --red:        #e74c3c;
}

/* ── 2. TOPBAR ── */
.topbar {
  background:var(--blue-black);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:.55rem 3rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:rgba(255,255,255,.55);
  position:relative; z-index:1001;
}
.topbar-right{ display:flex; align-items:center; gap:1.5rem; }
.topbar-item { display:flex; align-items:center; gap:6px; }
.topbar-item svg { width:14px; height:14px; fill:var(--blue-mid); }
.topbar-item a { color:rgba(255,255,255,.55); transition:color .2s; }
.topbar-item a:hover { color:var(--blue-mid); }
.topbar-left{ display:flex; align-items:center; gap:1.5rem; }
.topbar-iso {
  display:flex; align-items:center; gap:6px;
  background:rgba(26,127,212,.12); border:1px solid rgba(26,127,212,.25);
  padding:3px 10px; border-radius:50px; font-size:11px; color:var(--blue-pale); font-weight:700;
}
.topbar-iso svg { width:13px; height:13px; fill:var(--blue-mid); }
.topbar-branch {
  display:flex; align-items:center; gap:6px; cursor:pointer;
  transition:color .2s;
}
.topbar-branch:hover { color:var(--blue-pale); }
.topbar-branch svg { width:13px; height:13px; fill:var(--blue-mid); }

/* ── 3. NAVBAR ── */
.navbar {
  position:fixed; top:36px; left:0; right:0; z-index:1000;
  padding:0 3rem; height:68px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(6,30,53,0); transition:all .4s;
}
.navbar.scrolled {
  top:0;
  background:rgba(6,30,53,.97);
  backdrop-filter:blur(20px);
  box-shadow:0 4px 30px rgba(0,0,0,.3);
  height:64px;
}
.navbar.solid { background:var(--blue-black); position:sticky; top:0; }
.nav-logo img { height:44px; filter:brightness(0) invert(1); }
.nav-links { display:flex; gap:2rem; }
.nav-links a { color:rgba(255,255,255,.8); font-size:14px; font-weight:600; position:relative; transition:color .2s; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; right:0; width:0; height:2px; background:var(--blue-mid); transition:width .3s; }
.nav-links a:hover,.nav-links a.active { color:#fff; }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-cart {
  position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#fff; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s;
}
.nav-cart:hover { background:var(--blue); }
.nav-cart svg { width:20px; height:20px; fill:#fff; }
.cart-count {
  position:absolute; top:-6px; right:-6px;
  background:var(--blue); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.nav-cta {
  background:var(--blue); color:#fff; padding:10px 22px;
  border-radius:50px; font-size:13px; font-weight:700; border:none; transition:all .3s;
}
.nav-cta:hover { background:var(--blue-dark); transform:translateY(-1px); }
.nav-maintenance-btn {
  background:rgba(243,156,18,.15); border:1px solid rgba(243,156,18,.4);
  color:#f39c12; padding:9px 18px; border-radius:50px;
  font-size:13px; font-weight:700; display:flex; align-items:center; gap:7px; transition:all .3s;
}
.nav-maintenance-btn:hover { background:var(--orange); color:#fff; }
.nav-maintenance-btn svg { width:15px; height:15px; fill:currentColor; }

/* ── 4. MOBILE MENU ── */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; cursor:pointer; z-index:1001; }
.hamburger span { display:block; width:26px; height:2.5px; background:#fff; border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
.mobile-menu {
  display:none; position:fixed; top:0; right:0; left:0; bottom:0;
  background:#061e35; z-index:1000; padding:80px 1.5rem 2rem;
  flex-direction:column; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94); overflow-y:auto;
}
.mobile-menu.open { transform:translateX(0); }
.mobile-menu a { display:block; color:rgba(255,255,255,.85); font-size:17px; font-weight:700; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mob-cta { margin-top:1.5rem; background:var(--blue)!important; color:#fff!important; text-align:center; padding:14px!important; border-radius:12px!important; border-bottom:none!important; }
.mob-maintenance {
  display:flex; align-items:center; gap:8px;
  background:rgba(243,156,18,.15); border:1px solid rgba(243,156,18,.3);
  color:#f39c12!important; border-radius:12px!important; justify-content:center;
  padding:12px!important; margin-top:.5rem; border-bottom:none!important;
}

/* ── 5. BREADCRUMB ── */
.breadcrumb { background:#fff; padding:1rem 3rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.breadcrumb a { color:var(--blue); }

/* ── 6. HERO ── */
.hero { height:100vh; min-height:680px; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); transition:transform 8s ease; }
.hero-bg.loaded { transform:scale(1); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(110deg,rgba(6,30,53,.93) 0%,rgba(10,61,107,.75) 55%,rgba(6,30,53,.2) 100%); }
.hero-content { position:relative; z-index:2; padding:0 3rem; max-width:660px; animation:heroIn .9s ease both; }
@keyframes heroIn { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(26,127,212,.2); border:1px solid rgba(26,127,212,.5);
  color:var(--blue-pale); font-size:13px; font-weight:600; padding:8px 20px; border-radius:50px; margin-bottom:1.5rem;
}
.hero-badge::before { content:''; width:8px; height:8px; background:var(--blue-mid); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.hero h1 { font-family:'Tajawal',sans-serif; font-size:56px; font-weight:900; color:#fff; line-height:1.15; margin-bottom:1.2rem; }
.hero h1 .accent { color:var(--blue-mid); display:block; }
.hero p { font-size:17px; color:rgba(255,255,255,.75); line-height:1.8; margin-bottom:2rem; max-width:520px; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.btn-main {
  background:var(--blue); color:#fff; padding:13px 32px; border-radius:50px;
  font-size:15px; font-weight:700; border:none; transition:all .3s;
  box-shadow:0 6px 30px rgba(26,127,212,.4);
}
.btn-main:hover { background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 10px 40px rgba(26,127,212,.5); }
.btn-outline { background:transparent; color:#fff; padding:13px 32px; border-radius:50px; font-size:15px; font-weight:700; border:2px solid rgba(255,255,255,.4); transition:all .3s; }
.btn-outline:hover { border-color:var(--blue-mid); background:rgba(26,127,212,.1); }

/* Maintenance CTA in hero */
.hero-maintenance-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(243,156,18,.12); border:1.5px solid rgba(243,156,18,.45);
  color:#f5c842; padding:12px 28px; border-radius:50px;
  font-size:15px; font-weight:700; transition:all .3s;
  box-shadow:0 4px 20px rgba(243,156,18,.2);
}
.hero-maintenance-btn:hover { background:var(--orange); color:#fff; box-shadow:0 8px 30px rgba(243,156,18,.4); transform:translateY(-2px); }
.hero-maintenance-btn svg { width:18px; height:18px; fill:currentColor; }

/* Technician image area */
.hero-technician-wrap {
  position:absolute; left:5%; bottom:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; pointer-events:none;
}
.hero-technician-img {
  width:340px; max-width:32vw; display:block;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.5));
  animation:techFloat 3.5s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes techFloat {
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-14px) rotate(.4deg)}
  60%{transform:translateY(-8px) rotate(-.3deg)}
}

/* Stats bar under technician */
.hero-stats-under {
  display:flex; gap:0; background:rgba(6,30,53,.85);
  backdrop-filter:blur(12px); border:1px solid rgba(26,127,212,.25);
  border-radius:14px; padding:12px 10px; width:100%; justify-content:space-around;
  pointer-events:auto;
}
.hero-stats-under .stat-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 12px; border-left:1px solid rgba(255,255,255,.08); }
.hero-stats-under .stat-item:last-child { border-left:none; }
.stat-num { font-family:'Tajawal',sans-serif; font-size:26px; font-weight:900; color:var(--blue-mid); display:block; }
.stat-lbl { font-size:11px; color:rgba(255,255,255,.55); margin-top:1px; }

.hero-scroll { position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:7px; color:rgba(255,255,255,.45); font-size:11px; animation:bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
.scroll-arrow { width:28px; height:28px; border:1.5px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ── 7. MAINTENANCE CTA BANNER ── */
.maintenance-banner {
  background:linear-gradient(135deg,#f39c12 0%,#e67e22 100%);
  padding:2rem 3rem; position:relative; overflow:hidden;
}
.maintenance-banner::before {
  content:''; position:absolute; right:-60px; top:-60px;
  width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08);
}
.maintenance-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; position:relative; z-index:1; flex-wrap:wrap; }
.mb-text h3 { font-family:'Tajawal',sans-serif; font-size:26px; font-weight:900; color:#fff; margin-bottom:.4rem; }
.mb-text p  { font-size:14px; color:rgba(255,255,255,.85); }
.mb-features { display:flex; gap:1.5rem; flex-wrap:wrap; }
.mb-feature { display:flex; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.9); font-weight:600; }
.mb-feature svg { width:16px; height:16px; fill:#fff; }
.mb-btn {
  background:#fff; color:#e67e22; padding:13px 30px; border-radius:50px;
  font-size:15px; font-weight:700; border:none; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.15); transition:all .3s; flex-shrink:0; white-space:nowrap;
}
.mb-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.25); }

/* ── 8. SHOWCASE / PROJECTS SLIDER ── */
.showcase-section { padding:5rem 0; background:var(--blue-black); overflow:hidden; }
.showcase-header { padding:0 3rem; margin-bottom:2.5rem; }
.showcase-track-wrapper { position:relative; overflow:hidden; }
.showcase-track { display:flex; gap:20px; padding:0 3rem; transition:transform .6s cubic-bezier(.25,.46,.45,.94); }
.showcase-card { flex:0 0 500px; height:300px; border-radius:20px; overflow:hidden; position:relative; cursor:pointer; transition:transform .4s; }
.showcase-card:hover { transform:scale(1.02); }
.showcase-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.showcase-card:hover img { transform:scale(1.08); }
.showcase-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,30,53,.9) 0%,transparent 60%); padding:1.5rem; display:flex; align-items:flex-end; }
.showcase-card-text h3 { color:#fff; font-size:17px; font-weight:700; margin-bottom:4px; }
.showcase-card-text p  { color:rgba(255,255,255,.6); font-size:13px; }
.showcase-controls { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2rem; }
.showcase-btn { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:18px; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; }
.showcase-btn:hover { background:var(--blue); border-color:var(--blue); }
.showcase-dots { display:flex; gap:8px; }
.showcase-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer; transition:all .3s; }
.showcase-dot.active { background:var(--blue); width:24px; border-radius:4px; }

/* ── 9. OUR WORKS (من أعمالنا) ── */
.works-section { padding:5rem 3rem; background:#fff; }
.works-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:14px; margin-top:2.5rem;
}
.work-item {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:1.2rem .8rem; border-radius:16px; border:1.5px solid var(--border);
  cursor:pointer; transition:all .35s; text-align:center; background:#fff;
}
.work-item:hover { background:var(--blue-light); border-color:var(--blue-pale); transform:translateY(-4px); box-shadow:0 14px 40px rgba(26,127,212,.1); }
.work-icon { width:52px; height:52px; background:var(--blue-light); border-radius:14px; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.work-item:hover .work-icon { background:var(--blue); }
.work-icon svg { width:26px; height:26px; fill:var(--blue); transition:fill .3s; }
.work-item:hover .work-icon svg { fill:#fff; }
.work-label { font-size:12px; font-weight:700; color:var(--text); line-height:1.3; }

/* ── 10. SECTIONS SHARED ── */
.section { padding:5rem 3rem; }
.section-dark { background:var(--blue-black); }
.section-gray { background:var(--gray); }
.section-label { font-size:12px; font-weight:700; color:var(--blue); letter-spacing:3px; text-transform:uppercase; margin-bottom:.6rem; display:flex; align-items:center; gap:10px; }
.section-label::before { content:''; width:30px; height:2px; background:var(--blue); display:inline-block; }
.section-label.light { color:var(--blue-mid); }
.section-label.light::before { background:var(--blue-mid); }
.section-title { font-family:'Tajawal',sans-serif; font-size:38px; font-weight:900; color:var(--text); margin-bottom:.8rem; line-height:1.2; }
.section-title.white { color:#fff; }
.section-sub { font-size:16px; color:var(--text-muted); line-height:1.7; max-width:580px; }
.section-sub.white { color:rgba(255,255,255,.6); }
.section-head { margin-bottom:3rem; }
.btn-ghost { background:transparent; border:1.5px solid var(--border); padding:9px 20px; border-radius:50px; font-size:14px; font-weight:600; color:var(--text-muted); transition:all .3s; }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue); }

/* ── 11. SERVICES ── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.service-card { background:#fff; border:1px solid var(--border); border-radius:20px; padding:2.2rem; transition:all .4s; position:relative; overflow:hidden; cursor:pointer; }
.service-card::before { content:''; position:absolute; top:0; right:0; width:0; height:3px; background:var(--blue); transition:width .4s; }
.service-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(26,127,212,.1); border-color:var(--blue-pale); }
.service-card:hover::before { width:100%; }
.service-icon { width:56px; height:56px; background:var(--blue-light); border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; transition:all .3s; }
.service-card:hover .service-icon { background:var(--blue); }
.service-icon svg { width:26px; height:26px; fill:var(--blue); transition:fill .3s; }
.service-card:hover .service-icon svg { fill:#fff; }
.service-card h3 { font-size:18px; font-weight:700; margin-bottom:.5rem; }
.service-card p { font-size:14px; color:var(--text-muted); line-height:1.7; }
.service-link { display:inline-flex; align-items:center; gap:4px; margin-top:1rem; font-size:13px; font-weight:700; color:var(--blue); transition:gap .3s; }
.service-link:hover { gap:10px; }

/* ── 12. WHY KAZAA ── */
.why-section { padding:5rem 3rem; background:var(--gray); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why-card {
  background:#fff; border-radius:20px; border:1px solid var(--border);
  padding:2rem; display:flex; flex-direction:column; gap:1rem;
  transition:all .4s; position:relative; overflow:hidden;
}
.why-card::after { content:''; position:absolute; bottom:0; right:0; width:80px; height:80px; background:radial-gradient(circle,rgba(26,127,212,.07),transparent 70%); }
.why-card:hover { transform:translateY(-5px); box-shadow:0 18px 50px rgba(26,127,212,.1); border-color:var(--blue-pale); }
.why-icon { width:60px; height:60px; background:var(--blue-light); border-radius:16px; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.why-card:hover .why-icon { background:var(--blue); }
.why-icon svg { width:28px; height:28px; fill:var(--blue); transition:fill .3s; }
.why-card:hover .why-icon svg { fill:#fff; }
.why-card h3 { font-size:17px; font-weight:700; color:var(--text); }
.why-card p { font-size:14px; color:var(--text-muted); line-height:1.7; }
.why-tag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--green); background:rgba(39,174,96,.1); padding:4px 12px; border-radius:50px; }
.why-tag svg { width:12px; height:12px; fill:var(--green); }

/* ── 13. PRODUCTS ── */
.products-section { background:var(--gray); }
.filter-tabs { display:flex; gap:10px; margin-bottom:2rem; flex-wrap:wrap; }
.filter-tab { padding:9px 22px; border-radius:50px; font-size:14px; font-weight:600; cursor:pointer; border:1.5px solid var(--border); color:var(--text-muted); background:#fff; transition:all .3s; }
.filter-tab.active,.filter-tab:hover { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 4px 20px rgba(26,127,212,.3); }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card { background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--border); transition:all .4s; cursor:pointer; position:relative; }
.product-card:hover { transform:translateY(-5px); box-shadow:0 20px 60px rgba(26,127,212,.12); border-color:var(--blue-pale); }
.product-img-area { height:200px; background:var(--blue-black); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.product-img-area img { width:100%; height:100%; object-fit:cover; }
.product-icon { width:80px; height:80px; background:rgba(26,127,212,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.product-icon svg { width:40px; height:40px; fill:var(--blue-mid); }
.product-badge-wrap { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.p-badge { font-size:11px; padding:3px 12px; border-radius:50px; font-weight:700; }
.p-badge.new  { background:var(--blue);  color:#fff; }
.p-badge.sale { background:var(--red);   color:#fff; }
.p-badge.best { background:var(--orange);color:#fff; }
.p-badge.eco  { background:var(--green); color:#fff; }
.wishlist-btn { position:absolute; bottom:12px; left:12px; width:34px; height:34px; background:rgba(255,255,255,.9); border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; transition:all .3s; }
.wishlist-btn svg { width:17px; height:17px; fill:var(--text-muted); }
.wishlist-btn:hover,.wishlist-btn.active { background:var(--blue); }
.wishlist-btn:hover svg,.wishlist-btn.active svg { fill:#fff; }
.product-info { padding:1.2rem; }
.product-brand { font-size:11px; font-weight:700; color:var(--blue); letter-spacing:1px; text-transform:uppercase; margin-bottom:3px; }
.product-name { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; line-height:1.3; }
.product-specs { font-size:12px; color:var(--text-muted); margin-bottom:.8rem; }
.product-price-row { display:flex; align-items:center; justify-content:space-between; }
.product-price { font-family:'Tajawal',sans-serif; font-size:20px; font-weight:900; color:var(--blue-dark); }
.product-old-price { font-size:12px; color:#aaa; text-decoration:line-through; margin-bottom:2px; }
.product-rating { font-size:12px; color:var(--orange); margin-top:3px; }
.add-btn { width:36px; height:36px; background:var(--blue-light); border:none; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.add-btn svg { width:18px; height:18px; fill:var(--blue); }
.add-btn:hover { background:var(--blue); }
.add-btn:hover svg { fill:#fff; }

/* Product Categories Grid */
.categories-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:2.5rem;
}
.cat-card {
  background:#fff; border-radius:18px; border:1.5px solid var(--border);
  overflow:hidden; cursor:pointer; transition:all .4s; text-align:center;
  display:flex; flex-direction:column;
}
.cat-card:hover { transform:translateY(-5px); box-shadow:0 16px 50px rgba(26,127,212,.12); border-color:var(--blue-pale); }
.cat-card-img { height:130px; display:flex; align-items:center; justify-content:center; background:var(--blue-black); position:relative; overflow:hidden; }
.cat-card-img img { width:100%; height:100%; object-fit:contain; padding:1rem; }
.cat-card-body { padding:1rem; }
.cat-card-name { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.cat-card-count { font-size:12px; color:var(--text-muted); }
.cat-card-link { font-size:12px; font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:4px; margin-top:.4rem; }

/* ── 14. VIDEOS ── */
.videos-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:22px; align-items:start; }
.video-main { border-radius:20px; overflow:hidden; background:var(--blue-deeper); cursor:pointer; }
.video-main-thumb { height:310px; background:linear-gradient(135deg,#0a3d6b,#1a7fd4); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.video-main-thumb::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(26,127,212,.3) 0%,transparent 70%); }
.play-btn-main { width:72px; height:72px; background:rgba(255,255,255,.15); backdrop-filter:blur(20px); border-radius:50%; border:2px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; position:relative; z-index:1; }
.play-btn-main:hover { background:var(--blue); transform:scale(1.1); }
.play-btn-main svg { width:26px; height:26px; fill:#fff; margin-right:-4px; }
.video-duration { position:absolute; bottom:14px; left:14px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:600; padding:4px 10px; border-radius:6px; }
.video-main-info { padding:1.4rem; border-top:1px solid rgba(255,255,255,.05); }
.video-main-info h3 { font-size:16px; font-weight:700; color:#fff; margin-bottom:5px; }
.video-main-meta { font-size:13px; color:rgba(255,255,255,.5); }
.videos-list { display:flex; flex-direction:column; gap:12px; }
.video-item { display:flex; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; cursor:pointer; transition:all .3s; }
.video-item:hover { background:rgba(26,127,212,.1); border-color:rgba(26,127,212,.3); transform:translateX(-4px); }
.video-item-thumb { width:110px; flex:0 0 110px; background:linear-gradient(135deg,#0a3d6b,#1a7fd4); display:flex; align-items:center; justify-content:center; }
.play-sm { width:34px; height:34px; background:rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.video-item:hover .play-sm { background:var(--blue); }
.play-sm svg { width:14px; height:14px; fill:#fff; margin-right:-2px; }
.video-item-body { padding:.9rem 1rem; flex:1; }
.video-item-title { font-size:14px; font-weight:600; color:#fff; margin-bottom:4px; line-height:1.4; }
.video-item-meta { font-size:12px; color:rgba(255,255,255,.45); }
.vid-tag { display:inline-block; font-size:11px; background:rgba(26,127,212,.2); color:var(--blue-mid); padding:2px 10px; border-radius:4px; font-weight:600; margin-top:5px; }

/* ── 15. BLOG ── */
.blog-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:20px; }
.blog-card { background:#fff; border-radius:20px; overflow:hidden; border:1px solid var(--border); cursor:pointer; transition:all .4s; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 20px 60px rgba(26,127,212,.1); border-color:var(--blue-pale); }
.blog-cover-placeholder { display:flex; align-items:center; justify-content:center; }
.blog-cover-placeholder.h260 { height:220px; }
.blog-cover-placeholder:not(.h260) { height:180px; }
.blog-body { padding:1.3rem; }
.blog-cat { font-size:11px; font-weight:700; color:var(--blue); letter-spacing:1px; text-transform:uppercase; margin-bottom:.5rem; }
.blog-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:.6rem; line-height:1.4; }
.blog-excerpt { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:1rem; }
.blog-footer { display:flex; align-items:center; gap:8px; padding-top:.8rem; border-top:1px solid var(--border); }
.blog-avatar { width:28px; height:28px; border-radius:50%; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--blue); flex:0 0 28px; }
.blog-author { font-size:12px; color:var(--text-muted); }

/* ── 16. DISTRIBUTORS ── */
.distributors-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.distributor-card { background:#fff; border-radius:20px; padding:2rem; text-align:center; border:1px solid var(--border); transition:all .4s; cursor:pointer; }
.distributor-card:hover { transform:translateY(-4px); box-shadow:0 16px 50px rgba(26,127,212,.1); border-color:var(--blue-pale); }
.dist-icon { width:60px; height:60px; background:var(--blue-light); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; transition:all .3s; }
.distributor-card:hover .dist-icon { background:var(--blue); }
.dist-icon svg { width:28px; height:28px; fill:var(--blue); transition:fill .3s; }
.distributor-card:hover .dist-icon svg { fill:#fff; }
.dist-name { font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; }
.dist-region { font-size:13px; color:var(--text-muted); margin-bottom:.8rem; }
.dist-badge { display:inline-block; font-size:11px; background:var(--blue-light); color:var(--blue); padding:3px 12px; border-radius:50px; font-weight:700; }

/* ── 17. PARTNERS ── */
.partners-section { background:var(--blue-black); padding:5rem 3rem; overflow:hidden; }
.partners-track-wrap { overflow:hidden; margin-top:3rem; position:relative; }
.partners-track-wrap::before,.partners-track-wrap::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; }
.partners-track-wrap::before { right:0; background:linear-gradient(to left,var(--blue-black),transparent); }
.partners-track-wrap::after  { left:0;  background:linear-gradient(to right,var(--blue-black),transparent); }
.partners-track { display:flex; gap:2.5rem; animation:scrollPartners 22s linear infinite; width:max-content; }
@keyframes scrollPartners { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.partner-logo { width:130px; height:65px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 130px; font-size:13px; font-weight:700; color:rgba(255,255,255,.3); transition:all .3s; letter-spacing:1px; }
.partner-logo:hover { background:rgba(26,127,212,.1); border-color:rgba(26,127,212,.3); color:var(--blue-pale); }

/* ── 18. TESTIMONIALS ── */
.testi-carousel { overflow:hidden; }
.testi-track { display:flex; gap:22px; transition:transform .6s cubic-bezier(.25,.46,.45,.94); }
.testi-card { flex:0 0 calc(33.333% - 15px); background:var(--gray); border-radius:20px; padding:2rem; border:1px solid var(--border); transition:all .3s; }
.testi-card:hover { box-shadow:0 16px 50px rgba(26,127,212,.1); border-color:var(--blue-pale); }
.quote-mark { font-size:52px; color:var(--blue-light); font-family:Georgia,serif; line-height:1; margin-bottom:.5rem; }
.stars { color:var(--orange); font-size:16px; letter-spacing:2px; margin-bottom:1rem; }
.testi-text { font-size:14px; color:var(--text-muted); line-height:1.7; margin-bottom:1.5rem; }
.testi-author { display:flex; align-items:center; gap:12px; padding-top:1rem; border-top:1px solid var(--border); }
.testi-avatar { width:44px; height:44px; border-radius:50%; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--blue); flex:0 0 44px; }
.testi-name { font-size:14px; font-weight:700; color:var(--text); }
.testi-role { font-size:12px; color:var(--text-muted); margin-top:2px; }
.testi-controls { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2.5rem; }
.testi-btn { width:42px; height:42px; border-radius:50%; background:var(--blue-light); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.testi-btn svg { width:18px; height:18px; fill:var(--blue); }
.testi-btn:hover { background:var(--blue); }
.testi-btn:hover svg { fill:#fff; }
.testi-dots { display:flex; gap:8px; }
.testi-dot { width:8px; height:8px; border-radius:50%; background:var(--border); cursor:pointer; transition:all .3s; }
.testi-dot.active { background:var(--blue); width:24px; border-radius:4px; }

/* ── 19. CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
.contact-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:2rem; }
.contact-icon { width:46px; height:46px; background:rgba(26,127,212,.15); border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 46px; }
.contact-icon svg { width:20px; height:20px; fill:var(--blue-mid); }
.contact-label { font-size:12px; color:rgba(255,255,255,.4); margin-bottom:3px; }
.contact-value { font-size:14px; color:#fff; font-weight:600; }
.contact-form { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:2.2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:7px; font-weight:600; }
.form-group label span { color:var(--red); margin-right:2px; }
.form-input { width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px 15px; font-size:14px; color:#fff; font-family:'Cairo',sans-serif; transition:border-color .3s; outline:none; }
.form-input:focus { border-color:var(--blue); background:rgba(26,127,212,.08); }
.form-input::placeholder { color:rgba(255,255,255,.3); }
.form-input option { background:var(--blue-black); }
textarea.form-input { height:110px; }
.submit-btn { width:100%; background:var(--blue); color:#fff; padding:14px; border-radius:12px; font-size:15px; font-weight:700; border:none; cursor:pointer; transition:all .3s; box-shadow:0 6px 30px rgba(26,127,212,.4); }
.submit-btn:hover { background:var(--blue-dark); transform:translateY(-2px); }

/* ── 20. CTA ── */
.cta-section { background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%); padding:5rem 3rem; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(255,255,255,.05); top:-200px; right:-100px; }
.cta-section h2 { font-family:'Tajawal',sans-serif; font-size:40px; font-weight:900; color:#fff; margin-bottom:.8rem; position:relative; z-index:1; }
.cta-section p { font-size:16px; color:rgba(255,255,255,.8); margin-bottom:2.5rem; position:relative; z-index:1; }
.cta-btns { display:flex; gap:1rem; justify-content:center; position:relative; z-index:1; flex-wrap:wrap; }
.btn-white { background:#fff; color:var(--blue-dark); padding:14px 36px; border-radius:50px; font-size:15px; font-weight:700; border:none; cursor:pointer; transition:all .3s; box-shadow:0 6px 30px rgba(0,0,0,.15); }
.btn-white:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.25); }
.btn-outline-white { background:transparent; color:#fff; padding:14px 36px; border-radius:50px; font-size:15px; font-weight:700; border:2px solid rgba(255,255,255,.5); cursor:pointer; transition:all .3s; }
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:#fff; }

/* ── 21. FOOTER ── */
.footer { background:#030f1d; padding:4rem 3rem 2rem; color:rgba(255,255,255,.5); }
.footer-grid { display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:2rem; }
.footer-logo img { height:50px; filter:brightness(0) invert(1); margin-bottom:1rem; }
.footer-tagline { font-size:14px; line-height:1.7; margin-bottom:1.5rem; }
.social-links { display:flex; gap:10px; }
.social-link { width:38px; height:38px; background:rgba(255,255,255,.06); border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.social-link:hover { background:var(--blue); }
.social-link svg { width:18px; height:18px; fill:rgba(255,255,255,.6); }
.social-link:hover svg { fill:#fff; }
.footer-col h4 { font-size:15px; font-weight:700; color:#fff; margin-bottom:1.2rem; }
.footer-col a { display:block; font-size:13px; color:rgba(255,255,255,.45); margin-bottom:.7rem; transition:color .3s; }
.footer-col a:hover { color:var(--blue-mid); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.footer-bottom a { color:rgba(255,255,255,.4); }
.footer-bottom a:hover { color:var(--blue-mid); }
.footer-links { display:flex; gap:1.5rem; }
.footer-iso { display:flex; align-items:center; gap:8px; background:rgba(26,127,212,.1); border:1px solid rgba(26,127,212,.2); padding:8px 16px; border-radius:10px; margin-bottom:1.2rem; }
.footer-iso span { font-size:12px; color:rgba(255,255,255,.6); }

/* ── 22. MAINTENANCE REQUEST MODAL ── */
.maint-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:2000; display:none; align-items:center; justify-content:center; padding:1.5rem; backdrop-filter:blur(4px); }
.maint-modal-overlay.open { display:flex; }
.maint-modal { background:#fff; border-radius:24px; width:100%; max-width:560px; overflow:hidden; animation:modalIn .35s cubic-bezier(.25,.46,.45,.94); max-height:90vh; overflow-y:auto; }
@keyframes modalIn { from{opacity:0;transform:translateY(30px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.maint-modal-header { background:linear-gradient(135deg,var(--orange),#e67e22); padding:1.8rem 2rem; display:flex; align-items:center; justify-content:space-between; }
.maint-modal-header h3 { font-family:'Tajawal',sans-serif; font-size:22px; font-weight:900; color:#fff; }
.maint-modal-close { background:rgba(255,255,255,.2); border:none; color:#fff; width:36px; height:36px; border-radius:50%; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.maint-modal-close:hover { background:rgba(255,255,255,.35); }
.maint-modal-body { padding:2rem; }
.maint-form-input { width:100%; background:var(--gray); border:1.5px solid var(--border); border-radius:12px; padding:12px 15px; font-size:14px; color:var(--text); font-family:'Cairo',sans-serif; outline:none; transition:border .2s; }
.maint-form-input:focus { border-color:var(--orange); background:#fff; }
.maint-form-input::placeholder { color:var(--text-muted); }
.maint-form-label { display:block; font-size:13px; font-weight:700; color:var(--text); margin-bottom:6px; }
.maint-form-group { margin-bottom:1.1rem; }
.maint-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1.2rem; }
.maint-service-opt {
  border:1.5px solid var(--border); border-radius:12px; padding:.9rem; cursor:pointer;
  text-align:center; transition:all .3s; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.maint-service-opt:hover,.maint-service-opt.selected { border-color:var(--orange); background:rgba(243,156,18,.06); }
.maint-service-opt svg { width:24px; height:24px; fill:var(--text-muted); transition:fill .3s; }
.maint-service-opt:hover svg,.maint-service-opt.selected svg { fill:var(--orange); }
.maint-service-opt span { font-size:13px; font-weight:700; color:var(--text); }
.maint-submit-btn { width:100%; background:var(--orange); color:#fff; padding:14px; border-radius:12px; font-size:15px; font-weight:700; border:none; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:10px; }
.maint-submit-btn:hover { background:#d68910; transform:translateY(-1px); }
.maint-submit-btn svg { width:18px; height:18px; fill:#fff; }
.maint-whatsapp-btn { width:100%; background:var(--green); color:#fff; padding:13px; border-radius:12px; font-size:14px; font-weight:700; border:none; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:.8rem; }
.maint-whatsapp-btn:hover { background:#219653; }
.maint-whatsapp-btn svg { width:18px; height:18px; fill:#fff; }

/* ── 23. CART PANEL ── */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1500; opacity:0; pointer-events:none; transition:opacity .3s; }
.cart-overlay.open { opacity:1; pointer-events:all; }
.cart-panel { position:fixed; top:0; left:0; bottom:0; width:360px; background:#fff; z-index:1501; display:none; flex-direction:column; box-shadow:-8px 0 40px rgba(0,0,0,.2); }
.cart-header { padding:1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cart-header h3 { font-size:18px; font-weight:700; color:var(--text); }
.cart-close { background:none; border:none; font-size:22px; color:var(--text-muted); cursor:pointer; }
.cart-items { flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.cart-empty { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.cart-empty svg { width:56px; height:56px; fill:var(--border); margin:0 auto 1rem; }
.cart-footer { padding:1.5rem; border-top:1px solid var(--border); }
.cart-total { display:flex; justify-content:space-between; font-size:16px; font-weight:700; margin-bottom:1.2rem; }
.checkout-btn { width:100%; background:var(--blue); color:#fff; padding:14px; border-radius:12px; font-size:15px; font-weight:700; border:none; cursor:pointer; transition:all .3s; }
.checkout-btn:hover { background:var(--blue-dark); }

/* ── 24. NOTIFICATION ── */
.notif { position:fixed; top:90px; left:50%; transform:translateX(-50%) translateY(-120px); background:#fff; border-radius:14px; padding:1rem 1.5rem; box-shadow:0 10px 40px rgba(0,0,0,.15); z-index:700; display:flex; align-items:center; gap:12px; transition:transform .4s cubic-bezier(.25,.46,.45,.94); border:1px solid var(--border); min-width:280px; }
.notif.show { transform:translateX(-50%) translateY(0); }
.notif-icon { width:36px; height:36px; background:var(--blue-light); border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 36px; }
.notif-icon svg { width:18px; height:18px; fill:var(--blue); }
.notif-text { font-size:14px; font-weight:700; color:var(--text); }
.notif-sub  { font-size:12px; color:var(--text-muted); }

/* ── 25. ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .6s ease,transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-in { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ── 26. SHOP – OFFERS TOPBAR ── */
.offers-topbar { background:var(--orange); padding:.55rem 3rem; }
.offers-topbar-inner { display:flex; align-items:center; justify-content:center; gap:1.5rem; font-size:13px; font-weight:600; color:#042C53; flex-wrap:wrap; }
.topbar-sep { opacity:.4; }

/* ── 27. COMPARE ── */
.page-hero { background:linear-gradient(135deg,var(--blue-black),var(--blue-deeper)); padding:3rem; text-align:center; position:relative; overflow:hidden; }
.page-hero h1 { font-family:'Tajawal',sans-serif; font-size:38px; font-weight:900; color:#fff; margin-bottom:.5rem; position:relative; z-index:1; }
.page-hero p { font-size:15px; color:rgba(255,255,255,.6); position:relative; z-index:1; }
.compare-wrap { padding:2.5rem 3rem; max-width:1200px; margin:0 auto; }
.compare-cols { display:grid; gap:20px; margin-bottom:1.5rem; }
.product-header-card { background:#fff; border-radius:20px; border:1.5px solid var(--border); overflow:hidden; transition:box-shadow .3s; }
.product-header-card:hover { box-shadow:0 16px 50px rgba(26,127,212,.12); }
.product-header-img { height:180px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.product-header-img svg { width:80px; height:80px; fill:rgba(255,255,255,.25); }
.product-header-img img { width:100%; height:100%; object-fit:contain; padding:1rem; }
.remove-product { position:absolute; top:10px; left:10px; background:rgba(255,255,255,.2); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.remove-product:hover { background:rgba(231,76,60,.6); }
.winner-badge { position:absolute; top:10px; right:10px; background:var(--orange); color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:50px; }
.product-header-info { padding:1.2rem; }
.ph-brand { font-size:11px; font-weight:700; color:var(--blue); letter-spacing:1px; text-transform:uppercase; margin-bottom:3px; }
.ph-name { font-size:14px; font-weight:700; color:var(--text); margin-bottom:5px; line-height:1.3; }
.ph-rating { font-size:12px; color:var(--orange); margin-bottom:6px; }
.ph-old-price { font-size:12px; color:#aaa; text-decoration:line-through; }
.ph-price { font-family:'Tajawal',sans-serif; font-size:22px; font-weight:900; color:var(--blue-dark); margin-bottom:.8rem; }
.ph-add-btn { width:100%; background:var(--blue); color:#fff; padding:10px; border-radius:10px; border:none; font-size:14px; font-weight:700; cursor:pointer; transition:all .3s; }
.ph-add-btn:hover { background:var(--blue-dark); }
.compare-table-wrap { overflow-x:auto; }
.compare-table { width:100%; border-collapse:collapse; font-size:14px; margin-bottom:2rem; }
.compare-table th,.compare-table td { padding:12px 16px; border-bottom:1px solid var(--border); text-align:right; }
.section-row { background:var(--blue-black); color:rgba(255,255,255,.6); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.row-label { font-weight:600; color:var(--text-muted); background:var(--gray); }
.row-val { text-align:center; font-weight:600; color:var(--text); }
.row-val.best { color:var(--green); background:rgba(39,174,96,.06); }
.row-val.worst { color:var(--red); }
.check-yes { width:20px; height:20px; fill:var(--green); margin:0 auto; display:block; }
.check-no  { width:20px; height:20px; fill:var(--red);   margin:0 auto; display:block; }
.verdict-section { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:2rem 0; }
.verdict-card { background:#fff; border-radius:18px; border:1px solid var(--border); padding:1.8rem; transition:all .3s; }
.verdict-card:hover { transform:translateY(-4px); box-shadow:0 16px 50px rgba(26,127,212,.1); }
.verdict-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.verdict-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:.6rem; }
.verdict-text  { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:1rem; }
.verdict-tag   { display:inline-block; font-size:12px; font-weight:700; padding:4px 14px; border-radius:50px; }

/* ── 28. SHOP ── */
.shop-layout { display:grid; grid-template-columns:280px 1fr; }
.sidebar { background:#fff; border-left:1px solid var(--border); padding:2rem 1.5rem; position:sticky; top:0; height:fit-content; }
.sidebar-section { margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.sidebar-section:last-child { border-bottom:none; margin-bottom:0; }
.sidebar-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:1rem; display:flex; align-items:center; gap:8px; }
.sidebar-title svg { width:16px; height:16px; fill:var(--blue); }
.cat-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:10px; cursor:pointer; transition:all .2s; margin-bottom:4px; }
.cat-item:hover,.cat-item.active { background:var(--blue-light); color:var(--blue); }
.cat-item-left { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.cat-icon { width:30px; height:30px; border-radius:8px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; }
.cat-icon svg { width:14px; height:14px; fill:var(--blue); }
.cat-count { font-size:11px; background:var(--gray); color:var(--text-muted); padding:2px 8px; border-radius:50px; }
.cat-item.active .cat-count { background:rgba(26,127,212,.15); color:var(--blue); }
.shop-main { padding:1.5rem 2rem; }
.filter-toggle-btn { display:none; align-items:center; gap:8px; background:var(--blue); color:#fff; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:700; border:none; margin-bottom:1rem; cursor:pointer; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:299; }
.sidebar-overlay.open { display:block; }

/* ── 29. CHECKOUT ── */
.steps-bar { background:#fff; border-bottom:1px solid var(--border); padding:1rem 3rem; position:sticky; top:64px; z-index:10; }
.steps { display:flex; align-items:center; justify-content:center; gap:0; }
.step { display:flex; align-items:center; gap:8px; }
.step-num { width:32px; height:32px; border-radius:50%; background:var(--border); color:var(--text-muted); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 32px; transition:all .3s; }
.step.active .step-num { background:var(--blue); color:#fff; }
.step.done .step-num { background:var(--green); color:#fff; }
.step-label { font-size:13px; font-weight:600; color:var(--text-muted); }
.step.active .step-label { color:var(--blue); }
.step.done .step-label { color:var(--green); }
.step-line { width:60px; height:2px; background:var(--border); }
.step-line.done { background:var(--green); }
.checkout-wrap { display:grid; grid-template-columns:1fr 360px; gap:2rem; padding:2rem 3rem; }
.form-card { background:#fff; border-radius:20px; border:1px solid var(--border); margin-bottom:1.5rem; overflow:hidden; }
.form-card-header { padding:1.2rem 1.8rem; border-bottom:1px solid var(--border); background:var(--gray); display:flex; align-items:center; gap:10px; }
.form-card-header h3 { font-size:16px; font-weight:700; color:var(--text); }
.form-card-header svg { width:18px; height:18px; fill:var(--blue); }
.form-card-body { padding:1.8rem; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.light-input { width:100%; background:var(--gray); border:1.5px solid var(--border); border-radius:12px; padding:11px 14px; font-size:14px; color:var(--text); font-family:'Cairo',sans-serif; outline:none; transition:border .2s; }
.light-input:focus { border-color:var(--blue); background:#fff; }
.light-label { display:block; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.shipping-opt { border:1.5px solid var(--border); border-radius:14px; padding:1rem 1.2rem; cursor:pointer; transition:all .3s; display:flex; align-items:center; gap:12px; margin-bottom:.8rem; }
.shipping-opt:hover,.shipping-opt.selected { border-color:var(--blue); background:var(--blue-light); }
.so-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.so-icon svg { width:20px; height:20px; fill:#fff; }
.so-info { flex:1; }
.so-name { font-size:14px; font-weight:700; color:var(--text); }
.so-time { font-size:12px; color:var(--text-muted); }
.so-price { font-family:'Tajawal',sans-serif; font-size:16px; font-weight:900; color:var(--blue-dark); }
.payment-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:1.5rem; }
.pay-tab { border:1.5px solid var(--border); border-radius:12px; padding:12px 8px; cursor:pointer; text-align:center; transition:all .3s; display:flex; flex-direction:column; align-items:center; gap:5px; }
.pay-tab:hover,.pay-tab.active { border-color:var(--blue); background:var(--blue-light); }
.pay-tab-icon { font-size:22px; }
.pay-tab-label { font-size:12px; font-weight:700; color:var(--text); }
.order-summary { background:#fff; border-radius:20px; border:1px solid var(--border); padding:1.5rem; position:sticky; top:130px; }
.os-title { font-size:17px; font-weight:700; color:var(--text); margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--border); }
.os-item { display:flex; justify-content:space-between; font-size:14px; margin-bottom:.7rem; }
.os-item.total { font-weight:700; font-size:16px; color:var(--text); padding-top:.7rem; border-top:1px solid var(--border); margin-top:.7rem; }

/* ── 30. BLOG PAGE ── */
.blog-hero { background:linear-gradient(135deg,var(--blue-black),var(--blue-deeper)); padding:5rem 3rem 4rem; text-align:center; position:relative; overflow:hidden; }
.blog-hero::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(26,127,212,.15),transparent 70%); top:-200px; left:-100px; }
.blog-hero h1 { font-family:'Tajawal',sans-serif; font-size:46px; font-weight:900; color:#fff; margin-bottom:1rem; position:relative; z-index:1; }
.blog-hero p { font-size:16px; color:rgba(255,255,255,.65); margin-bottom:2rem; position:relative; z-index:1; }
.blog-search { display:flex; gap:10px; max-width:500px; margin:0 auto 2rem; }
.blog-search input { flex:1; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:50px; padding:12px 20px; font-size:14px; color:#fff; font-family:'Cairo',sans-serif; outline:none; }
.blog-search input::placeholder { color:rgba(255,255,255,.4); }
.blog-search button { background:var(--blue); color:#fff; padding:12px 24px; border-radius:50px; border:none; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
.blog-stats { display:flex; gap:3rem; justify-content:center; padding-top:2rem; position:relative; z-index:1; flex-wrap:wrap; }
.bs-item { text-align:center; }
.bs-num { font-family:'Tajawal',sans-serif; font-size:28px; font-weight:900; color:var(--blue-mid); display:block; }
.bs-lbl { font-size:12px; color:rgba(255,255,255,.5); }
.featured-section { padding:3rem; }
.featured-post { display:grid; grid-template-columns:1fr 1fr; background:#fff; border-radius:24px; border:1px solid var(--border); overflow:hidden; }
.fp-img { min-height:340px; position:relative; display:flex; align-items:center; justify-content:center; }
.fp-badge { position:absolute; top:20px; right:20px; background:var(--blue); color:#fff; font-size:12px; font-weight:700; padding:6px 16px; border-radius:50px; }
.fp-read-time { position:absolute; bottom:20px; right:20px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:12px; padding:5px 14px; border-radius:50px; }
.fp-body { padding:2.5rem; display:flex; flex-direction:column; justify-content:center; }
.fp-cat { font-size:11px; font-weight:700; color:var(--blue); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:.8rem; }
.fp-title { font-family:'Tajawal',sans-serif; font-size:26px; font-weight:900; color:var(--text); margin-bottom:1rem; line-height:1.25; }
.fp-excerpt { font-size:14px; color:var(--text-muted); line-height:1.8; margin-bottom:1.5rem; }
.fp-footer { display:flex; align-items:center; justify-content:space-between; padding-top:1.5rem; border-top:1px solid var(--border); }
.fp-author { display:flex; align-items:center; gap:10px; }
.fp-avatar { width:42px; height:42px; border-radius:50%; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--blue); flex:0 0 42px; }
.fp-author-name { font-size:14px; font-weight:700; color:var(--text); }
.fp-author-role { font-size:12px; color:var(--text-muted); }
.read-btn { display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; padding:11px 22px; border-radius:50px; font-size:14px; font-weight:700; cursor:pointer; transition:all .3s; border:none; font-family:'Cairo',sans-serif; }
.read-btn:hover { background:var(--blue-dark); }
.blog-main { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; padding:0 3rem 4rem; align-items:start; }
.posts-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.post-card { background:#fff; border-radius:18px; border:1px solid var(--border); overflow:hidden; cursor:pointer; transition:all .4s; }
.post-card:hover { transform:translateY(-4px); box-shadow:0 18px 50px rgba(26,127,212,.1); border-color:var(--blue-pale); }
.post-cover { overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
.post-body { padding:1.2rem; }
.post-cat { font-size:11px; font-weight:700; color:var(--blue); letter-spacing:1px; text-transform:uppercase; margin-bottom:.5rem; }
.post-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:.6rem; line-height:1.4; }
.post-card.wide { grid-column:span 2; display:grid; grid-template-columns:260px 1fr; }
.blog-sidebar { display:flex; flex-direction:column; gap:22px; position:sticky; top:140px; }
.sidebar-widget { background:#fff; border-radius:20px; border:1px solid var(--border); overflow:hidden; }
.sw-header { padding:1.1rem 1.5rem; border-bottom:1px solid var(--border); background:var(--gray); }
.sw-title { font-size:15px; font-weight:700; color:var(--text); }
.sw-body { padding:1.2rem 1.5rem; }
.newsletter-widget { background:linear-gradient(135deg,var(--blue-black),var(--blue-deeper)); border:none; }
.newsletter-widget .sw-header { background:rgba(255,255,255,.05); border-bottom-color:rgba(255,255,255,.08); }
.newsletter-widget .sw-title { color:#fff; }
.nl-text { font-size:13px; color:rgba(255,255,255,.6); line-height:1.6; margin-bottom:1rem; }
.nl-input { width:100%; padding:11px 15px; border:1px solid rgba(255,255,255,.15); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font-size:13px; font-family:'Cairo',sans-serif; outline:none; margin-bottom:8px; }
.nl-input::placeholder { color:rgba(255,255,255,.4); }
.nl-btn { width:100%; background:var(--blue); color:#fff; padding:12px; border-radius:10px; font-size:14px; font-weight:700; border:none; cursor:pointer; }

/* ── 31. MISC SHARED ── */
.nav-secure { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.6); font-size:13px; }
.nav-secure svg { width:16px; height:16px; fill:var(--green); }

/* ============================================================
   KAZAA — Extended Classes
   All page-specific styles merged into one file
   ============================================================ */

/* ── ABOUT PAGE ── */
.about-hero { min-height:500px; background:var(--blue-black); display:flex; align-items:center; position:relative; overflow:hidden; padding:6rem 3rem 4rem; }
.about-hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--blue-black) 0%,var(--blue-deeper) 60%,rgba(26,127,212,.15) 100%); }
.about-hero-grid-lines { position:absolute; inset:0; background-image:linear-gradient(rgba(26,127,212,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,127,212,.05) 1px,transparent 1px); background-size:60px 60px; }
.about-hero-content { position:relative; z-index:2; max-width:700px; }
.ah-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--blue-mid); margin-bottom:1.2rem; }
.hero-year-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(243,156,18,.15); border:1px solid rgba(243,156,18,.3); color:#f5c842; font-size:13px; font-weight:700; padding:8px 20px; border-radius:50px; margin-bottom:1.5rem; }

/* Mission / Vision */
.mission-section { padding:5rem 3rem; }
.mission-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.mission-text { }
.mt-eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--blue); margin-bottom:1rem; }
.mission-values { display:flex; flex-direction:column; gap:12px; margin-top:2rem; }
.mv-card { display:flex; align-items:center; gap:14px; background:var(--gray); border-radius:14px; padding:1rem 1.2rem; border:1px solid var(--border); transition:all .3s; }
.mv-card:hover { background:var(--blue-light); border-color:var(--blue-pale); }
.mv-dot { width:10px; height:10px; border-radius:50%; background:var(--blue); flex:0 0 10px; }
.mv-val-text { font-size:14px; font-weight:700; color:var(--text); }
.mv-val-check { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--green); }
.mv-val-check svg { width:16px; height:16px; fill:var(--green); }
.mission-visual { background:linear-gradient(135deg,var(--blue-black),var(--blue-deeper)); border-radius:24px; padding:3rem; display:flex; flex-direction:column; gap:1.5rem; }
.mv-main { text-align:center; padding:2rem; border-bottom:1px solid rgba(255,255,255,.08); }
.mv-main-icon { width:70px; height:70px; background:rgba(26,127,212,.2); border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.mv-main-icon svg { width:34px; height:34px; fill:var(--blue-mid); }
.mv-main-num { font-family:'Tajawal',sans-serif; font-size:52px; font-weight:900; color:#fff; line-height:1; }
.mv-main-lbl { font-size:13px; color:rgba(255,255,255,.5); margin-top:.4rem; }
.mv-accent { display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
.mv-accent:last-child { border-bottom:none; }
.mv-accent-text { font-size:14px; font-weight:600; color:rgba(255,255,255,.7); }
.hyb-num { font-family:'Tajawal',sans-serif; font-size:24px; font-weight:900; color:var(--blue-mid); }
.hyb-lbl { font-size:11px; color:rgba(255,255,255,.4); }
.mv-val { display:flex; align-items:center; gap:8px; }
.mv-main { }

/* Flip cards (رؤية / رسالة) */
.flip-section { padding:5rem 3rem; background:var(--blue-black); }
.flip-section-head { text-align:center; margin-bottom:3rem; }
.flip-cards-row { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.flip-card { height:280px; perspective:1000px; cursor:pointer; }
.flip-card-inner { position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.25,.46,.45,.94); transform-style:preserve-3d; }
.flip-card:hover .flip-card-inner { transform:rotateY(180deg); }
.flip-front,.flip-back { position:absolute; inset:0; border-radius:20px; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; text-align:center; }
.flip-front { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
.flip-back { background:var(--blue); transform:rotateY(180deg); }
.flip-front-icon { width:64px; height:64px; background:rgba(26,127,212,.2); border-radius:18px; display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.flip-front-icon svg { width:30px; height:30px; fill:var(--blue-mid); }
.flip-front h3 { font-size:18px; font-weight:700; color:#fff; margin-bottom:.5rem; }
.flip-front p  { font-size:13px; color:rgba(255,255,255,.5); line-height:1.6; }
.flip-hint { font-size:11px; color:rgba(255,255,255,.3); margin-top:1rem; }
.flip-back h3 { font-size:18px; font-weight:700; color:#fff; margin-bottom:1rem; }
.flip-back-quote { font-size:14px; color:rgba(255,255,255,.85); line-height:1.7; font-style:italic; }
.flip-back-tag { display:inline-block; background:rgba(255,255,255,.15); color:#fff; font-size:11px; font-weight:700; padding:4px 14px; border-radius:50px; margin-top:1rem; }

/* Timeline */
.timeline-section { padding:5rem 3rem; }
.timeline { position:relative; max-width:900px; margin:3rem auto 0; }
.timeline::before { content:''; position:absolute; right:50%; top:0; bottom:0; width:2px; background:var(--border); transform:translateX(50%); }
.tl-item { display:grid; grid-template-columns:1fr 60px 1fr; gap:0; margin-bottom:3rem; align-items:start; }
.tl-dot { width:18px; height:18px; background:var(--blue); border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 3px var(--blue-pale); margin:4px auto 0; position:relative; z-index:1; }
.tl-year { font-family:'Tajawal',sans-serif; font-size:22px; font-weight:900; color:var(--blue); }
.tl-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.tl-desc { font-size:13px; color:var(--text-muted); line-height:1.6; }
.tl-content-right { text-align:right; padding-left:30px; }
.tl-content-left { padding-right:30px; }

/* Branches */
.branches-section { padding:5rem 3rem; background:var(--gray); }
.branches-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:3rem; }
.branch-card { background:#fff; border-radius:20px; border:1px solid var(--border); overflow:hidden; transition:all .4s; }
.branch-card:hover { transform:translateY(-5px); box-shadow:0 20px 60px rgba(26,127,212,.1); }
.branch-map-frame { height:200px; }
.branch-map-frame iframe { width:100%; height:100%; border:none; }
.branch-info { padding:1.5rem; }
.bi-badge { display:inline-block; font-size:11px; font-weight:700; padding:3px 12px; border-radius:50px; margin-bottom:.8rem; }
.gold     { background:rgba(243,156,18,.15); color:#b7860a; }
.platinum { background:rgba(74,158,224,.15); color:var(--blue-dark); }
.silver   { background:rgba(107,124,147,.12); color:var(--text-muted); }
.bi-city { font-family:'Tajawal',sans-serif; font-size:20px; font-weight:900; color:var(--text); margin-bottom:.3rem; }
.bi-address { font-size:13px; color:var(--text-muted); margin-bottom:1rem; line-height:1.5; }
.bi-contacts { display:flex; flex-direction:column; gap:8px; margin-bottom:1rem; }
.bi-contact { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.bi-contact svg { width:15px; height:15px; fill:var(--blue); flex:0 0 15px; }
.bi-map-btn { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--blue); transition:gap .3s; }
.bi-map-btn:hover { gap:12px; }

/* Vision numbers */
.vision-section { padding:5rem 3rem; }
.vision-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.vision-text { }
.vt-eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--blue); margin-bottom:1rem; }
.vision-numbers { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:2.5rem; }
.vn-card { background:var(--gray); border-radius:16px; padding:1.5rem; border:1px solid var(--border); text-align:center; transition:all .3s; }
.vn-card:hover { background:var(--blue-light); border-color:var(--blue-pale); }
.vn-num { font-family:'Tajawal',sans-serif; font-size:36px; font-weight:900; color:var(--blue); display:block; }
.vn-lbl { font-size:13px; color:var(--text-muted); margin-top:4px; }
.vision-pillars { display:flex; flex-direction:column; gap:14px; }
.vp-item { display:flex; gap:16px; align-items:flex-start; background:var(--gray); border-radius:16px; padding:1.2rem; border:1px solid var(--border); transition:all .3s; }
.vp-item:hover { background:var(--blue-light); border-color:var(--blue-pale); }
.vp-icon { width:44px; height:44px; background:var(--blue-light); border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 44px; transition:all .3s; }
.vp-item:hover .vp-icon { background:var(--blue); }
.vp-icon svg { width:22px; height:22px; fill:var(--blue); transition:fill .3s; }
.vp-item:hover .vp-icon svg { fill:#fff; }
.vp-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; }
.vp-desc { font-size:13px; color:var(--text-muted); line-height:1.6; }

/* Values section (already styled inline in about.html — kept for reference) */
.values-section { position:relative; background:#03111f; padding:7rem 3rem 5rem; overflow:hidden; }

/* ── SHOP PAGE ── */
.search-bar-wrap { padding:1.5rem 3rem; background:#fff; border-bottom:1px solid var(--border); }
.search-bar { display:flex; gap:10px; max-width:700px; margin:0 auto; }
.search-input-wrap { flex:1; position:relative; }
.search-input-wrap input { width:100%; padding:13px 20px 13px 44px; border:1.5px solid var(--border); border-radius:50px; font-size:14px; font-family:'Cairo',sans-serif; outline:none; transition:border .2s; }
.search-input-wrap input:focus { border-color:var(--blue); }
.search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); }
.search-icon svg { width:18px; height:18px; fill:var(--text-muted); }
.search-btn { background:var(--blue); color:#fff; padding:13px 28px; border-radius:50px; border:none; font-size:14px; font-weight:700; cursor:pointer; transition:all .3s; white-space:nowrap; }
.search-btn:hover { background:var(--blue-dark); }
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; background:#fff; border:1px solid var(--border); border-radius:14px; margin-bottom:1.5rem; flex-wrap:wrap; gap:.8rem; }
.toolbar-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toolbar-right { display:flex; align-items:center; gap:10px; }
.result-count { font-size:14px; color:var(--text-muted); font-weight:600; }
.sort-select { padding:8px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; font-family:'Cairo',sans-serif; outline:none; color:var(--text); background:#fff; cursor:pointer; }
.view-btns { display:flex; gap:4px; }
.view-btn { width:34px; height:34px; border:1.5px solid var(--border); border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.view-btn.active,.view-btn:hover { background:var(--blue); border-color:var(--blue); }
.view-btn svg { width:16px; height:16px; fill:var(--text-muted); }
.view-btn.active svg,.view-btn:hover svg { fill:#fff; }
.active-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1rem; }
.filter-tag { display:inline-flex; align-items:center; gap:6px; background:var(--blue-light); color:var(--blue); padding:4px 12px; border-radius:50px; font-size:12px; font-weight:700; }
.filter-tag button { background:none; border:none; color:var(--blue); font-size:15px; cursor:pointer; line-height:1; padding:0; }
.reset-filters { background:none; border:none; color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; text-decoration:underline; font-family:'Cairo',sans-serif; }
.price-range-wrap { margin-top:1rem; }
.price-inputs { display:flex; gap:8px; align-items:center; margin-bottom:.8rem; }
.price-input { flex:1; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; font-family:'Cairo',sans-serif; outline:none; text-align:center; }
.price-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); }
.price-unit { font-size:12px; color:var(--text-muted); }
.range-slider { width:100%; accent-color:var(--blue); cursor:pointer; }
.stars-filter { display:flex; flex-direction:column; gap:6px; }
.rating-row { display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 6px; border-radius:8px; transition:background .2s; }
.rating-row:hover { background:var(--blue-light); }
.rating-cnt { font-size:12px; color:var(--text-muted); }
.brand-logo-box { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; transition:background .2s; margin-bottom:4px; }
.brand-logo-box:hover { background:var(--blue-light); }
.brand-check { width:16px; height:16px; border:1.5px solid var(--border); border-radius:4px; flex:0 0 16px; }
.brand-name { font-size:13px; font-weight:600; color:var(--text); flex:1; }
.brand-cnt { font-size:11px; background:var(--gray); color:var(--text-muted); padding:2px 8px; border-radius:50px; }
.sub-cats { padding-right:1.2rem; }
.sub-cat { font-size:13px; color:var(--text-muted); padding:5px 10px; cursor:pointer; border-radius:8px; transition:all .2s; display:flex; justify-content:space-between; }
.sub-cat:hover,.sub-cat.active { color:var(--blue); background:var(--blue-light); }
.apply-filters { width:100%; background:var(--blue); color:#fff; padding:11px; border-radius:10px; border:none; font-size:14px; font-weight:700; cursor:pointer; transition:all .3s; margin-top:.5rem; }
.apply-filters:hover { background:var(--blue-dark); }
.featured-banner { background:linear-gradient(135deg,var(--blue-black),var(--blue-deeper)); border-radius:16px; padding:1.5rem 2rem; display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; gap:1.5rem; }
.banner-text { }
.banner-badge { display:inline-block; background:rgba(243,156,18,.2); color:#f5c842; font-size:11px; font-weight:700; padding:3px 12px; border-radius:50px; margin-bottom:.6rem; }
.banner-text h3 { font-family:'Tajawal',sans-serif; font-size:20px; font-weight:900; color:#fff; margin-bottom:.3rem; }
.banner-text p { font-size:13px; color:rgba(255,255,255,.6); }
.banner-price { text-align:left; }
.old-price { font-size:13px; color:rgba(255,255,255,.4); text-decoration:line-through; }
.current-price { font-family:'Tajawal',sans-serif; font-size:28px; font-weight:900; color:#fff; display:block; }
.banner-btn { background:var(--blue); color:#fff; padding:11px 22px; border-radius:50px; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:all .3s; white-space:nowrap; }
.banner-btn:hover { background:var(--blue-dark); transform:translateY(-2px); }
/* Product card extended */
.add-cart-btn { width:100%; background:var(--blue); color:#fff; padding:10px; border-radius:10px; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:6px; margin-top:.8rem; }
.add-cart-btn:hover { background:var(--blue-dark); }
.add-cart-btn svg { width:16px; height:16px; fill:#fff; }
.quick-view-btn { position:absolute; bottom:12px; right:12px; background:rgba(255,255,255,.9); border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; color:var(--blue); cursor:pointer; opacity:0; transition:opacity .3s; }
.product-card:hover .quick-view-btn { opacity:1; }
.compare-btn { position:absolute; top:12px; left:12px; background:rgba(255,255,255,.9); border:none; border-radius:8px; padding:5px 10px; font-size:11px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:all .3s; }
.compare-btn:hover { color:var(--blue); }
.stock-status { display:flex; align-items:center; gap:6px; font-size:12px; margin-top:4px; }
.stock-dot { width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
.stock-dot.in  { background:var(--green); }
.stock-dot.low { background:var(--orange); }
.stock-dot.out { background:var(--red); }
.stock-text { color:var(--text-muted); }
.product-rating-mini { font-size:12px; color:var(--orange); }
.product-rating-count { font-size:11px; color:var(--text-muted); }
.product-specs-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:.6rem; }
.spec-tag { font-size:10px; background:var(--gray); color:var(--text-muted); padding:2px 8px; border-radius:4px; font-weight:600; }
.product-badges { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.badge { font-size:10px; padding:3px 10px; border-radius:50px; font-weight:700; }
.badge-new  { background:var(--blue);  color:#fff; }
.badge-sale { background:var(--red);   color:#fff; }
.badge-best { background:var(--orange);color:#fff; }
.badge-eco  { background:var(--green); color:#fff; }
.product-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.discount-pct { font-size:11px; background:rgba(231,76,60,.15); color:var(--red); padding:2px 8px; border-radius:50px; font-weight:700; }
.product-brand-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
/* Compare bar */
.compare-bar { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:2px solid var(--blue); padding:.8rem 2rem; display:none; align-items:center; gap:1rem; z-index:500; box-shadow:0 -4px 20px rgba(0,0,0,.1); }
.compare-bar.show { display:flex; }
.compare-items { display:flex; gap:10px; flex:1; }
.compare-item { display:flex; align-items:center; gap:8px; background:var(--blue-light); border-radius:8px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--blue); }
.compare-item button { background:none; border:none; color:var(--blue); cursor:pointer; font-size:16px; }
.compare-go { background:var(--blue); color:#fff; padding:10px 22px; border-radius:10px; border:none; font-size:14px; font-weight:700; cursor:pointer; }
.continue-btn { background:transparent; color:var(--text-muted); border:none; font-size:13px; cursor:pointer; font-family:'Cairo',sans-serif; }
/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:2rem; }
.page-btn { width:38px; height:38px; border:1.5px solid var(--border); border-radius:10px; background:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; font-family:'Cairo',sans-serif; color:var(--text-muted); }
.page-btn:hover,.page-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
/* Cart items */
.cart-body { flex:1; overflow-y:auto; padding:1rem 1.5rem; display:flex; flex-direction:column; gap:12px; }
.cart-item { display:flex; gap:12px; align-items:flex-start; padding-bottom:12px; border-bottom:1px solid var(--border); }
.cart-item:last-child { border-bottom:none; }
.cart-item-img { width:60px; height:60px; border-radius:10px; background:var(--blue-black); flex:0 0 60px; display:flex; align-items:center; justify-content:center; }
.cart-item-info { flex:1; }
.cart-item-brand { font-size:10px; font-weight:700; color:var(--blue); letter-spacing:1px; text-transform:uppercase; }
.cart-item-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.cart-item-specs { font-size:11px; color:var(--text-muted); }
.cart-item-price { font-family:'Tajawal',sans-serif; font-size:16px; font-weight:900; color:var(--blue-dark); }
.cart-row { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.qty-row { display:flex; align-items:center; gap:8px; }
.qty-btn { width:26px; height:26px; border:1px solid var(--border); border-radius:6px; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-muted); transition:all .2s; }
.qty-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.qty-val { font-size:14px; font-weight:700; color:var(--text); min-width:20px; text-align:center; }
.remove-btn { background:none; border:none; color:var(--red); cursor:pointer; font-size:18px; }
.cart-summary { padding:1rem 1.5rem; border-top:1px solid var(--border); background:var(--gray); }
.promo-row { display:flex; gap:8px; margin-bottom:1rem; }
.promo-input { flex:1; padding:9px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; font-family:'Cairo',sans-serif; outline:none; }
.promo-btn { background:var(--blue); color:#fff; padding:9px 16px; border-radius:10px; border:none; font-size:13px; font-weight:700; cursor:pointer; }
.amount { font-family:'Tajawal',sans-serif; font-weight:700; color:var(--blue-dark); }
.unit { font-size:12px; color:var(--text-muted); }
/* Product modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:2000; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.modal-overlay.open { display:flex; }
.modal { background:#fff; border-radius:24px; width:100%; max-width:860px; overflow:hidden; max-height:90vh; overflow-y:auto; }
.modal-close { position:absolute; top:1.2rem; left:1.2rem; background:rgba(0,0,0,.15); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal-grid { display:grid; grid-template-columns:1fr 1fr; }
.modal-img-side { min-height:400px; background:var(--blue-black); display:flex; align-items:center; justify-content:center; position:relative; }
.modal-thumbs { display:flex; gap:8px; padding:1rem; }
.modal-thumb { width:60px; height:60px; border-radius:10px; background:rgba(255,255,255,.1); border:2px solid transparent; cursor:pointer; transition:all .2s; }
.modal-thumb.active { border-color:var(--blue); }
.modal-info-side { padding:2rem; overflow-y:auto; }
.modal-brand { font-size:11px; font-weight:700; color:var(--blue); letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.modal-name { font-family:'Tajawal',sans-serif; font-size:24px; font-weight:900; color:var(--text); margin-bottom:.8rem; line-height:1.2; }
.modal-rating { display:flex; align-items:center; gap:8px; margin-bottom:1.2rem; }
.modal-stars { color:var(--orange); font-size:15px; }
.modal-rating-count { font-size:13px; color:var(--text-muted); }
.modal-price-box { background:var(--gray); border-radius:14px; padding:1.2rem; margin-bottom:1.2rem; }
.modal-old-price { font-size:13px; color:#aaa; text-decoration:line-through; }
.modal-current-price { font-family:'Tajawal',sans-serif; font-size:32px; font-weight:900; color:var(--blue-dark); }
.modal-discount { display:inline-block; background:rgba(231,76,60,.1); color:var(--red); font-size:12px; font-weight:700; padding:3px 10px; border-radius:50px; margin-top:4px; }
.modal-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.2rem; }
.modal-tag { font-size:11px; background:var(--blue-light); color:var(--blue-dark); padding:4px 12px; border-radius:50px; font-weight:700; }
.modal-specs { margin-bottom:1.2rem; }
.specs-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:.8rem; }
.specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.spec-item { background:var(--gray); border-radius:10px; padding:.6rem .8rem; }
.spec-key { font-size:11px; color:var(--text-muted); margin-bottom:2px; }
.spec-val { font-size:13px; font-weight:700; color:var(--text); }
.modal-qty-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.modal-qty-label { font-size:14px; font-weight:700; color:var(--text); }
.modal-qty-ctrl { display:flex; align-items:center; gap:10px; }
.modal-qty-btn { width:34px; height:34px; border:1.5px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.modal-qty-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.modal-qty-val { font-size:16px; font-weight:700; color:var(--text); min-width:24px; text-align:center; }
.modal-btns { display:flex; gap:10px; flex-wrap:wrap; }
.modal-add-btn { flex:1; background:var(--blue); color:#fff; padding:13px; border-radius:12px; border:none; font-size:15px; font-weight:700; cursor:pointer; transition:all .3s; }
.modal-add-btn:hover { background:var(--blue-dark); }
.modal-wish-btn { width:48px; height:48px; border:1.5px solid var(--border); border-radius:12px; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s; flex:0 0 48px; }
.modal-wish-btn svg { width:22px; height:22px; fill:var(--text-muted); }
.modal-wish-btn:hover,.modal-wish-btn.active { background:var(--blue); border-color:var(--blue); }
.modal-wish-btn:hover svg,.modal-wish-btn.active svg { fill:#fff; }
/* Shop hero carousel */
.hero-offers-carousel { position:relative; overflow:hidden; }
.hero-slides { display:flex; transition:transform .6s cubic-bezier(.25,.46,.45,.94); }
.hero-slide { min-width:100%; padding:3.5rem 3rem; display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:center; position:relative; overflow:hidden; }
.hs-content { position:relative; z-index:2; }
.hs-badge { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:13px; font-weight:700; padding:6px 16px; border-radius:50px; margin-bottom:1.2rem; }
.hs-title { font-family:'Tajawal',sans-serif; font-size:34px; font-weight:900; color:#fff; line-height:1.2; margin-bottom:.8rem; }
.hs-accent { color:var(--blue-pale); }
.hs-desc { font-size:14px; color:rgba(255,255,255,.7); line-height:1.7; margin-bottom:1.5rem; }
.hs-price-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.hs-old { font-size:16px; color:rgba(255,255,255,.5); text-decoration:line-through; }
.hs-new { font-family:'Tajawal',sans-serif; font-size:32px; font-weight:900; color:#fff; }
.hs-save { background:rgba(231,76,60,.3); border:1px solid rgba(231,76,60,.5); color:#ff9f9f; font-size:12px; font-weight:700; padding:4px 12px; border-radius:50px; }
.hs-btns { display:flex; gap:10px; flex-wrap:wrap; }
.hs-btn-main { background:var(--blue); color:#fff; padding:12px 28px; border-radius:50px; font-size:14px; font-weight:700; border:none; cursor:pointer; transition:all .3s; }
.hs-btn-main:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,127,212,.5); }
.hs-btn-sec { background:rgba(255,255,255,.1); color:#fff; padding:12px 22px; border-radius:50px; font-size:14px; font-weight:700; border:1px solid rgba(255,255,255,.25); cursor:pointer; transition:all .3s; }
.hs-btn-sec:hover { background:rgba(255,255,255,.2); }
.hs-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.hs-circle { position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(26,127,212,.1); animation:rotate 20s linear infinite; }
@keyframes rotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.hs-img-wrap { position:relative; z-index:1; animation:floatImg 4s ease-in-out infinite; }
@keyframes floatImg { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hs-prev,.hs-next { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; font-size:18px; cursor:pointer; transition:all .3s; z-index:10; display:flex; align-items:center; justify-content:center; }
.hs-prev { right:1.5rem; }
.hs-next { left:1.5rem; }
.hs-prev:hover,.hs-next:hover { background:var(--blue); border-color:var(--blue); }
.hs-dots { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.hs-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:all .3s; }
.hs-dot.active { background:#fff; width:24px; border-radius:4px; }
.offer-cards-row { display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border-top:3px solid var(--blue); }
.offer-card { padding:1.2rem; text-align:center; border-left:1px solid var(--border); transition:background .2s; cursor:pointer; }
.offer-card:last-child { border-left:none; }
.offer-card:hover { background:var(--blue-light); }
.oc-icon { font-size:22px; margin-bottom:.4rem; }
.oc-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; }
.oc-sub { font-size:11px; color:var(--text-muted); }
.shop-hero-new .shop-hero-stats { background:var(--blue-black); border-top:1px solid rgba(26,127,212,.2); padding:1.5rem 3rem; display:flex; gap:3rem; justify-content:center; }
.sh-stat-num { font-family:'Tajawal',sans-serif; font-size:26px; font-weight:900; color:var(--blue-mid); display:block; }
.sh-stat-lbl { font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; }

/* ── BLOG PAGE ── */
.blog-hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(26,127,212,.2); border:1px solid rgba(26,127,212,.4); color:var(--blue-pale); font-size:12px; font-weight:700; padding:6px 18px; border-radius:50px; margin-bottom:1.5rem; }
.cats-bar { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:64px; z-index:100; }
.cats-inner { display:flex; align-items:center; gap:0; overflow-x:auto; padding:0 3rem; }
.cat-tab { padding:1rem 1.5rem; font-size:14px; font-weight:700; color:var(--text-muted); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; transition:all .2s; background:none; border-top:none; border-left:none; border-right:none; font-family:'Cairo',sans-serif; }
.cat-tab:hover { color:var(--blue); }
.cat-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.feat-label { font-size:12px; font-weight:700; color:var(--blue); letter-spacing:2px; text-transform:uppercase; margin-bottom:1rem; }
.fp-img-icon { }
.fp-meta { display:flex; align-items:center; gap:1rem; font-size:13px; color:var(--text-muted); }
.fp-meta span { display:flex; align-items:center; gap:4px; }
.fp-meta svg { width:14px; height:14px; fill:var(--text-muted); }
.fp-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.5rem; }
.fp-tag { font-size:12px; background:var(--blue-light); color:var(--blue-dark); padding:4px 14px; border-radius:50px; font-weight:600; }
.posts-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.posts-title { font-family:'Tajawal',sans-serif; font-size:24px; font-weight:900; color:var(--text); }
.posts-section { }
.view-all-btn { font-size:14px; font-weight:600; color:var(--blue); cursor:pointer; display:flex; align-items:center; gap:5px; background:none; border:none; font-family:'Cairo',sans-serif; }
.post-author-row { display:flex; align-items:center; gap:8px; }
.p-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex:0 0 28px; }
.p-author-name { font-size:12px; font-weight:600; color:var(--text); }
.p-date { font-size:11px; color:var(--text-muted); }
.post-footer { display:flex; align-items:center; justify-content:space-between; padding-top:.8rem; border-top:1px solid var(--border); }
.post-stats { display:flex; gap:.8rem; font-size:12px; color:var(--text-muted); }
.post-stats span { display:flex; align-items:center; gap:3px; }
.post-stats svg { width:12px; height:12px; fill:var(--text-muted); }
.post-excerpt { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:.8rem; }
.post-cover-badge { position:absolute; top:12px; right:12px; font-size:11px; font-weight:700; padding:4px 12px; border-radius:50px; }
.post-cover-read-time { position:absolute; bottom:12px; left:12px; background:rgba(0,0,0,.5); color:#fff; font-size:11px; padding:3px 10px; border-radius:50px; }
.load-more-btn { width:100%; padding:14px; border:2px solid var(--blue); border-radius:14px; background:transparent; color:var(--blue); font-size:15px; font-weight:700; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:8px; font-family:'Cairo',sans-serif; }
.load-more-btn:hover { background:var(--blue); color:#fff; }
.trending-item { display:flex; gap:12px; align-items:flex-start; padding:.8rem 0; border-bottom:1px solid var(--border); cursor:pointer; transition:all .2s; }
.trending-item:last-child { border-bottom:none; }
.trending-item:hover .trending-title { color:var(--blue); }
.trending-num { font-family:'Tajawal',sans-serif; font-size:22px; font-weight:900; color:var(--blue-light); line-height:1; flex:0 0 28px; }
.trending-info { flex:1; }
.trending-title { font-size:13px; font-weight:700; color:var(--text); line-height:1.4; margin-bottom:3px; transition:color .2s; }
.trending-meta { font-size:11px; color:var(--text-muted); }
.tags-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag-item { font-size:12px; padding:5px 14px; border-radius:50px; border:1.5px solid var(--border); color:var(--text-muted); cursor:pointer; transition:all .25s; font-weight:600; }
.tag-item:hover,.tag-item.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.social-stats { display:flex; flex-direction:column; gap:8px; }
.social-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; cursor:pointer; transition:all .2s; }
.social-item:hover { background:var(--gray); }
.social-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.social-icon svg { width:18px; height:18px; fill:#fff; }
.social-name { font-size:14px; font-weight:700; color:var(--text); flex:1; }
.social-count { font-size:12px; color:var(--text-muted); }
.social-follow { font-size:12px; font-weight:600; color:var(--blue); }
.nl-privacy { font-size:11px; color:rgba(255,255,255,.4); text-align:center; margin-top:.8rem; }

/* ── CHECKOUT PAGE ── */
.checkout-form-section { }
.form-card-title { font-size:16px; font-weight:700; color:var(--text); }
.form-card-header-icon { }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.form-select { width:100%; background:var(--gray); border:1.5px solid var(--border); border-radius:12px; padding:11px 14px; font-size:14px; color:var(--text); font-family:'Cairo',sans-serif; outline:none; transition:border .2s; }
.form-select:focus { border-color:var(--blue); background:#fff; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.card-field { }
.card-icon { }
.card-icons { display:flex; gap:8px; margin-bottom:1rem; }
.os-header { padding-bottom:1rem; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.os-count { font-size:13px; color:var(--text-muted); }
.os-items { display:flex; flex-direction:column; gap:12px; margin-bottom:1rem; }
.os-item-img { width:52px; height:52px; border-radius:10px; background:var(--blue-black); flex:0 0 52px; display:flex; align-items:center; justify-content:center; }
.os-item-info { flex:1; }
.os-item-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; }
.os-item-specs { font-size:11px; color:var(--text-muted); }
.os-item-price { font-family:'Tajawal',sans-serif; font-size:16px; font-weight:900; color:var(--blue-dark); }
.os-item-qty { font-size:11px; color:var(--text-muted); }
.os-totals { border-top:1px solid var(--border); padding-top:1rem; margin-top:1rem; }
.os-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:.6rem; }
.os-footer { margin-top:1.2rem; }
.os-promo { display:flex; gap:8px; margin-bottom:1rem; }
.sd-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:.5rem; }
.discount { color:var(--green); font-weight:700; }
.free { color:var(--green); font-weight:700; font-size:13px; }
.shipping-options { display:flex; flex-direction:column; gap:10px; }
.shipping-opt-info { flex:1; }
.shipping-opt-name { font-size:14px; font-weight:700; color:var(--text); }
.shipping-opt-desc { font-size:12px; color:var(--text-muted); }
.shipping-opt-price { font-family:'Tajawal',sans-serif; font-size:16px; font-weight:900; color:var(--blue-dark); }
.security-badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:1rem; }
.sec-badge { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); background:var(--gray); padding:5px 12px; border-radius:8px; }
.sec-badge svg { width:14px; height:14px; fill:var(--green); }
.lock-icon { }
.pending { color:var(--orange); font-weight:700; }
.order-num { font-family:'Tajawal',sans-serif; font-size:13px; color:var(--blue); font-weight:700; }
/* Payment logos */
.visa,.mc,.mada,.k,.v { font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; border:1px solid var(--border); }
/* Success overlay */
.success-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:3000; display:none; align-items:center; justify-content:center; }
.success-overlay.show { display:flex; }
.success-modal { background:#fff; border-radius:24px; padding:3rem; text-align:center; max-width:480px; width:90%; }
.success-icon { width:80px; height:80px; background:rgba(39,174,96,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; }
.success-icon svg { width:40px; height:40px; fill:var(--green); }
.success-details { background:var(--gray); border-radius:14px; padding:1.2rem; margin:1.5rem 0; text-align:right; }
.success-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.s-btn-main { background:var(--blue); color:#fff; padding:12px 28px; border-radius:50px; border:none; font-size:14px; font-weight:700; cursor:pointer; }
.s-btn-sec { background:transparent; color:var(--blue); padding:12px 28px; border-radius:50px; border:2px solid var(--blue); font-size:14px; font-weight:700; cursor:pointer; }

/* ── PROJECT REQUEST PAGE ── */
.pr-hero { background:linear-gradient(135deg,var(--blue-black),var(--blue-deeper)); padding:4rem 3rem 3rem; position:relative; overflow:hidden; }
.pr-hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(243,156,18,.15); border:1px solid rgba(243,156,18,.3); color:#f5c842; font-size:12px; font-weight:700; padding:7px 18px; border-radius:50px; margin-bottom:1.2rem; }
.pr-page { padding:3rem; }
.pr-wrap { display:grid; grid-template-columns:1fr 360px; gap:2.5rem; align-items:start; }
.pr-sidebar { display:flex; flex-direction:column; gap:18px; position:sticky; top:120px; }
.pr-card { background:#fff; border-radius:20px; border:1px solid var(--border); overflow:hidden; margin-bottom:1.5rem; }
.pr-card-header { padding:1.2rem 1.8rem; border-bottom:1px solid var(--border); background:var(--gray); display:flex; align-items:center; gap:10px; }
.pr-card-icon { width:36px; height:36px; border-radius:10px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; }
.pr-card-icon svg { width:18px; height:18px; fill:var(--blue); }
.pr-card-title { font-size:16px; font-weight:700; color:var(--text); }
.pr-card-body { padding:1.8rem; }
.pr-steps { display:flex; align-items:center; margin-bottom:2rem; }
.pr-step { display:flex; align-items:center; gap:8px; }
.pr-step-num { width:32px; height:32px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pr-step-line { flex:1; height:2px; background:var(--border); margin:0 8px; }
.options-group { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1.2rem; }
.option-item { border:1.5px solid var(--border); border-radius:12px; padding:1rem; cursor:pointer; transition:all .3s; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.option-item:hover,.option-item.selected { border-color:var(--blue); background:var(--blue-light); }
.option-icon { width:44px; height:44px; border-radius:12px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; transition:all .3s; }
.option-item.selected .option-icon,.option-item:hover .option-icon { background:var(--blue); }
.option-icon svg { width:22px; height:22px; fill:var(--blue); transition:fill .3s; }
.option-item.selected .option-icon svg,.option-item:hover .option-icon svg { fill:#fff; }
.option-dot { width:16px; height:16px; border-radius:50%; border:2px solid var(--border); margin-top:4px; transition:all .3s; }
.option-item.selected .option-dot { background:var(--blue); border-color:var(--blue); }
.field-group { margin-bottom:1.2rem; }
.field-label { display:block; font-size:13px; font-weight:700; color:var(--text); margin-bottom:6px; }
.field-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.req { color:var(--red); }
.field-input { width:100%; background:var(--gray); border:1.5px solid var(--border); border-radius:12px; padding:12px 15px; font-size:14px; color:var(--text); font-family:'Cairo',sans-serif; outline:none; transition:border .2s; }
.field-input:focus { border-color:var(--blue); background:#fff; }
.field-select { width:100%; background:var(--gray); border:1.5px solid var(--border); border-radius:12px; padding:12px 15px; font-size:14px; color:var(--text); font-family:'Cairo',sans-serif; outline:none; transition:border .2s; }
.field-select:focus { border-color:var(--blue); background:#fff; }
.fields-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.file-upload { border:2px dashed var(--border); border-radius:14px; padding:2rem; text-align:center; cursor:pointer; transition:all .3s; }
.file-upload:hover { border-color:var(--blue); background:var(--blue-light); }
.file-upload-icon { width:48px; height:48px; background:var(--blue-light); border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto .8rem; }
.file-upload-icon svg { width:24px; height:24px; fill:var(--blue); }
.file-upload-text { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.file-upload-sub { font-size:12px; color:var(--text-muted); }
.file-upload-btn { display:inline-flex; align-items:center; gap:6px; background:var(--blue); color:#fff; padding:8px 20px; border-radius:50px; font-size:13px; font-weight:700; margin-top:1rem; cursor:pointer; border:none; }
.pr-submit-btn { width:100%; background:var(--blue); color:#fff; padding:15px; border-radius:12px; border:none; font-size:16px; font-weight:700; cursor:pointer; transition:all .3s; box-shadow:0 6px 30px rgba(26,127,212,.4); display:flex; align-items:center; justify-content:center; gap:10px; }
.pr-submit-btn:hover { background:var(--blue-dark); transform:translateY(-2px); }
.pr-submit-btn svg { width:20px; height:20px; fill:#fff; }
.info-card { background:#fff; border-radius:18px; border:1px solid var(--border); overflow:hidden; }
.info-card-header { background:var(--blue-black); padding:1.2rem 1.5rem; display:flex; align-items:center; gap:10px; }
.info-card-header svg { width:18px; height:18px; fill:var(--blue-mid); }
.info-card-header span { font-size:15px; font-weight:700; color:#fff; }
.info-card-body { padding:1.2rem 1.5rem; }
.feature-item { display:flex; gap:12px; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--border); }
.feature-item:last-child { border-bottom:none; }
.feature-icon { width:34px; height:34px; background:var(--blue-light); border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.feature-icon svg { width:16px; height:16px; fill:var(--blue); }
.feature-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; }
.feature-desc { font-size:12px; color:var(--text-muted); line-height:1.5; }
.branch-item { display:flex; gap:12px; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--border); }
.branch-item:last-child { border-bottom:none; }
.branch-detail { flex:1; }
.branch-name { font-size:14px; font-weight:700; color:var(--text); margin-bottom:3px; }
.branch-map { font-size:12px; color:var(--blue); font-weight:600; cursor:pointer; }
.success-ref { font-size:13px; color:var(--text-muted); }



.partners-section {
  background: linear-gradient(135deg, #042C53 0%, #0C447C 50%, #042C53 100%);
  padding: 5rem 2rem;
  overflow: hidden;
  position: relative;
}
.partners-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.partners-marquee-wrap {
  margin-top: 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.partners-marquee {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marqueeSlide 35s linear infinite;
}
.partners-marquee:hover { animation-play-state: paused; }
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partner-card {
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1.2rem 1.8rem;
  backdrop-filter: blur(8px);
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  cursor: default;
  min-width: 220px;
}
.partner-card:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.partner-card-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.partner-logo-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
  padding: 8px;
}
.partner-logo-icon svg text { dominant-baseline: auto; }
.partner-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.partner-name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
}
.partner-badge-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  width: fit-content;
}
.partner-card:has(.partner-badge-tag:contains('بلاتيني')) .partner-badge-tag {
  background: linear-gradient(135deg, rgba(192,192,192,0.3), rgba(255,255,255,0.2));
  color: #e0e0e0;
}

/* ===== SOCIAL SIDEBAR ===== */
.social-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-100%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(4, 44, 83, 0.92);
  backdrop-filter: blur(16px);
  border-radius: 0 16px 16px 0;
  padding: 16px 8px;
  box-shadow: 4px 0 30px rgba(0,0,0,0.3);
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.5s;
  opacity: 0;
}
.social-sidebar.visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
.social-sidebar-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 4px;
}
.social-side-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all 0.25s ease;
  background: transparent;
}
.social-side-btn:hover {
  background: var(--sc, #1a7fd4);
  color: #fff;
  transform: translateX(3px) scale(1.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.social-side-btn svg { width: 18px; height: 18px; }
.social-side-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  background: #042C53;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.2s ease;
  border: 1px solid rgba(255,255,255,0.1);
}
.social-side-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #042C53;
}
.social-side-btn:hover .social-side-tooltip {
  opacity: 1;
  transform: translateX(0);
}
.social-side-divider {
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 4px 0;
}
.social-side-phone {
  background: rgba(24, 95, 165, 0.3);
}

/* ===== SHOWCASE PLAY BUTTON ===== */
.showcase-card {
  cursor: pointer;
}
.showcase-card-play-btn {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.showcase-card-play-btn svg {
  width: 28px;
  height: 28px;
  margin-right: -4px;
}
.showcase-card:hover .showcase-card-play-btn {
  background: rgba(255,0,0,0.8);
  border-color: #FF0000;
  transform: scale(1.15);
  box-shadow: 0 0 30px rgba(255,0,0,0.5);
}
.sc-watch-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 8px;
  letter-spacing: .5px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ===== YOUTUBE MODAL ===== */
.yt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
  padding: 1.5rem;
}
.yt-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.yt-modal {
  background: #0a0e1a;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 820px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.yt-modal-overlay.active .yt-modal {
  transform: scale(1) translateY(0);
}
.yt-modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s;
}
.yt-modal-close:hover {
  background: #e53935;
  color: #fff;
  border-color: #e53935;
}
.yt-modal-header {
  padding: 1.4rem 1.8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.yt-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.yt-modal-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.yt-modal-sub {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  margin-top: 4px;
}
.yt-iframe-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}
.yt-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.yt-modal-footer {
  padding: 1rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.yt-watch-full {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FF0000;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.2s;
}
.yt-watch-full:hover { opacity: 0.8; }
.yt-modal-channel {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
}
/* about page */
.about-hero {
  background: var(--blue-black);
  min-height: 60vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 5rem 3rem 4rem;
}
.about-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(26,127,212,.18) 0%, transparent 70%);
}
.about-hero-grid-lines {
  position: absolute; inset: 0; opacity: .04;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 60px 60px;
}
.about-hero-content { position: relative; z-index: 2; max-width: 700px; }
.ah-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--blue-mid);
  margin-bottom: 1.5rem;
}
.ah-eyebrow::before, .ah-eyebrow::after {
  content: ''; display: block; width: 30px; height: 1px; background: var(--blue-mid);
}
.about-hero h1 {
  font-family: 'Tajawal', sans-serif;
  font-size: 56px; font-weight: 900; color: #fff;
  line-height: 1.1; margin-bottom: 1.4rem;
}
.about-hero h1 em { color: var(--blue-mid); font-style: normal; }
.about-hero p {
  font-size: 17px; color: rgba(255,255,255,.65);
  line-height: 1.8; max-width: 520px;
}
.hero-year-badge {
  position: absolute; bottom: 3rem; left: 3rem; z-index: 2;
  text-align: center;
}
.hyb-num {
  font-family: 'Tajawal', sans-serif;
  font-size: 80px; font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.15);
  line-height: 1; display: block;
}
.hyb-lbl { font-size: 12px; color: rgba(255,255,255,.3); letter-spacing: 3px; text-transform: uppercase; }

/* FLIP CARDS */
.flip-section {
  background: var(--gray);
  padding: 5rem 3rem;
}
.flip-section-head { text-align: center; margin-bottom: 3.5rem; }
.flip-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin: 0 auto; }

.flip-card { height: 380px; perspective: 1200px; cursor: pointer; }
.flip-card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
  position: absolute; inset: 0;
  border-radius: 22px; overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-front {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.2rem; padding: 2.5rem; text-align: center;
}
.flip-front-icon {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.flip-front-icon svg { width: 38px; height: 38px; }
.flip-front h3 {
  font-family: 'Tajawal', sans-serif;
  font-size: 28px; font-weight: 900; color: #fff;
}
.flip-front p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.6; }
.flip-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,.45);
  margin-top: .5rem;
  animation: floatHint 2s ease-in-out infinite;
}
@keyframes floatHint { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }
.flip-hint svg { width: 14px; height: 14px; fill: rgba(255,255,255,.45); }

.flip-back {
  background: #fff; border: 1.5px solid var(--border);
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  padding: 2.5rem; justify-content: center;
}
.flip-back-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 8px;
}
.flip-back-tag::before { content:''; width:20px; height:2px; background:var(--blue); }
.flip-back h3 {
  font-family: 'Tajawal', sans-serif;
  font-size: 26px; font-weight: 900; color: var(--text);
  margin-bottom: 1rem; line-height: 1.2;
}
.flip-back p {
  font-size: 15px; color: var(--text-muted);
  line-height: 1.8; margin-bottom: 1.5rem;
}
.flip-back-quote {
  border-right: 3px solid var(--blue);
  padding-right: 1rem;
  font-size: 16px; font-weight: 700;
  color: var(--blue-dark); font-style: italic;
  line-height: 1.5;
}

/* VISION */
.vision-section {
  padding: 6rem 3rem;
  background: var(--blue-black);
  position: relative; overflow: hidden;
}
.vision-section::before {
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,127,212,.12),transparent 70%);
  top:-200px;right:-100px;
}
.vision-section::after {
  content:'';position:absolute;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,127,212,.08),transparent 70%);
  bottom:-100px;left:-50px;
}
.vision-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.vision-text .vt-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--blue-mid);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
}
.vision-text .vt-eyebrow::before { content:''; width:24px; height:1px; background:var(--blue-mid); }
.vision-text h2 {
  font-family: 'Tajawal', sans-serif;
  font-size: 44px; font-weight: 900; color: #fff;
  margin-bottom: 1.5rem; line-height: 1.15;
}
.vision-text h2 span { color: var(--blue-mid); }
.vision-text p {
  font-size: 16px; color: rgba(255,255,255,.65);
  line-height: 1.9; margin-bottom: 1.5rem;
}
.vision-pillars { display: flex; flex-direction: column; gap: 14px; }
.vp-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 1rem 1.2rem;
  transition: all .3s;
}
.vp-item:hover { background: rgba(26,127,212,.12); border-color: rgba(26,127,212,.3); }
.vp-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(26,127,212,.2);
  display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
}
.vp-icon svg { width: 20px; height: 20px; fill: var(--blue-mid); }
.vp-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.vp-desc { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.5; }
.vision-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vn-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 2rem; text-align: center;
  transition: all .4s;
}
.vn-card:hover {
  background: rgba(26,127,212,.15);
  border-color: rgba(26,127,212,.4);
  transform: translateY(-4px);
}
.vn-num {
  font-family: 'Tajawal', sans-serif;
  font-size: 46px; font-weight: 900; color: var(--blue-mid);
  display: block; line-height: 1;
  margin-bottom: .4rem;
}
.vn-lbl { font-size: 13px; color: rgba(255,255,255,.5); }

/* MISSION */
.mission-section { padding: 6rem 3rem; background: #fff; }
.mission-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.mission-visual {
  position: relative; height: 480px;
}
.mv-card {
  position: absolute; border-radius: 20px;
  overflow: hidden; transition: all .4s;
  box-shadow: 0 20px 60px rgba(26,127,212,.15);
}
.mv-card:hover { transform: scale(1.03); box-shadow: 0 30px 80px rgba(26,127,212,.2); }
.mv-main {
  width: 300px; height: 340px; top: 0; right: 0;
  background: linear-gradient(135deg, var(--blue-black), var(--blue-deeper));
  display: flex; align-items: center; justify-content: center;
}
.mv-main-icon { text-align: center; }
.mv-main-icon svg { width: 90px; height: 90px; fill: rgba(26,127,212,.4); }
.mv-main-num {
  font-family: 'Tajawal', sans-serif;
  font-size: 22px; font-weight: 900; color: var(--blue-mid);
  margin-top: .5rem;
}
.mv-main-lbl { font-size: 13px; color: rgba(255,255,255,.5); }
.mv-accent {
  width: 220px; height: 220px; bottom: 0; left: 0;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
}
.mv-accent svg { width: 44px; height: 44px; fill: rgba(255,255,255,.5); margin-bottom: .5rem; }
.mv-accent-text { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.4; }
.mv-dot {
  position: absolute; width: 14px; height: 14px;
  border-radius: 50%; background: var(--blue-mid);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  box-shadow: 0 0 0 8px rgba(26,127,212,.15), 0 0 0 16px rgba(26,127,212,.06);
  animation: pulseDot 2.5s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 8px rgba(26,127,212,.15), 0 0 0 16px rgba(26,127,212,.06); }
  50% { box-shadow: 0 0 0 14px rgba(26,127,212,.1), 0 0 0 28px rgba(26,127,212,.04); }
}
.mission-text .mt-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
}
.mission-text .mt-eyebrow::before { content:''; width:24px; height:1px; background:var(--blue); }
.mission-text h2 {
  font-family: 'Tajawal', sans-serif;
  font-size: 40px; font-weight: 900; color: var(--text);
  margin-bottom: 1.2rem; line-height: 1.2;
}
.mission-text h2 span { color: var(--blue); }
.mission-text p {
  font-size: 16px; color: var(--text-muted);
  line-height: 1.9; margin-bottom: 2rem;
}
.mission-values { display: flex; flex-direction: column; gap: 12px; }
.mv-val {
  display: flex; gap: 12px; align-items: center;
  padding: .9rem 1.2rem; background: var(--gray);
  border-radius: 12px; border: 1px solid var(--border);
  transition: all .3s;
}
.mv-val:hover { background: var(--blue-light); border-color: var(--blue-pale); }
.mv-val-check {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--blue-light); display: flex;
  align-items: center; justify-content: center; flex: 0 0 32px;
}
.mv-val-check svg { width: 16px; height: 16px; fill: var(--blue); }
.mv-val-text { font-size: 14px; font-weight: 600; color: var(--text); }

/* BRANCHES / MAPS */
.branches-section { padding: 5rem 3rem; background: var(--gray); }
.branches-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.branch-card {
  background: #fff; border-radius: 22px;
  border: 1px solid var(--border); overflow: hidden;
  transition: all .4s;
}
.branch-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(26,127,212,.12);
  border-color: var(--blue-pale);
}
.branch-map-frame {
  width: 100%; height: 220px; border: none; display: block;
  filter: grayscale(30%);
  transition: filter .3s;
}
.branch-card:hover .branch-map-frame { filter: grayscale(0%); }
.branch-info { padding: 1.5rem; }
.bi-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 12px;
  border-radius: 50px; margin-bottom: .8rem;
}
.bi-badge.gold { background: #FEF3C7; color: #92400E; }
.bi-badge.platinum { background: #EDE9FE; color: #5B21B6; }
.bi-badge.silver { background: var(--blue-light); color: var(--blue-dark); }
.bi-city { font-family:'Tajawal',sans-serif; font-size:22px; font-weight:900; color:var(--text); margin-bottom:.4rem; }
.bi-address { font-size:13px; color:var(--text-muted); line-height:1.5; margin-bottom:1rem; }
.bi-contacts { display:flex; flex-direction:column; gap:6px; margin-bottom:1rem; }
.bi-contact { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text); text-decoration:none; transition:color .2s; }
.bi-contact:hover { color:var(--blue); }
.bi-contact svg { width:14px; height:14px; fill:var(--text-muted); flex:0 0 14px; }
.bi-contact:hover svg { fill:var(--blue); }
.bi-map-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:10px; border:1.5px solid var(--border);
  border-radius:10px; font-size:13px; font-weight:700;
  color:var(--blue); text-decoration:none; transition:all .3s;
  background:#fff;
}
.bi-map-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.bi-map-btn svg { width:14px; height:14px; fill:currentColor; }

/* TEAM */
.team-section { padding: 5rem 3rem; background: #fff; }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.team-card {
  text-align: center; padding: 2rem 1.5rem;
  background: var(--gray); border-radius: 20px;
  border: 1px solid var(--border); transition: all .4s;
}
.team-card:hover { transform: translateY(-5px); box-shadow: 0 16px 50px rgba(26,127,212,.1); border-color: var(--blue-pale); }
.team-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-black), var(--blue-deeper));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; font-size: 26px; font-weight: 900;
  color: var(--blue-mid); font-family: 'Tajawal', sans-serif;
  border: 3px solid var(--blue-light);
}
.team-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.team-role { font-size: 13px; color: var(--blue); font-weight: 600; margin-bottom: .5rem; }
.team-exp { font-size: 12px; color: var(--text-muted); }

/* TIMELINE */
.timeline-section { padding: 5rem 3rem; background: var(--blue-black); }
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 2rem 0; }
.timeline::before {
  content:''; position:absolute; right:50%; top:0; bottom:0;
  width:2px; background:linear-gradient(to bottom, transparent, var(--blue), transparent);
  transform:translateX(50%);
}
.tl-item { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; margin-bottom:3rem; }
.tl-content-right { text-align:left; }
.tl-content-left { text-align:right; }
.tl-dot {
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); border:4px solid var(--blue-black);
  display:flex; align-items:center; justify-content:center;
  font-family:'Tajawal',sans-serif; font-size:11px; font-weight:700;
  color:#fff; flex:0 0 40px; z-index:1; position:relative;
  box-shadow:0 0 0 4px rgba(26,127,212,.3);
}
.tl-year { font-family:'Tajawal',sans-serif; font-size:18px; font-weight:900; color:var(--blue-mid); margin-bottom:.4rem; }
.tl-title { font-size:15px; font-weight:700; color:#fff; margin-bottom:.3rem; }
.tl-desc { font-size:13px; color:rgba(255,255,255,.5); line-height:1.5; }
.tl-item:nth-child(even) .tl-content-right { order:3; text-align:right; }
.tl-item:nth-child(even) .tl-content-left { order:1; text-align:left; }

/* RESPONSIVE */
@media(max-width:768px){
  .about-hero{padding:5rem 1.2rem 3rem;min-height:auto}
  .about-hero h1{font-size:34px}
  .hero-year-badge{display:none}
  .flip-section{padding:3rem 1.2rem}
  .flip-cards-row{grid-template-columns:1fr;gap:20px}
  .flip-card{height:320px}
  .vision-section{padding:3rem 1.2rem}
  .vision-inner{grid-template-columns:1fr;gap:2.5rem}
  .vision-numbers{grid-template-columns:1fr 1fr}
  .vn-num{font-size:36px}
  .mission-section{padding:3rem 1.2rem}
  .mission-inner{grid-template-columns:1fr;gap:2.5rem}
  .mission-visual{height:280px}
  .mv-main{width:220px;height:250px}
  .mv-accent{width:160px;height:160px}
  .branches-section{padding:3rem 1.2rem}
  .branches-grid{grid-template-columns:1fr}
  .team-section{padding:3rem 1.2rem}
  .team-grid{grid-template-columns:1fr 1fr;gap:14px}
  .timeline-section{padding:3rem 1.2rem}
  .timeline::before{right:20px}
  .tl-item{grid-template-columns:auto 1fr;gap:1rem}
  .tl-content-right{display:none}
  .tl-item:nth-child(even) .tl-content-right{display:none}
  .tl-item:nth-child(even) .tl-content-left{order:2;text-align:right}
  .tl-item:nth-child(even) .tl-dot{order:1}
}
/* Showcase overlay fix to show play btn */
.showcase-card-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.showcase-card-text { text-align: center; }
/* ── FINAL MISSING ── */
.card-actions { display:flex; gap:8px; margin-top:.8rem; }
.feature-check { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.feature-check svg { width:15px; height:15px; fill:var(--green); }
.old { font-size:12px; color:#aaa; text-decoration:line-through; }
.price-group { display:flex; flex-direction:column; gap:2px; }
.product-desc { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:.8rem; }
.product-price-section { margin-top:.8rem; }
.val { font-family:'Tajawal',sans-serif; font-weight:700; color:var(--blue-dark); }

/* ── PROJECT REQUEST FOOTER ── */
.pr-footer { background:#030f1d; padding:3rem; color:rgba(255,255,255,.5); }
.pr-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:1.5rem; }
.pr-footer-logo img { height:44px; filter:brightness(0) invert(1); margin-bottom:1rem; }
.pr-footer-tagline { font-size:13px; line-height:1.7; }
.pr-footer-col { }
.pr-footer-col h4 { font-size:14px; font-weight:700; color:#fff; margin-bottom:1rem; }
.pr-footer-col a { display:block; font-size:13px; color:rgba(255,255,255,.45); margin-bottom:.6rem; transition:color .3s; }
.pr-footer-col a:hover { color:var(--blue-mid); }
.pr-social-links { display:flex; gap:8px; margin-top:1rem; }
.pr-social-link { width:36px; height:36px; background:rgba(255,255,255,.06); border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.pr-social-link:hover { background:var(--blue); }
.pr-social-link svg { width:17px; height:17px; fill:rgba(255,255,255,.6); }
.pr-social-link:hover svg { fill:#fff; }
.pr-footer-bottom { display:flex; justify-content:space-between; font-size:12px; flex-wrap:wrap; gap:.5rem; }
.pr-footer-bottom-links { display:flex; gap:1.2rem; }
.pr-footer-bottom-links a { color:rgba(255,255,255,.4); transition:color .3s; }
.pr-footer-bottom-links a:hover { color:var(--blue-mid); }
.partners-section {
  background: linear-gradient(135deg, #042C53 0%, #0C447C 50%, #042C53 100%);
  padding: 5rem 2rem;
  overflow: hidden;
  position: relative;
}
.partners-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.partners-marquee-wrap {
  margin-top: 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.partners-marquee {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marqueeSlide 35s linear infinite;
}
.partners-marquee:hover { animation-play-state: paused; }
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partner-card {
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1.2rem 1.8rem;
  backdrop-filter: blur(8px);
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  cursor: default;
  min-width: 220px;
}
.partner-card:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.partner-card-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.partner-logo-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
  padding: 8px;
}
.partner-logo-icon svg text { dominant-baseline: auto; }
.partner-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.partner-name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
}
.partner-badge-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  width: fit-content;
}
.partner-card:has(.partner-badge-tag:contains('بلاتيني')) .partner-badge-tag {
  background: linear-gradient(135deg, rgba(192,192,192,0.3), rgba(255,255,255,0.2));
  color: #e0e0e0;
}

/* ===== SOCIAL SIDEBAR ===== */
.social-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-100%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(4, 44, 83, 0.92);
  backdrop-filter: blur(16px);
  border-radius: 0 16px 16px 0;
  padding: 16px 8px;
  box-shadow: 4px 0 30px rgba(0,0,0,0.3);
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.5s;
  opacity: 0;
}
.social-sidebar.visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
.social-sidebar-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 4px;
}
.social-side-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all 0.25s ease;
  background: transparent;
}
.social-side-btn:hover {
  background: var(--sc, #1a7fd4);
  color: #fff;
  transform: translateX(3px) scale(1.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.social-side-btn svg { width: 18px; height: 18px; }
.social-side-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  background: #042C53;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.2s ease;
  border: 1px solid rgba(255,255,255,0.1);
}
.social-side-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #042C53;
}
.social-side-btn:hover .social-side-tooltip {
  opacity: 1;
  transform: translateX(0);
}
.social-side-divider {
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 4px 0;
}
.social-side-phone {
  background: rgba(24, 95, 165, 0.3);
}

/* ===== SHOWCASE PLAY BUTTON ===== */
.showcase-card {
  cursor: pointer;
}
.showcase-card-play-btn {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.showcase-card-play-btn svg {
  width: 28px;
  height: 28px;
  margin-right: -4px;
}
.showcase-card:hover .showcase-card-play-btn {
  background: rgba(255,0,0,0.8);
  border-color: #FF0000;
  transform: scale(1.15);
  box-shadow: 0 0 30px rgba(255,0,0,0.5);
}
.sc-watch-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 8px;
  letter-spacing: .5px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ===== YOUTUBE MODAL ===== */
.yt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
  padding: 1.5rem;
}
.yt-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.yt-modal {
  background: #0a0e1a;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 820px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.yt-modal-overlay.active .yt-modal {
  transform: scale(1) translateY(0);
}
.yt-modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s;
}
.yt-modal-close:hover {
  background: #e53935;
  color: #fff;
  border-color: #e53935;
}
.yt-modal-header {
  padding: 1.4rem 1.8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.yt-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.yt-modal-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.yt-modal-sub {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  margin-top: 4px;
}
.yt-iframe-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}
.yt-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.yt-modal-footer {
  padding: 1rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.yt-watch-full {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FF0000;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.2s;
}
.yt-watch-full:hover { opacity: 0.8; }
.yt-modal-channel {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
}

/* Showcase overlay fix to show play btn */
.showcase-card-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.showcase-card-text { text-align: center; }

/* ===== LOGIN BUTTON IN NAVBAR ===== */
.nav-login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.nav-login-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-1px);
}

/* ===== LOGIN OVERLAY ===== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.login-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ===== LOGIN MODAL ===== */
.login-modal {
  display: flex;
  width: 100%;
  max-width: 860px;
  min-height: 540px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  transform: scale(0.93) translateY(24px);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.login-overlay.active .login-modal {
  transform: scale(1) translateY(0);
}

/* ===== CLOSE BUTTON ===== */
.login-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 20;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.login-close:hover {
  background: #e53935;
  color: #fff;
  border-color: #e53935;
}

/* ===== DECO PANEL (LEFT) ===== */
.login-deco {
  width: 42%;
  background: linear-gradient(155deg, #042C53 0%, #0C447C 55%, #185FA5 100%);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.login-deco::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='rgba(255,255,255,0.06)'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.login-deco-logo img {
  height: 48px;
  width: auto;
  margin-bottom: 1.8rem;
  filter: brightness(0) invert(1);
}
.login-deco-fallback {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.12);
  border-radius: 14px;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.8rem;
}
.login-deco-title {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: .7rem;
  position: relative;
}
.login-deco-title span {
  background: linear-gradient(90deg, #60c6ff, #a8e6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-deco-sub {
  color: rgba(255,255,255,0.55);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 2rem;
  position: relative;
}
.login-deco-stats {
  display: flex;
  gap: 1.2rem;
  position: relative;
}
.ld-stat {
  text-align: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: .6rem .9rem;
  flex: 1;
}
.ld-stat span {
  display: block;
  color: #60c6ff;
  font-size: 18px;
  font-weight: 800;
}
.ld-stat small {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
}
.login-deco-circles .ldc-1,
.login-deco-circles .ldc-2,
.login-deco-circles .ldc-3 {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
}
.ldc-1 { width: 200px; height: 200px; bottom: -60px; right: -60px; }
.ldc-2 { width: 140px; height: 140px; bottom: -20px; right: -20px; background: rgba(255,255,255,0.03); }
.ldc-3 { width: 80px; height: 80px; top: 30px; right: -30px; }

/* ===== FORM PANEL (RIGHT) ===== */
.login-form-panel {
  flex: 1;
  background: #fff;
  padding: 2.2rem 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ===== TABS ===== */
.login-tabs {
  display: flex;
  gap: 4px;
  background: #f1f4f8;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1.8rem;
}
.login-tab {
  flex: 1;
  padding: 9px;
  border-radius: 9px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: all 0.25s;
}
.login-tab.active {
  background: #fff;
  color: #042C53;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== FORM ELEMENTS ===== */
.login-form-desc {
  color: #64748b;
  font-size: 13.5px;
  margin-bottom: 1.4rem;
}
.lf-group {
  margin-bottom: 1.1rem;
}
.lf-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.lf-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.lf-input-wrap > svg:first-child {
  position: absolute;
  right: 13px;
  width: 18px;
  height: 18px;
  fill: #9ca3af;
  pointer-events: none;
}
.lf-input {
  width: 100%;
  padding: 11px 42px 11px 40px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
  transition: all 0.2s;
  font-family: inherit;
  direction: rtl;
}
.lf-input:focus {
  outline: none;
  border-color: #185FA5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
}
.lf-eye {
  position: absolute;
  left: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  padding: 0;
  transition: color 0.2s;
}
.lf-eye:hover { color: #185FA5; }

.lf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.3rem;
  margin-top: -.2rem;
}
.lf-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}
.lf-check input { accent-color: #185FA5; width: 15px; height: 15px; }
.lf-forgot {
  font-size: 13px;
  color: #185FA5;
  text-decoration: none;
  font-weight: 600;
}
.lf-forgot:hover { text-decoration: underline; }

.lf-submit {
  width: 100%;
  background: linear-gradient(135deg, #042C53, #185FA5);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(4,44,83,0.3);
  margin-bottom: 1.2rem;
  font-family: inherit;
}
.lf-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4,44,83,0.4);
}
.lf-submit:active { transform: translateY(0); }

.lf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cbd5e1;
  font-size: 12px;
  margin-bottom: 1rem;
}
.lf-divider::before, .lf-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.lf-divider span { color: #94a3b8; white-space: nowrap; }

.lf-whatsapp {
  width: 100%;
  background: #fff;
  border: 1.5px solid #25D366;
  color: #128C7E;
  padding: 11px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: inherit;
}
.lf-whatsapp:hover {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}

.lf-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
.lf-terms {
  margin-bottom: 1.2rem;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}
.lf-terms a { color: #185FA5; text-decoration: none; font-weight: 600; }
.lf-terms a:hover { text-decoration: underline; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .login-modal { flex-direction: column; max-height: 95vh; overflow-y: auto; }
  .login-deco { width: 100%; padding: 1.8rem; min-height: unset; }
  .login-deco-stats { display: none; }
  .login-deco-title { font-size: 20px; }
  .login-form-panel { padding: 1.5rem; }
  .lf-row2 { grid-template-columns: 1fr; }
}

.navbar {
  background-color: #042C53 !important; /* نفس اللون الداكن للـ topbar */
  color: #ffffff !important;
}
.navbar .nav-links a {
  color: #ffffff !important;
}
.navbar .nav-links a:hover,
.navbar .nav-links a.active {
  color: #ffd700 !important; /* ذهبي عند التحديد */
}




:root{--blue:#1a7fd4;--blue-dark:#0d5fa3;--blue-deeper:#0a3d6b;--blue-black:#061e35;--blue-light:#e8f4fd;--blue-mid:#4a9ee0;--gray:#f5f7fa;--text:#1a2332;--text-muted:#6b7c93;--border:#e8edf2}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Cairo',sans-serif;color:var(--text);background:var(--gray)}

.navbar{background:var(--blue-black);padding:0 3rem;height:72px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 30px rgba(0,0,0,0.3)}
.nav-logo img{height:46px;filter:brightness(0) invert(1)}
.nav-secure{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.6);font-size:13px}
.nav-secure svg{width:16px;height:16px;fill:#27ae60}

/* STEPS */
.steps-bar{background:#fff;border-bottom:1px solid var(--border);padding:1.5rem 3rem}
.steps{display:flex;align-items:center;justify-content:center;gap:0}
.step{display:flex;align-items:center;gap:10px}
.step-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:0 0 36px;transition:all .3s}
.step-num.done{background:#27ae60;color:#fff}
.step-num.active{background:var(--blue);color:#fff;box-shadow:0 4px 16px rgba(26,127,212,0.4)}
.step-num.pending{background:var(--gray);color:var(--text-muted);border:2px solid var(--border)}
.step-label{font-size:13px;font-weight:600}
.step-label.active{color:var(--blue)}
.step-label.done{color:#27ae60}
.step-label.pending{color:var(--text-muted)}
.step-line{width:60px;height:2px;margin:0 10px;transition:background .3s}
.step-line.done{background:#27ae60}
.step-line.pending{background:var(--border)}

/* LAYOUT */
.checkout-wrap{display:grid;grid-template-columns:1fr 420px;gap:24px;padding:2.5rem 3rem;align-items:start}

/* FORMS */
.checkout-form-section{display:flex;flex-direction:column;gap:20px}

.form-card{background:#fff;border-radius:20px;border:1px solid var(--border);overflow:hidden}
.form-card-header{padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--gray)}
.form-card-header-icon{width:36px;height:36px;background:var(--blue-light);border-radius:10px;display:flex;align-items:center;justify-content:center}
.form-card-header-icon svg{width:18px;height:18px;fill:var(--blue)}
.form-card-title{font-size:16px;font-weight:700;color:var(--text)}
.form-card-body{padding:1.5rem}

.form-grid{display:grid;gap:14px}
.form-grid-2{grid-template-columns:1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:13px;font-weight:600;color:var(--text)}
.form-label span{color:#e74c3c;margin-right:2px}
.form-input{padding:12px 16px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;font-family:'Cairo',sans-serif;color:var(--text);outline:none;transition:all .2s}
.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,127,212,0.1)}
.form-input::placeholder{color:var(--text-muted)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7c93'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;background-size:20px;cursor:pointer}
.form-hint{font-size:12px;color:var(--text-muted)}

/* SHIPPING OPTIONS */
.shipping-options{display:flex;flex-direction:column;gap:10px}
.shipping-opt{display:flex;align-items:center;gap:12px;padding:1rem 1.2rem;border:1.5px solid var(--border);border-radius:14px;cursor:pointer;transition:all .3s}
.shipping-opt:hover{border-color:var(--blue-mid)}
.shipping-opt.selected{border-color:var(--blue);background:var(--blue-light)}
.shipping-opt input{accent-color:var(--blue);width:18px;height:18px}
.shipping-opt-info{flex:1}
.shipping-opt-name{font-size:14px;font-weight:700;color:var(--text)}
.shipping-opt-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.shipping-opt-price{font-family:'Tajawal',sans-serif;font-size:18px;font-weight:900;color:var(--blue-dark)}
.shipping-opt-price.free{color:#27ae60}

/* PAYMENT METHODS */
.payment-tabs{display:flex;gap:10px;margin-bottom:1.2rem}
.pay-tab{flex:1;padding:12px;border:1.5px solid var(--border);border-radius:12px;text-align:center;cursor:pointer;transition:all .3s;background:#fff}
.pay-tab.active{border-color:var(--blue);background:var(--blue-light)}
.pay-tab-icon{font-size:22px;margin-bottom:4px}
.pay-tab-label{font-size:12px;font-weight:600;color:var(--text-muted)}
.pay-tab.active .pay-tab-label{color:var(--blue)}

.card-icons{display:flex;gap:8px;margin-bottom:1rem}
.card-icon{padding:6px 12px;border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:700;color:var(--text-muted)}
.card-icon.visa{color:#1a1f71}
.card-icon.mc{color:#eb001b}
.card-icon.mada{color:#009b3a}

.card-field{position:relative}
.card-field .lock-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%)}
.card-field .lock-icon svg{width:16px;height:16px;fill:var(--text-muted)}

/* ORDER SUMMARY */
.order-summary{background:#fff;border-radius:20px;border:1px solid var(--border);overflow:hidden;position:sticky;top:20px}
.os-header{background:var(--blue-black);padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.os-title{font-size:16px;font-weight:700;color:#fff}
.os-count{background:rgba(255,255,255,0.15);color:#fff;font-size:12px;padding:3px 10px;border-radius:50px}
.os-items{padding:1.2rem 1.5rem;border-bottom:1px solid var(--border)}
.os-item{display:flex;gap:12px;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--border)}
.os-item:last-child{border-bottom:none}
.os-item-img{width:56px;height:56px;background:var(--blue-black);border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 56px}
.os-item-img svg{width:26px;height:26px;fill:var(--blue-mid)}
.os-item-info{flex:1}
.os-item-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.os-item-specs{font-size:11px;color:var(--text-muted)}
.os-item-qty{font-size:12px;color:var(--text-muted);margin-top:2px}
.os-item-price{font-family:'Tajawal',sans-serif;font-size:16px;font-weight:700;color:var(--blue-dark);white-space:nowrap}

.os-promo{padding:1rem 1.5rem;border-bottom:1px solid var(--border)}
.promo-row{display:flex;gap:8px}
.promo-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:'Cairo',sans-serif;outline:none;transition:border .2s}
.promo-input:focus{border-color:var(--blue)}
.promo-btn{background:var(--gray);border:1.5px solid var(--border);padding:10px 16px;border-radius:10px;font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;color:var(--text);transition:all .2s}
.promo-btn:hover{border-color:var(--blue);color:var(--blue)}

.os-totals{padding:1.2rem 1.5rem;border-bottom:1px solid var(--border)}
.os-row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;color:var(--text-muted)}
.os-row .val{color:var(--text);font-weight:600}
.os-row.free .val{color:#27ae60;font-weight:700}
.os-row.discount .val{color:#e74c3c;font-weight:700}
.os-row.total{padding-top:12px;margin-top:6px;border-top:2px solid var(--border);font-size:16px;font-weight:700;color:var(--text)}
.os-row.total .val{font-family:'Tajawal',sans-serif;font-size:24px;font-weight:900;color:var(--blue-dark)}

.os-footer{padding:1.5rem}
.submit-btn{width:100%;background:var(--blue);color:#fff;padding:15px;border-radius:14px;font-size:16px;font-weight:700;font-family:'Cairo',sans-serif;border:none;cursor:pointer;transition:all .3s;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px}
.submit-btn:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 8px 30px rgba(26,127,212,0.4)}
.submit-btn svg{width:20px;height:20px;fill:#fff}

.security-badges{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:1rem}
.sec-badge{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}
.sec-badge svg{width:14px;height:14px;fill:var(--text-muted)}

/* SUCCESS MODAL */
.success-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:500;align-items:center;justify-content:center}
.success-overlay.show{display:flex}
.success-modal{background:#fff;border-radius:24px;padding:3rem;text-align:center;max-width:480px;width:90%;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.success-icon{width:80px;height:80px;background:#f0faf5;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;animation:checkAnim .6s .2s both}
@keyframes checkAnim{from{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}
.success-icon svg{width:40px;height:40px;fill:#27ae60}
.success-modal h2{font-family:'Tajawal',sans-serif;font-size:28px;font-weight:900;color:var(--text);margin-bottom:.5rem}
.success-modal p{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:.5rem}
.order-num{font-family:'Tajawal',sans-serif;font-size:22px;font-weight:900;color:var(--blue);margin:1rem 0}
.success-details{background:var(--gray);border-radius:14px;padding:1.2rem;margin:1.2rem 0;text-align:right}
.sd-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}
.sd-row .k{color:var(--text-muted)}
.sd-row .v{font-weight:700;color:var(--text)}
.success-btns{display:flex;gap:10px;margin-top:1.5rem}
.s-btn-main{flex:1;background:var(--blue);color:#fff;padding:13px;border-radius:12px;font-size:14px;font-weight:700;font-family:'Cairo',sans-serif;border:none;cursor:pointer}
.s-btn-sec{flex:1;background:var(--gray);color:var(--text);padding:13px;border-radius:12px;font-size:14px;font-weight:700;font-family:'Cairo',sans-serif;border:none;cursor:pointer}

.about-hero {
  background: var(--blue-black);
  min-height: 60vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 5rem 3rem 4rem;
}
.about-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(26,127,212,.18) 0%, transparent 70%);
}
.about-hero-grid-lines {
  position: absolute; inset: 0; opacity: .04;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 60px 60px;
}
.about-hero-content { position: relative; z-index: 2; max-width: 700px; }
.ah-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--blue-mid);
  margin-bottom: 1.5rem;
}
.ah-eyebrow::before, .ah-eyebrow::after {
  content: ''; display: block; width: 30px; height: 1px; background: var(--blue-mid);
}
.about-hero h1 {
  font-family: 'Tajawal', sans-serif;
  font-size: 56px; font-weight: 900; color: #fff;
  line-height: 1.1; margin-bottom: 1.4rem;
}
.about-hero h1 em { color: var(--blue-mid); font-style: normal; }
.about-hero p {
  font-size: 17px; color: rgba(255,255,255,.65);
  line-height: 1.8; max-width: 520px;
}
.hero-year-badge {
  position: absolute; bottom: 3rem; left: 3rem; z-index: 2;
  text-align: center;
}
.hyb-num {
  font-family: 'Tajawal', sans-serif;
  font-size: 80px; font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.15);
  line-height: 1; display: block;
}
.hyb-lbl { font-size: 12px; color: rgba(255,255,255,.3); letter-spacing: 3px; text-transform: uppercase; }

/* FLIP CARDS */
.flip-section {
  background: var(--gray);
  padding: 5rem 3rem;
}
.flip-section-head { text-align: center; margin-bottom: 3.5rem; }
.flip-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin: 0 auto; }

.flip-card { height: 380px; perspective: 1200px; cursor: pointer; }
.flip-card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
  position: absolute; inset: 0;
  border-radius: 22px; overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-front {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.2rem; padding: 2.5rem; text-align: center;
}
.flip-front-icon {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.flip-front-icon svg { width: 38px; height: 38px; }
.flip-front h3 {
  font-family: 'Tajawal', sans-serif;
  font-size: 28px; font-weight: 900; color: #fff;
}
.flip-front p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.6; }
.flip-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,.45);
  margin-top: .5rem;
  animation: floatHint 2s ease-in-out infinite;
}
@keyframes floatHint { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }
.flip-hint svg { width: 14px; height: 14px; fill: rgba(255,255,255,.45); }

.flip-back {
  background: #fff; border: 1.5px solid var(--border);
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  padding: 2.5rem; justify-content: center;
}
.flip-back-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 8px;
}
.flip-back-tag::before { content:''; width:20px; height:2px; background:var(--blue); }
.flip-back h3 {
  font-family: 'Tajawal', sans-serif;
  font-size: 26px; font-weight: 900; color: var(--text);
  margin-bottom: 1rem; line-height: 1.2;
}
.flip-back p {
  font-size: 15px; color: var(--text-muted);
  line-height: 1.8; margin-bottom: 1.5rem;
}
.flip-back-quote {
  border-right: 3px solid var(--blue);
  padding-right: 1rem;
  font-size: 16px; font-weight: 700;
  color: var(--blue-dark); font-style: italic;
  line-height: 1.5;
}

/* VISION */
.vision-section {
  padding: 6rem 3rem;
  background: var(--blue-black);
  position: relative; overflow: hidden;
}
.vision-section::before {
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,127,212,.12),transparent 70%);
  top:-200px;right:-100px;
}
.vision-section::after {
  content:'';position:absolute;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,127,212,.08),transparent 70%);
  bottom:-100px;left:-50px;
}
.vision-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.vision-text .vt-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--blue-mid);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
}
.vision-text .vt-eyebrow::before { content:''; width:24px; height:1px; background:var(--blue-mid); }
.vision-text h2 {
  font-family: 'Tajawal', sans-serif;
  font-size: 44px; font-weight: 900; color: #fff;
  margin-bottom: 1.5rem; line-height: 1.15;
}
.vision-text h2 span { color: var(--blue-mid); }
.vision-text p {
  font-size: 16px; color: rgba(255,255,255,.65);
  line-height: 1.9; margin-bottom: 1.5rem;
}
.vision-pillars { display: flex; flex-direction: column; gap: 14px; }
.vp-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 1rem 1.2rem;
  transition: all .3s;
}
.vp-item:hover { background: rgba(26,127,212,.12); border-color: rgba(26,127,212,.3); }
.vp-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(26,127,212,.2);
  display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
}
.vp-icon svg { width: 20px; height: 20px; fill: var(--blue-mid); }
.vp-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.vp-desc { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.5; }
.vision-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vn-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 2rem; text-align: center;
  transition: all .4s;
}
.vn-card:hover {
  background: rgba(26,127,212,.15);
  border-color: rgba(26,127,212,.4);
  transform: translateY(-4px);
}
.vn-num {
  font-family: 'Tajawal', sans-serif;
  font-size: 46px; font-weight: 900; color: var(--blue-mid);
  display: block; line-height: 1;
  margin-bottom: .4rem;
}
.vn-lbl { font-size: 13px; color: rgba(255,255,255,.5); }

/* MISSION */
.mission-section { padding: 6rem 3rem; background: #fff; }
.mission-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.mission-visual {
  position: relative; height: 480px;
}
.mv-card {
  position: absolute; border-radius: 20px;
  overflow: hidden; transition: all .4s;
  box-shadow: 0 20px 60px rgba(26,127,212,.15);
}
.mv-card:hover { transform: scale(1.03); box-shadow: 0 30px 80px rgba(26,127,212,.2); }
.mv-main {
  width: 300px; height: 340px; top: 0; right: 0;
  background: linear-gradient(135deg, var(--blue-black), var(--blue-deeper));
  display: flex; align-items: center; justify-content: center;
}
.mv-main-icon { text-align: center; }
.mv-main-icon svg { width: 90px; height: 90px; fill: rgba(26,127,212,.4); }
.mv-main-num {
  font-family: 'Tajawal', sans-serif;
  font-size: 22px; font-weight: 900; color: var(--blue-mid);
  margin-top: .5rem;
}
.mv-main-lbl { font-size: 13px; color: rgba(255,255,255,.5); }
.mv-accent {
  width: 220px; height: 220px; bottom: 0; left: 0;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
}
.mv-accent svg { width: 44px; height: 44px; fill: rgba(255,255,255,.5); margin-bottom: .5rem; }
.mv-accent-text { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.4; }
.mv-dot {
  position: absolute; width: 14px; height: 14px;
  border-radius: 50%; background: var(--blue-mid);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  box-shadow: 0 0 0 8px rgba(26,127,212,.15), 0 0 0 16px rgba(26,127,212,.06);
  animation: pulseDot 2.5s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 8px rgba(26,127,212,.15), 0 0 0 16px rgba(26,127,212,.06); }
  50% { box-shadow: 0 0 0 14px rgba(26,127,212,.1), 0 0 0 28px rgba(26,127,212,.04); }
}
.mission-text .mt-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
}
.mission-text .mt-eyebrow::before { content:''; width:24px; height:1px; background:var(--blue); }
.mission-text h2 {
  font-family: 'Tajawal', sans-serif;
  font-size: 40px; font-weight: 900; color: var(--text);
  margin-bottom: 1.2rem; line-height: 1.2;
}
.mission-text h2 span { color: var(--blue); }
.mission-text p {
  font-size: 16px; color: var(--text-muted);
  line-height: 1.9; margin-bottom: 2rem;
}
.mission-values { display: flex; flex-direction: column; gap: 12px; }
.mv-val {
  display: flex; gap: 12px; align-items: center;
  padding: .9rem 1.2rem; background: var(--gray);
  border-radius: 12px; border: 1px solid var(--border);
  transition: all .3s;
}
.mv-val:hover { background: var(--blue-light); border-color: var(--blue-pale); }
.mv-val-check {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--blue-light); display: flex;
  align-items: center; justify-content: center; flex: 0 0 32px;
}
.mv-val-check svg { width: 16px; height: 16px; fill: var(--blue); }
.mv-val-text { font-size: 14px; font-weight: 600; color: var(--text); }

/* BRANCHES / MAPS */
.branches-section { padding: 5rem 3rem; background: var(--gray); }
.branches-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.branch-card {
  background: #fff; border-radius: 22px;
  border: 1px solid var(--border); overflow: hidden;
  transition: all .4s;
}
.branch-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(26,127,212,.12);
  border-color: var(--blue-pale);
}
.branch-map-frame {
  width: 100%; height: 220px; border: none; display: block;
  filter: grayscale(30%);
  transition: filter .3s;
}
.branch-card:hover .branch-map-frame { filter: grayscale(0%); }
.branch-info { padding: 1.5rem; }
.bi-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 12px;
  border-radius: 50px; margin-bottom: .8rem;
}
.bi-badge.gold { background: #FEF3C7; color: #92400E; }
.bi-badge.platinum { background: #EDE9FE; color: #5B21B6; }
.bi-badge.silver { background: var(--blue-light); color: var(--blue-dark); }
.bi-city { font-family:'Tajawal',sans-serif; font-size:22px; font-weight:900; color:var(--text); margin-bottom:.4rem; }
.bi-address { font-size:13px; color:var(--text-muted); line-height:1.5; margin-bottom:1rem; }
.bi-contacts { display:flex; flex-direction:column; gap:6px; margin-bottom:1rem; }
.bi-contact { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text); text-decoration:none; transition:color .2s; }
.bi-contact:hover { color:var(--blue); }
.bi-contact svg { width:14px; height:14px; fill:var(--text-muted); flex:0 0 14px; }
.bi-contact:hover svg { fill:var(--blue); }
.bi-map-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:10px; border:1.5px solid var(--border);
  border-radius:10px; font-size:13px; font-weight:700;
  color:var(--blue); text-decoration:none; transition:all .3s;
  background:#fff;
}
.bi-map-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.bi-map-btn svg { width:14px; height:14px; fill:currentColor; }

/* TEAM */
.team-section { padding: 5rem 3rem; background: #fff; }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.team-card {
  text-align: center; padding: 2rem 1.5rem;
  background: var(--gray); border-radius: 20px;
  border: 1px solid var(--border); transition: all .4s;
}
.team-card:hover { transform: translateY(-5px); box-shadow: 0 16px 50px rgba(26,127,212,.1); border-color: var(--blue-pale); }
.team-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-black), var(--blue-deeper));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; font-size: 26px; font-weight: 900;
  color: var(--blue-mid); font-family: 'Tajawal', sans-serif;
  border: 3px solid var(--blue-light);
}
.team-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.team-role { font-size: 13px; color: var(--blue); font-weight: 600; margin-bottom: .5rem; }
.team-exp { font-size: 12px; color: var(--text-muted); }

/* TIMELINE */
.timeline-section { padding: 5rem 3rem; background: var(--blue-black); }
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 2rem 0; }
.timeline::before {
  content:''; position:absolute; right:50%; top:0; bottom:0;
  width:2px; background:linear-gradient(to bottom, transparent, var(--blue), transparent);
  transform:translateX(50%);
}
.tl-item { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; margin-bottom:3rem; }
.tl-content-right { text-align:left; }
.tl-content-left { text-align:right; }
.tl-dot {
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); border:4px solid var(--blue-black);
  display:flex; align-items:center; justify-content:center;
  font-family:'Tajawal',sans-serif; font-size:11px; font-weight:700;
  color:#fff; flex:0 0 40px; z-index:1; position:relative;
  box-shadow:0 0 0 4px rgba(26,127,212,.3);
}
.tl-year { font-family:'Tajawal',sans-serif; font-size:18px; font-weight:900; color:var(--blue-mid); margin-bottom:.4rem; }
.tl-title { font-size:15px; font-weight:700; color:#fff; margin-bottom:.3rem; }
.tl-desc { font-size:13px; color:rgba(255,255,255,.5); line-height:1.5; }
.tl-item:nth-child(even) .tl-content-right { order:3; text-align:right; }
.tl-item:nth-child(even) .tl-content-left { order:1; text-align:left; }

/* RESPONSIVE */
@media(max-width:768px){
  .about-hero{padding:5rem 1.2rem 3rem;min-height:auto}
  .about-hero h1{font-size:34px}
  .hero-year-badge{display:none}
  .flip-section{padding:3rem 1.2rem}
  .flip-cards-row{grid-template-columns:1fr;gap:20px}
  .flip-card{height:320px}
  .vision-section{padding:3rem 1.2rem}
  .vision-inner{grid-template-columns:1fr;gap:2.5rem}
  .vision-numbers{grid-template-columns:1fr 1fr}
  .vn-num{font-size:36px}
  .mission-section{padding:3rem 1.2rem}
  .mission-inner{grid-template-columns:1fr;gap:2.5rem}
  .mission-visual{height:280px}
  .mv-main{width:220px;height:250px}
  .mv-accent{width:160px;height:160px}
  .branches-section{padding:3rem 1.2rem}
  .branches-grid{grid-template-columns:1fr}
  .team-section{padding:3rem 1.2rem}
  .team-grid{grid-template-columns:1fr 1fr;gap:14px}
  .timeline-section{padding:3rem 1.2rem}
  .timeline::before{right:20px}
  .tl-item{grid-template-columns:auto 1fr;gap:1rem}
  .tl-content-right{display:none}
  .tl-item:nth-child(even) .tl-content-right{display:none}
  .tl-item:nth-child(even) .tl-content-left{order:2;text-align:right}
  .tl-item:nth-child(even) .tl-dot{order:1}
}




.values-section{position:relative;background:#03111f;padding:7rem 3rem 5rem;overflow:hidden}
.values-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");opacity:.5;pointer-events:none}
.values-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
.values-glow-1{width:600px;height:600px;background:radial-gradient(circle,rgba(26,127,212,.18),transparent 70%);top:-150px;right:-100px}
.values-glow-2{width:400px;height:400px;background:radial-gradient(circle,rgba(0,200,150,.08),transparent 70%);bottom:-100px;left:5%}
.values-header{text-align:center;position:relative;z-index:2;margin-bottom:4rem}
.vals-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#1a7fd4;margin-bottom:1.4rem}
.vals-eyebrow-line{display:block;width:40px;height:1px;background:linear-gradient(90deg,transparent,#1a7fd4)}
.vals-eyebrow-line:last-child{background:linear-gradient(90deg,#1a7fd4,transparent)}
.vals-title{font-family:'Tajawal',sans-serif;font-size:clamp(36px,5vw,58px);font-weight:900;color:#fff;line-height:1.1;margin-bottom:1.2rem}
.vals-title em{font-style:normal;background:linear-gradient(135deg,#1a7fd4,#00c896);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vals-sub{font-size:16px;color:rgba(255,255,255,.5);max-width:560px;margin:0 auto;line-height:1.8}
.vals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;position:relative;z-index:2}
.val-card{position:relative;border-radius:24px;cursor:default;opacity:0;transform:translateY(30px);animation:valFadeIn .6s cubic-bezier(.23,1,.32,1) forwards}
.val-card:nth-child(1){animation-delay:.1s}.val-card:nth-child(2){animation-delay:.2s}.val-card:nth-child(3){animation-delay:.3s}
.val-card:nth-child(4){animation-delay:.4s}.val-card:nth-child(5){animation-delay:.5s}.val-card:nth-child(6){animation-delay:.6s}
@keyframes valFadeIn{to{opacity:1;transform:translateY(0)}}
.val-card-inner{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:2.2rem 2rem;position:relative;overflow:hidden;transition:all .45s cubic-bezier(.23,1,.32,1);height:100%}
.val-card:hover .val-card-inner{background:rgba(26,127,212,.08);border-color:rgba(26,127,212,.35);transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 0 1px rgba(26,127,212,.2)}
.val-icon-wrap{position:relative;width:64px;height:64px;margin-bottom:1.4rem}
.val-icon-ring{position:absolute;inset:0;border-radius:18px;border:1.5px solid rgba(26,127,212,.25);transition:all .45s}
.val-card:hover .val-icon-ring{border-color:rgba(26,127,212,.6);box-shadow:0 0 20px rgba(26,127,212,.2);transform:scale(1.08) rotate(4deg)}
.val-icon{position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,127,212,.15),rgba(26,127,212,.05));border-radius:16px;display:flex;align-items:center;justify-content:center;transition:all .45s}
.val-card:hover .val-icon{background:linear-gradient(135deg,rgba(26,127,212,.3),rgba(0,200,150,.15))}
.val-icon svg{width:28px;height:28px;fill:#1a7fd4;transition:all .45s}
.val-card:hover .val-icon svg{fill:#5ab3f0;transform:scale(1.1)}
.val-num{position:absolute;top:1.8rem;left:1.8rem;font-family:'Tajawal',sans-serif;font-size:56px;font-weight:900;color:rgba(255,255,255,.03);line-height:1;transition:all .45s;user-select:none}
.val-card:hover .val-num{color:rgba(26,127,212,.08)}
.val-title{font-family:'Tajawal',sans-serif;font-size:20px;font-weight:900;color:#fff;margin-bottom:.7rem;line-height:1.3}
.val-desc{font-size:14px;color:rgba(255,255,255,.5);line-height:1.8;margin-bottom:1.2rem;transition:color .3s}
.val-card:hover .val-desc{color:rgba(255,255,255,.7)}
.val-tag{display:inline-flex;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#1a7fd4;padding:4px 12px;border:1px solid rgba(26,127,212,.25);border-radius:50px;background:rgba(26,127,212,.06);transition:all .3s}
.val-card:hover .val-tag{background:rgba(26,127,212,.15);border-color:rgba(26,127,212,.5);color:#5ab3f0}
.val-shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent 0%,transparent 40%,rgba(255,255,255,.03) 50%,transparent 60%,transparent 100%);opacity:0;transition:opacity .4s,transform .8s;transform:rotate(0deg);pointer-events:none;border-radius:24px}
.val-card:hover .val-shine{opacity:1;transform:rotate(180deg)}
.vals-bottom-bar{display:flex;align-items:center;justify-content:center;gap:0;margin:4rem auto 0;max-width:700px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:1.8rem 2rem;position:relative;z-index:2;backdrop-filter:blur(10px)}
.vbb-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;text-align:center}
.vbb-num{font-family:'Tajawal',sans-serif;font-size:38px;font-weight:900;background:linear-gradient(135deg,#1a7fd4,#00c896);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.vbb-lbl{font-size:13px;color:rgba(255,255,255,.4);font-weight:500}
.vbb-sep{width:1px;height:50px;background:rgba(255,255,255,.08);flex:0 0 1px;margin:0 1rem}
@media(max-width:768px){.vals-grid{grid-template-columns:1fr!important}.values-section{padding:4rem 1.5rem 3rem!important}.vals-bottom-bar{flex-direction:column;gap:1.5rem}.vbb-sep{width:80px;height:1px}}
@media(min-width:769px) and (max-width:900px){.vals-grid{grid-template-columns:repeat(2,1fr)!important}}



/* ===== PARTNERS UPGRADED ===== */
.partners-section {
  background: linear-gradient(135deg, #042C53 0%, #0C447C 50%, #042C53 100%);
  padding: 5rem 2rem;
  overflow: hidden;
  position: relative;
}
.partners-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.partners-marquee-wrap {
  margin-top: 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.partners-marquee {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marqueeSlide 35s linear infinite;
}
.partners-marquee:hover { animation-play-state: paused; }
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partner-card {
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1.2rem 1.8rem;
  backdrop-filter: blur(8px);
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  cursor: default;
  min-width: 220px;
}
.partner-card:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.partner-card-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.partner-logo-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
  padding: 8px;
}
.partner-logo-icon svg text { dominant-baseline: auto; }
.partner-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.partner-name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
}
.partner-badge-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  width: fit-content;
}
.partner-card:has(.partner-badge-tag:contains('بلاتيني')) .partner-badge-tag {
  background: linear-gradient(135deg, rgba(192,192,192,0.3), rgba(255,255,255,0.2));
  color: #e0e0e0;
}

/* ===== SOCIAL SIDEBAR ===== */
.social-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-100%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(4, 44, 83, 0.92);
  backdrop-filter: blur(16px);
  border-radius: 0 16px 16px 0;
  padding: 16px 8px;
  box-shadow: 4px 0 30px rgba(0,0,0,0.3);
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.5s;
  opacity: 0;
}
.social-sidebar.visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
.social-sidebar-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 4px;
}
.social-side-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all 0.25s ease;
  background: transparent;
}
.social-side-btn:hover {
  background: var(--sc, #1a7fd4);
  color: #fff;
  transform: translateX(3px) scale(1.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.social-side-btn svg { width: 18px; height: 18px; }
.social-side-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  background: #042C53;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.2s ease;
  border: 1px solid rgba(255,255,255,0.1);
}
.social-side-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #042C53;
}
.social-side-btn:hover .social-side-tooltip {
  opacity: 1;
  transform: translateX(0);
}
.social-side-divider {
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 4px 0;
}
.social-side-phone {
  background: rgba(24, 95, 165, 0.3);
}

/* ===== SHOWCASE PLAY BUTTON ===== */
.showcase-card {
  cursor: pointer;
}
.showcase-card-play-btn {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.showcase-card-play-btn svg {
  width: 28px;
  height: 28px;
  margin-right: -4px;
}
.showcase-card:hover .showcase-card-play-btn {
  background: rgba(255,0,0,0.8);
  border-color: #FF0000;
  transform: scale(1.15);
  box-shadow: 0 0 30px rgba(255,0,0,0.5);
}
.sc-watch-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 8px;
  letter-spacing: .5px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ===== YOUTUBE MODAL ===== */
.yt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
  padding: 1.5rem;
}
.yt-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.yt-modal {
  background: #0a0e1a;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 820px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.yt-modal-overlay.active .yt-modal {
  transform: scale(1) translateY(0);
}
.yt-modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s;
}
.yt-modal-close:hover {
  background: #e53935;
  color: #fff;
  border-color: #e53935;
}
.yt-modal-header {
  padding: 1.4rem 1.8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.yt-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.yt-modal-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.yt-modal-sub {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  margin-top: 4px;
}
.yt-iframe-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}
.yt-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.yt-modal-footer {
  padding: 1rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.yt-watch-full {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FF0000;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.2s;
}
.yt-watch-full:hover { opacity: 0.8; }
.yt-modal-channel {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
}

/* Showcase overlay fix to show play btn */
.showcase-card-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.showcase-card-text { text-align: center; }



<>
/* PAGE SPECIFIC */
.pr-page { background: var(--gray); min-height: 100vh; }

/* HERO */
.pr-hero {
  background: linear-gradient(135deg, var(--blue-black) 0%, var(--blue-deeper) 100%);
  padding: 5rem 3rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pr-hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(26,127,212,.07);
  top: -200px; left: 50%;
  transform: translateX(-50%);
}
.pr-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26,127,212,.2);
  border: 1px solid rgba(26,127,212,.4);
  color: var(--blue-pale);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 50px;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
}
.pr-hero h1 {
  font-family: 'Tajawal', sans-serif;
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  margin-bottom: .7rem;
  position: relative;
  z-index: 1;
}
.pr-hero p {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin: 0 auto;
}

/* STEPS */
.pr-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1.5rem 2rem;
  background: rgba(0,0,0,.15);
  position: relative;
  z-index: 1;
  margin-top: 2rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.pr-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}
.pr-step.active { color: #fff; }
.pr-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 28px;
}
.pr-step.active .pr-step-num { background: var(--blue); }
.pr-step.done .pr-step-num { background: #27ae60; }
.pr-step-line { width: 40px; height: 1px; background: rgba(255,255,255,.2); margin: 0 8px; }

/* FORM WRAPPER */
.pr-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  padding: 2.5rem 3rem;
  align-items: start;
}

/* FORM CARD */
.pr-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 20px;
}
.pr-card-header {
  padding: 1.2rem 1.5rem;
  background: var(--blue-black);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pr-card-icon {
  width: 36px; height: 36px;
  background: rgba(26,127,212,.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}
.pr-card-icon svg { width: 18px; height: 18px; fill: var(--blue-pale); }
.pr-card-title { font-size: 16px; font-weight: 700; color: #fff; }
.pr-card-body { padding: 1.8rem; }

/* FORM ELEMENTS */
.field-group { margin-bottom: 1.2rem; }
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.field-label .req { color: var(--blue); margin-right: 2px; }
.field-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-family: 'Cairo', sans-serif;
  color: var(--text);
  outline: none;
  transition: all .25s;
  background: #fff;
}
.field-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,127,212,.1); }
.field-input::placeholder { color: var(--text-muted); }
textarea.field-input { min-height: 110px; resize: vertical; }
.field-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7c93'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; background-size: 20px; cursor: pointer; }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

/* GRID FIELDS */
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* RADIO / CHECKBOX GROUPS */
.options-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .25s;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  user-select: none;
}
.option-item:hover { border-color: var(--blue-mid); background: var(--blue-light); }
.option-item.selected { border-color: var(--blue); background: var(--blue-light); color: var(--blue); }
.option-item input { display: none; }
.option-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  transition: all .2s;
}
.option-item.selected .option-dot { border-color: var(--blue); background: var(--blue); }
.option-item.selected .option-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: block; }
.option-icon { font-size: 18px; }

/* FILE UPLOAD */
.file-upload {
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  background: var(--gray);
}
.file-upload:hover { border-color: var(--blue); background: var(--blue-light); }
.file-upload input { display: none; }
.file-upload-icon { font-size: 32px; margin-bottom: .5rem; }
.file-upload-text { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.file-upload-sub { font-size: 12px; color: var(--text-muted); }
.file-upload-btn {
  display: inline-block;
  margin-top: .8rem;
  background: var(--blue);
  color: #fff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
}

/* SIDEBAR */
.pr-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 80px; }

.info-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.info-card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--gray);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.info-card-body { padding: 1.2rem 1.5rem; }

/* Feature items */
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
}
.feature-item:last-child { border-bottom: none; padding-bottom: 0; }
.feature-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  font-size: 18px;
}
.feature-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.feature-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* BRANCHES */
.branch-item {
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
}
.branch-item:last-child { border-bottom: none; padding-bottom: 0; }
.branch-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}
.branch-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.branch-detail svg { width: 13px; height: 13px; fill: var(--blue); flex: 0 0 13px; }
.branch-detail a { color: var(--blue); }
.branch-map {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
}

/* SUBMIT */
.pr-submit-btn {
  width: 100%;
  background: var(--blue);
  color: #fff;
  padding: 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 30px rgba(26,127,212,.4);
}
.pr-submit-btn:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 10px 40px rgba(26,127,212,.5); }
.pr-submit-btn svg { width: 20px; height: 20px; fill: #fff; }

/* SUCCESS */
.success-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 500; align-items: center; justify-content: center; }
.success-overlay.show { display: flex; }
.success-modal { background: #fff; border-radius: 24px; padding: 3rem; text-align: center; max-width: 460px; width: 90%; animation: popIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.success-icon { width: 80px; height: 80px; background: #f0faf5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.success-icon svg { width: 40px; height: 40px; fill: #27ae60; }
.success-modal h2 { font-family: 'Tajawal', sans-serif; font-size: 26px; font-weight: 900; color: var(--text); margin-bottom: .5rem; }
.success-modal p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; }
.success-ref { font-family: 'Tajawal', sans-serif; font-size: 22px; font-weight: 900; color: var(--blue); margin: 1rem 0; }
.success-btns { display: flex; gap: 10px; }
.s-btn-main { flex: 1; background: var(--blue); color: #fff; padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; font-family: 'Cairo', sans-serif; }
.s-btn-sec { flex: 1; background: var(--gray); color: var(--text); padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; font-family: 'Cairo', sans-serif; }

/* FOOTER */
.pr-footer { background: #030f1d; padding: 2.5rem 3rem 1.5rem; }
.pr-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 1.5rem; }
.pr-footer-logo img { height: 50px; filter: brightness(0) invert(1); margin-bottom: .8rem; }
.pr-footer-tagline { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.7; margin-bottom: 1.2rem; }
.pr-social-links { display: flex; gap: 8px; }
.pr-social-link { width: 36px; height: 36px; background: rgba(255,255,255,.06); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s; text-decoration: none; }
.pr-social-link:hover { background: var(--blue); }
.pr-social-link svg { width: 17px; height: 17px; fill: rgba(255,255,255,.6); }
.pr-social-link:hover svg { fill: #fff; }
.pr-footer-col h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 1rem; }
.pr-footer-col a { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: .6rem; text-decoration: none; transition: color .3s; }
.pr-footer-col a:hover { color: var(--blue-mid); }
.pr-footer-col a svg { width: 13px; height: 13px; fill: var(--blue); flex: 0 0 13px; margin-top: 2px; }
.pr-footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,.35); }
.pr-footer-bottom-links { display: flex; gap: 1.2rem; }
.pr-footer-bottom-links a { color: rgba(255,255,255,.35); text-decoration: none; transition: color .3s; }
.pr-footer-bottom-links a:hover { color: var(--blue-mid); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .pr-hero { padding: 4rem 1.2rem 2rem; }
  .pr-hero h1 { font-size: 26px; }
  .pr-steps { padding: 1rem; gap: .4rem; }
  .pr-step-line { width: 20px; }
  .pr-wrap { grid-template-columns: 1fr; padding: 1.2rem; gap: 16px; }
  .pr-sidebar { position: static; }
  .pr-card-body { padding: 1.2rem; }
  .fields-2, .fields-3 { grid-template-columns: 1fr; }
  .options-group { gap: 8px; }
  .option-item { font-size: 13px; padding: 9px 14px; }
  .pr-footer { padding: 2rem 1.2rem 1.2rem; }
  .pr-footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 1.5rem; }
  .pr-footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}


/* ============================================================
   ADDITIONAL STYLES MOVED FROM INLINE <style> TAGS
   (Originally inline in about.html — now moved here to keep
   the HTML clean for use in Laravel views)
   ============================================================ */

/* ── ABOUT PAGE: TIMELINE FIX ── */
.timeline {
  position: relative;
  max-width: 820px;
  margin: 3rem auto 0;
}
.timeline::before {
  content: '';
  position: absolute;
  right: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--blue) 10%, var(--blue) 90%, transparent);
  transform: translateX(50%);
}
.tl-item {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 3.5rem;
  position: relative;
}
.tl-dot {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blue);
  border: 4px solid var(--blue-black);
  box-shadow: 0 0 0 3px rgba(26,127,212,.35);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Tajawal', sans-serif;
  font-size: 13px; font-weight: 900;
  color: #fff;
  flex: 0 0 56px;
  z-index: 1;
  position: relative;
}
.tl-content-right { text-align: right; padding-left: 1rem; }
.tl-content-left  { text-align: left;  padding-right: 1rem; }
.tl-year  { font-family: 'Tajawal', sans-serif; font-size: 22px; font-weight: 900; color: var(--blue-mid); margin-bottom: .3rem; }
.tl-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: .3rem; }
.tl-desc  { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; }

@media (max-width: 768px) {
  .timeline::before { right: 27px; }
  .tl-item { grid-template-columns: 56px 1fr; gap: 1rem; }
  .tl-content-left  { display: none; }
  .tl-content-right { text-align: right; padding-left: 0; grid-column: 2; }
  /* even items: swap so content always on right col */
  .tl-item:nth-child(even) .tl-dot { order: 1; }
  .tl-item:nth-child(even) .tl-content-left  { display: block; order: 2; text-align: right; padding-right: 0; }
  .tl-item:nth-child(even) .tl-content-right { display: none; }
}

/* ── ABOUT PAGE: BRANCHES CARDS ── */
@media(max-width:768px){ .kz-branches{grid-template-columns:1fr!important} }
@media(min-width:769px) and (max-width:1024px){ .kz-branches{grid-template-columns:1fr 1fr!important} }
.kz-branch-card {
  background:#fff; border-radius:22px;
  overflow:hidden; border:1px solid var(--border);
  transition:all .4s; box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.kz-branch-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 60px rgba(26,127,212,.15);
  border-color:var(--blue-pale);
}
.kz-branch-header {
  position:relative; padding:2rem 1.8rem 1.5rem;
  overflow:hidden; min-height:130px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.kz-branch-icon {
  position:absolute; left:-10px; top:-10px; opacity:.4;
}
.kz-branch-badge {
  display:inline-block; font-size:11px; font-weight:700;
  color:rgba(255,255,255,.8); background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25); padding:3px 12px;
  border-radius:50px; margin-bottom:.6rem; width:fit-content;
}
.kz-branch-city {
  font-family:'Tajawal',sans-serif; font-size:26px; font-weight:900;
  color:#fff; position:relative; z-index:1;
}
.kz-branch-map { height:200px; overflow:hidden; }
.kz-branch-map iframe { width:100%; height:100%; border:none; display:block; filter:grayscale(20%); transition:filter .3s; }
.kz-branch-card:hover .kz-branch-map iframe { filter:grayscale(0%); }
.kz-branch-body { padding:1.4rem 1.6rem; }
.kz-branch-address {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-muted); margin-bottom:1rem;
}
.kz-branch-address svg { width:14px; height:14px; fill:var(--blue); flex:0 0 14px; }
.kz-branch-contacts { display:flex; flex-direction:column; gap:8px; margin-bottom:1.2rem; }
.kz-branch-contact {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--text);
  text-decoration:none; transition:color .2s; padding:6px 10px;
  background:var(--gray); border-radius:8px;
}
.kz-branch-contact:hover { color:var(--blue); background:var(--blue-light); }
.kz-branch-contact svg { width:14px; height:14px; fill:var(--blue); flex:0 0 14px; }
.kz-branch-maps-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:11px; border:1.5px solid var(--blue);
  border-radius:12px; font-size:14px; font-weight:700;
  color:var(--blue); text-decoration:none; transition:all .3s;
  background:#fff;
}
.kz-branch-maps-btn:hover { background:var(--blue); color:#fff; }

/* ── ABOUT PAGE: KZ TIMELINE (DARK) ── */
.kz-timeline { position:relative; max-width:900px; margin:0 auto; }
.kz-tl-line {
  position:absolute; right:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, transparent, #1a7fd4 8%, #1a7fd4 92%, transparent);
  transform:translateX(50%);
}
.kz-tl-item {
  display:grid; grid-template-columns:1fr 64px 1fr;
  gap:0; align-items:center; margin-bottom:3rem; position:relative;
}
.kz-tl-empty { }
.kz-tl-dot {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#1a7fd4,#0d5fa3);
  border:4px solid #061e35;
  box-shadow:0 0 0 3px rgba(26,127,212,.4), 0 8px 24px rgba(26,127,212,.3);
  display:flex; align-items:center; justify-content:center;
  z-index:2; position:relative; flex:0 0 64px;
  font-family:'Tajawal',sans-serif; font-size:14px; font-weight:900; color:#fff;
  transition:transform .3s;
}
.kz-tl-item:hover .kz-tl-dot { transform:scale(1.1); }
.kz-tl-dot-now {
  background:linear-gradient(135deg,#4a9ee0,#1a7fd4);
  box-shadow:0 0 0 3px rgba(74,158,224,.5), 0 0 30px rgba(74,158,224,.4);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100%{box-shadow:0 0 0 3px rgba(74,158,224,.5),0 0 30px rgba(74,158,224,.3)}
  50%{box-shadow:0 0 0 6px rgba(74,158,224,.3),0 0 50px rgba(74,158,224,.5)}
}
.kz-tl-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:1.6rem 1.8rem;
  transition:all .35s; position:relative; overflow:hidden;
}
.kz-tl-card::before {
  content:''; position:absolute; top:0; right:0; left:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(26,127,212,.6),transparent);
  opacity:0; transition:opacity .3s;
}
.kz-tl-item:hover .kz-tl-card { background:rgba(26,127,212,.1); border-color:rgba(26,127,212,.35); transform:translateY(-3px); }
.kz-tl-item:hover .kz-tl-card::before { opacity:1; }
.kz-tl-card-glow {
  background:rgba(26,127,212,.12);
  border-color:rgba(26,127,212,.4);
}
.kz-tl-right .kz-tl-card { margin-left:1.5rem; }
.kz-tl-left  .kz-tl-card { margin-right:1.5rem; }
.kz-tl-year-badge {
  display:inline-block; font-family:'Tajawal',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:1px;
  color:var(--blue-mid); background:rgba(26,127,212,.15);
  border:1px solid rgba(26,127,212,.3); padding:3px 12px;
  border-radius:50px; margin-bottom:.7rem;
}
.kz-tl-badge-now { color:#60c6ff; background:rgba(74,158,224,.2); border-color:rgba(74,158,224,.5); }
.kz-tl-title { font-size:17px; font-weight:700; color:#fff; margin-bottom:.5rem; }
.kz-tl-desc  { font-size:13px; color:rgba(255,255,255,.55); line-height:1.7; margin-bottom:.9rem; }
.kz-tl-tag {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600;
  color:rgba(255,255,255,.4); background:rgba(255,255,255,.06);
  padding:3px 12px; border-radius:50px; border:1px solid rgba(255,255,255,.1);
}
.kz-tl-tag-now { color:var(--blue-mid); background:rgba(26,127,212,.15); border-color:rgba(26,127,212,.3); }

@media(max-width:768px){
  .kz-tl-line { right:28px; }
  .kz-tl-item { grid-template-columns:64px 1fr; }
  .kz-tl-empty { display:none; }
  .kz-tl-right .kz-tl-card,
  .kz-tl-left  .kz-tl-card { margin:0 0 0 1rem; grid-column:2; grid-row:1; }
  .kz-tl-right .kz-tl-dot,
  .kz-tl-left  .kz-tl-dot  { grid-column:1; grid-row:1; }
  .kz-tl-left { direction:ltr; }
  .kz-tl-left .kz-tl-card { direction:rtl; }
}


/* ============================================================
   FAVORITES PAGE & FAV BUTTON IN NAVBAR
   ─────────────────────────────────────────────────────────
   - زر المفضلة في الـ navbar (بعدّاد)
   - شبكة بطاقات المفضلة في صفحة favorites.html
   - حالة فارغة (لو ما فيش منتجات مفضلة)
   ============================================================ */

/* ── زر المفضلة في الـ navbar ── */
.nav-fav {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .25s;
  border: none;
  color: var(--blue);
}
.nav-fav:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}
.nav-fav svg {
  width: 20px; height: 20px;
  fill: currentColor;
}
.nav-fav .fav-count {
  position: absolute;
  top: -4px; left: -4px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

/* ── صفحة المفضلة: hero ── */
.fav-page-hero {
  background: linear-gradient(135deg, #042C53 0%, #0C447C 50%, #185FA5 100%);
  padding: 4rem 3rem 3rem;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fav-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(26,127,212,.3), transparent 50%),
              radial-gradient(circle at 80% 50%, rgba(255,255,255,.05), transparent 50%);
}
.fav-page-hero-inner { position: relative; z-index: 1; }
.fav-page-hero h1 {
  font-family: 'Tajawal', sans-serif;
  font-size: 38px; font-weight: 900;
  margin-bottom: .8rem;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.fav-page-hero h1 svg {
  width: 36px; height: 36px;
  fill: #ff6b6b;
  filter: drop-shadow(0 4px 12px rgba(255, 107, 107, 0.5));
}
.fav-page-hero p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 500px; margin: 0 auto;
}
.fav-page-stats {
  display: inline-flex;
  gap: 2rem;
  margin-top: 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px 28px;
  border-radius: 50px;
  backdrop-filter: blur(10px);
}
.fav-page-stat {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700; color: #fff;
}
.fav-page-stat span {
  font-size: 22px; color: #4a9ee0;
  display: block;
}
.fav-page-stat small {
  font-size: 12px; color: rgba(255, 255, 255, 0.6);
  display: block;
}

/* ── شريط أدوات المفضلة ── */
.fav-toolbar {
  background: #fff;
  padding: 1.2rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}
.fav-toolbar-left {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Tajawal', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--text);
}
.fav-toolbar-left svg {
  width: 20px; height: 20px;
  fill: #ff6b6b;
}
.fav-clear-btn {
  background: #fff;
  border: 1.5px solid #e74c3c;
  color: #e74c3c;
  font-family: 'Cairo', sans-serif;
  font-size: 13px; font-weight: 700;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all .25s;
}
.fav-clear-btn:hover {
  background: #e74c3c;
  color: #fff;
}
.fav-clear-btn svg {
  width: 14px; height: 14px;
  fill: currentColor;
}

/* ── شبكة بطاقات المفضلة ── */
.fav-section {
  padding: 2.5rem 3rem 4rem;
  background: var(--gray);
  min-height: 50vh;
}
.fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.4rem;
}

.fav-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  transition: all .35s;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.fav-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(26, 127, 212, 0.12);
  border-color: var(--blue-pale);
}

.fav-remove-btn {
  position: absolute;
  top: 12px; left: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #e74c3c;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all .25s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.fav-remove-btn:hover {
  background: #e74c3c;
  color: #fff;
  transform: scale(1.1);
}
.fav-remove-btn svg { fill: currentColor; }

.fav-img {
  height: 180px;
  position: relative;
  overflow: hidden;
  background: var(--gray);
}
.fav-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.fav-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.fav-body {
  padding: 1.2rem;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.fav-brand {
  font-size: 11px; font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fav-name {
  font-family: 'Tajawal', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
  min-height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fav-prices {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 4px;
}
.fav-price {
  font-family: 'Tajawal', sans-serif;
  font-size: 20px; font-weight: 900;
  color: var(--blue);
}
.fav-old-price {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.fav-actions {
  display: flex; gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.fav-add-cart {
  flex: 1;
  background: var(--blue);
  color: #fff;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 13px; font-weight: 700;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .25s;
}
.fav-add-cart:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(26, 127, 212, 0.3);
}
.fav-add-cart svg { fill: currentColor; }
.fav-view {
  background: var(--gray);
  color: var(--text);
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 13px; font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.fav-view:hover {
  background: var(--blue-light);
  color: var(--blue);
}

/* ── حالة فارغة ── */
.fav-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 5rem 2rem;
  background: #fff;
  border-radius: 20px;
  text-align: center;
  border: 2px dashed var(--border);
}
.fav-empty-icon {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.fav-empty-icon svg {
  width: 50px; height: 50px;
  fill: var(--blue);
  opacity: .6;
}
.fav-empty h2 {
  font-family: 'Tajawal', sans-serif;
  font-size: 26px; font-weight: 900;
  color: var(--text);
  margin: 0 0 .6rem;
}
.fav-empty p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  max-width: 400px;
}
.fav-empty-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 14px; font-weight: 700;
  padding: 12px 28px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s;
}
.fav-empty-btn:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 127, 212, 0.3);
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .fav-page-hero      { padding: 3rem 1.2rem 2rem; }
  .fav-page-hero h1   { font-size: 26px; }
  .fav-page-hero h1 svg { width: 26px; height: 26px; }
  .fav-page-stats     { gap: 1rem; padding: 12px 16px; }
  .fav-toolbar        { padding: 1rem 1.2rem; }
  .fav-section        { padding: 2rem 1.2rem 3rem; }
  .fav-grid           { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .fav-name           { font-size: 13px; min-height: 36px; }
  .fav-price          { font-size: 16px; }
  .fav-actions        { flex-direction: column; }
  .fav-empty          { padding: 3rem 1.2rem; }
  .fav-empty h2       { font-size: 20px; }
}
@media (max-width: 380px) {
  .fav-grid { grid-template-columns: 1fr; }
}