:root{
  --bg:#eef0f4;
  --panel:#ffffff;
  --ink:#121625;
  --muted:#6b7280;

  /* ✅ Blue + Apricot فقط */
  --blue:#1f4ed8;      /* الأزرق الأساسي */
  --blue2:#173fb4;     /* أزرق أغمق */
  --apricot:#ffb184;   /* المشمشي */
  --apricot2:#ffd2b8;  /* مشمشي فاتح */

  --shadow: 0 18px 40px rgba(10, 14, 26, .12);
  --r:18px;
  --max: 1180px;

  /* ✅ Header height (مضبوط مع اللوجو + بادج 20 سنة) */
  --nav-h: 84px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 48px)); margin:0 auto;}
.section{padding:88px 0}
.section.tight{padding:56px 0}
.section.gray{background:var(--bg)}
.section.white{background:#fff}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 22px;
  border-radius:12px; border:1px solid transparent;
  font-weight:700; letter-spacing:.02em;
  cursor:pointer; user-select:none;
  transition:transform .15s ease;
}
.btn.dark{background:#0e111b;color:#fff}
.btn.light{background:#fff;color:#0e111b;border-color:#e5e7eb}
.btn.primary{background:var(--blue);color:#fff}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0px)}
.btn.small{height:40px;padding:0 18px;border-radius:11px;font-size:13px}

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.14em; font-weight:800;
  color:#0e111b; text-transform:uppercase;
}
.badge .dot{
  width:10px;height:10px;border-radius:99px;
  background:linear-gradient(135deg,var(--apricot),var(--blue));
  box-shadow:0 10px 20px rgba(255,177,132,.35);
}

/* =========================
   ✅ FINAL HEADER (NO CONFLICTS)
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:999;
  background:#fff;
  height:var(--nav-h);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 28px rgba(10,14,26,.06);
}
.topbar .inner{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:18px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:220px;
  gap:14px;
}
.brand img{
  height:56px;
  width:auto;
  object-fit:contain;
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  gap:28px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  white-space:nowrap;
}
.nav a{position:relative; padding:10px 4px}
.nav a.active{color:var(--blue)}
.nav a.active::after{
  content:"↗";
  font-size:12px;
  position:relative;
  top:-1px;
  margin-left:6px;
}
.nav a::before{
  content:"";
  position:absolute; left:4px; right:4px; bottom:4px;
  height:2px; border-radius:4px;
  background:transparent;
  transform:scaleX(.2); transform-origin:left;
  transition:transform .25s ease, background .25s ease;
}
.nav a:hover::before{background:rgba(31,78,216,.28); transform:scaleX(1)}

/* Right side */
.cta.cta-badge{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex:0 0 auto;
  min-width:260px;
}
.cta.cta-badge .badge20{
  height:44px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* Mobile nav button */
.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.hamburger span{
  display:block;
  width:18px;height:2px;
  background:#0e111b;
  margin:0 auto;
  position:relative;
}
.hamburger span::before,.hamburger span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;height:2px;
  background:#0e111b;
}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}

/* Mobile nav drawer */
.mnav{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(7,10,18,.55);
  z-index:80;
}
.mnav .sheet{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(360px, 88vw);
  background:#fff;
  padding:20px;
}
.mnav .sheet a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 10px;
  border-radius:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid #eef0f4;
  margin-bottom:10px;
}
.mnav .sheet a.active{border-color:rgba(31,78,216,.28); color:var(--blue)}
.mnav .sheet .close{display:flex; justify-content:flex-end; margin-bottom:10px}
.mnav .sheet .close button{border:none; background:#fff; font-size:28px; cursor:pointer}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  background:#fff;
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  align-items:stretch;
  min-height:640px;
}
.hero .left{
  position:relative;
  padding:88px 24px 96px 0;
  background:linear-gradient(180deg,#eef0f4,#eef0f4);
}
.hero .right{
  position:relative;
  background: transparent;     /* بدل الأسود */
  overflow: hidden;            /* يخفي أي زوائد */
}

.hero .right img{
  width:100%;
  height:100%;
  display:block;               /* مهم */
  object-fit:cover;            /* يغطي كامل المكان */
  object-position:center;
}

.hero .right img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.hero .left::before{
  content:"";
  position:absolute;
  inset:-40px -140px -40px -40px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9) 0 50%, transparent 50%),
    linear-gradient(225deg, rgba(255,255,255,.9) 0 50%, transparent 50%);
  opacity:.45;
  pointer-events:none;
}

/* ✅ shards fixed */
.hero .shards{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero .shards::before{
  content:"";
  position:absolute;
  left:-180px; top:-220px;
  width:560px; height:560px;
  background:linear-gradient(135deg, var(--apricot), var(--apricot2));
  clip-path:polygon(30% 0, 100% 35%, 70% 100%, 0 65%);
  opacity:.85;
  transform:rotate(-10deg);
}
.hero .shards::after{
  content:"";
  position:absolute;
  right:38%;
  top:80px;
  width:640px;
  height:640px;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  clip-path:polygon(70% 0, 100% 30%, 30% 100%, 0 70%);
  opacity:.92;
  transform:rotate(10deg);
  mix-blend-mode:multiply;
}

.hero .content{width:min(640px, 100%)}
.hero h1{
  margin:0 0 18px;
  font-size:clamp(36px, 4.2vw, 64px);
  line-height:1.05;
}
.hero .lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16px;
}
.hero ul{
  list-style:none;
  padding:0;
  margin:28px 0 34px;
  display:grid;
  gap:14px;
}
.hero li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  color:#0e111b;
}
.check{
  width:22px;height:22px;border-radius:99px;
  background:rgba(31,78,216,.08);
  display:grid; place-items:center;
  flex:0 0 22px;
}
.check svg{width:14px;height:14px}
.hero .actions{display:flex; gap:18px; flex-wrap:wrap}

/* Page header */
.pagehead .wrap{min-height:360px}
.pagehead .left{padding:74px 24px 84px 0}
.pagehead h1{font-size:clamp(36px, 5vw, 74px)}

/* Blue sections */
.blue{
  position:relative;
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  color:#fff;
  overflow:hidden;
}
.blue::before{
  content:"";
  position:absolute;
  inset:-240px -120px -120px -120px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12), transparent 44%),
    radial-gradient(circle at 80% 20%, rgba(255,177,132,.20), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.08) 0 18%, transparent 18% 36%, rgba(255,255,255,.06) 36% 54%, transparent 54% 72%, rgba(255,255,255,.05) 72% 100%);
  opacity:.45;
  transform:rotate(-8deg);
  pointer-events:none;
}
.blue .container{position:relative; z-index:2}
.blue h2{margin:0 0 18px; font-size:clamp(32px, 3.4vw, 56px); line-height:1.1}
.blue p{color:rgba(255,255,255,.82)}

/* Mission */
.mission{text-align:center}
.mission p{max-width:920px; margin:0 auto; font-size:18px}

/* Solutions */
.solutions{
  display:grid;
  grid-template-columns: 1.05fr 1.3fr;
  gap:38px;
  align-items:start;
}
.solutions .intro h3{
  margin:0 0 12px;
  font-size:clamp(32px, 3.1vw, 52px);
}
.solutions .intro p{margin:0 0 18px; max-width:520px}

.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:22px;
}
.card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  padding:26px 24px;
  backdrop-filter: blur(6px);
  min-height:190px;
}
.card h4{margin:10px 0 8px; font-size:18px}
.card p{margin:0; font-size:14px}
.iconCircle{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,177,132,.20);
  border:1px solid rgba(255,210,184,.60);
}
.iconCircle svg{width:26px;height:26px}

/* Why choose us */
.why{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:34px;
  align-items:stretch;
}
.why .left{
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.why h2{margin:0 0 14px; font-size:clamp(42px, 4vw, 72px); line-height:1}
.why .illustration{
  margin-top:22px;
  background:#fff;
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.whygrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:22px;
}
.whycard{
  background:#fff;
  border-radius:22px;
  padding:26px 24px;
  box-shadow:var(--shadow);
  border:1px solid #edf0f6;
  position:relative;
  min-height:180px;
}
.whycard::after{
  content:"";
  position:absolute; right:0; top:0;
  width:48px; height:48px;
  background:linear-gradient(135deg,var(--apricot),var(--blue));
  clip-path:polygon(100% 0, 100% 100%, 0 0);
  opacity:.9;
}
.whycard h4{margin:12px 0 8px}
.whycard p{margin:0; color:var(--muted); font-size:14px}
.miniIcon{
  width:34px;height:34px;border-radius:10px;
  background:rgba(31,78,216,.08);
  display:grid; place-items:center;
}
.miniIcon svg{width:18px;height:18px}

/* Partners */
.logoRow{
  display:flex;
  gap:22px;
  overflow:auto;
  padding:24px 2px 6px;
  scroll-snap-type:x mandatory;
}
.logoRow::-webkit-scrollbar{height:10px}
.logoRow::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:999px}
.logoTile{
  flex:0 0 auto;
  background:#fff;
  border-radius:22px;
  padding:18px;
  min-width:220px;
  box-shadow:0 16px 34px rgba(0,0,0,.12);
  scroll-snap-align:start;
}
.logoTile img{width:180px; height:110px; object-fit:contain; margin:0 auto}

/* Stats strip */
.statsWrap{
  position:relative;
  margin-top:-110px;
  z-index:4;
}
.stats{
  background:rgba(255,255,255,.92);
  border-radius:24px;
  box-shadow:var(--shadow);
  border:1px solid #e8ecf3;
  padding:34px 24px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.stat{
  text-align:center;
  padding:10px 8px;
  position:relative;
}
.stat:not(:last-child)::after{
  content:"";
  position:absolute; right:0; top:22px; bottom:22px; width:1px;
  background:#d7dce7;
}
.stat .n{font-size:52px; font-weight:900; color:#0e111b}
.stat .t{color:#6b7280; font-weight:600}

/* Footer */
.footer{
  background:#fff;
  border-top:1px solid #e9edf5;
}
.footer .grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:28px;
  padding:52px 0;
}
.footer h4{margin:0 0 16px}
.footer a{color:#5b6374}
.footer a:hover{color:var(--blue)}
.footer .bottom{
  border-top:1px solid #eef0f4;
  padding:18px 0 26px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:#6b7280;
}
.social{display:flex; align-items:center; gap:12px}
.social a{
  width:34px;height:34px;border-radius:12px;
  background:#f3f5f9;
  display:grid; place-items:center;
}

/* Scroll to top */
#toTop{
  position:fixed;
  right:18px; bottom:18px;
  width:52px;height:52px;border-radius:14px;
  border:none; cursor:pointer;
  background:var(--blue);
  color:#fff;
  box-shadow:0 20px 30px rgba(31,78,216,.35);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
  z-index:90;
}
#toTop.show{opacity:1; transform:translateY(0px)}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .hamburger{display:inline-grid; place-items:center}
  .brand{min-width:auto}
  .brand img{height:48px}
  .cta.cta-badge{min-width:auto}
  .cta.cta-badge .badge20{height:38px}

  .hero .wrap{grid-template-columns: 1fr}
  .hero .right{min-height:360px}
  .hero .left{padding:58px 0 42px}
  .hero .shards::before{left:-160px; top:-220px; width:520px; height:520px}
  .hero .shards::after{right:-70px; top:20px; width:560px; height:560px}

  .solutions{grid-template-columns: 1fr}
  .why{grid-template-columns: 1fr}
  .whygrid{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .stats{grid-template-columns: 1fr 1fr}
  .stat:not(:last-child)::after{display:none}
  .footer .grid{grid-template-columns: 1fr}
}

@media (max-width: 720px){
  :root{ --nav-h: 76px; }
  .brand img{height:44px}
  .cta.cta-badge .badge20{height:34px}
}

@media (max-width: 520px){
  .container{width:min(var(--max), calc(100% - 30px))}
  .stats{grid-template-columns: 1fr}
  .stat .n{font-size:44px}
}
/* ===== BIGGER HEADER LOGOS (Paste at END of CSS) ===== */
:root{
  --nav-h: 104px; /* كبر الهيدر */
}

/* Header */
.topbar{ height: var(--nav-h) !important; }
.topbar .inner{ height: var(--nav-h) !important; }

/* Company logo */
.brand img{
  height: 68px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Right side container */
.cta.cta-badge{
  min-width: 320px !important; /* مساحة كافية للبادج والزر */
  gap: 14px !important;
}

/* 20 years badge */
.cta.cta-badge .badge20{
  height: 140px !important;     /* <<< كبرها هون */
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)) !important;
}

/* إذا صورة البادج فيها فراغات كبيرة، هذا يخليها تبين أكبر بصرياً */
.cta.cta-badge .badge20{
  transform: scale(1.08);
  transform-origin: center;
}

/* Responsive */
@media (max-width: 980px){
  :root{ --nav-h: 92px; }
  .brand img{ height: 56px !important; }
  .cta.cta-badge .badge20{ height: 56px !important; }
  .cta.cta-badge{ min-width:auto !important; }
}

@media (max-width: 720px){
  :root{ --nav-h: 82px; }
  .brand img{ height: 48px !important; }
  .cta.cta-badge .badge20{ height: 46px !important; }
}
/* ===== 20 YEARS BADGE (600x600) + BIG LOGO ===== */
:root{
  --nav-h: 104px; /* ارتفاع الهيدر */
}

.topbar{ height: var(--nav-h) !important; }
.topbar .inner{ height: var(--nav-h) !important; }

/* Logo الشركة */
.brand img{
  height: 68px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* يمين الهيدر */
.cta.cta-badge{
  min-width: 320px !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* بادج 20 سنة */
.cta.cta-badge .badge20{
  height: 100px !important;     /* واضح جداً */
  width: auto !important;
  object-fit: contain !important;
  image-rendering: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)) !important;
}

/* Responsive */
@media (max-width: 980px){
  :root{ --nav-h: 92px; }
  .brand img{ height: 56px !important; }
  .cta.cta-badge .badge20{ height: 56px !important; }
  .cta.cta-badge{ min-width:auto !important; }
}

@media (max-width: 720px){
  :root{ --nav-h: 82px; }
  .brand img{ height: 48px !important; }
  .cta.cta-badge .badge20{ height: 46px !important; }
}
/* ❌ إخفاء أي بادج/نص 20 سنة داخل الهيرو */
.hero .badge20,
.hero .anniversary,
.hero .overlay,
.hero [class*="anniv"],
.hero [class*="20"]{
  display: none !important;
}
/* ===== Anniversary badge + text under it (Header) ===== */
.cta.cta-badge{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}

.cta.cta-badge .anniv{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  line-height:1.1;
}

.cta.cta-badge .badge20{
  height:72px;       /* واضح */
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.anniv-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.anniv-title{
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  color:#0e111b;
}

.anniv-sub{
  font-weight:700;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

/* Responsive */
@media (max-width: 980px){
  .cta.cta-badge .badge20{ height:56px; }
  .anniv-title{ font-size:11px; }
  .anniv-sub{ font-size:10px; }
}

@media (max-width: 720px){
  .cta.cta-badge .badge20{ height:46px; }
  .anniv-sub{ display:none; } /* نخفي السطر الثاني بالموبايل عشان ما تزحم */
}
/* ===== Anniversary text exactly like image ===== */
.cta.cta-badge{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
}

.anniv{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  line-height:1.15;
}

.anniv .badge20{
  height:72px;              /* واضح */
  width:auto;
  object-fit:contain;
  margin-bottom:6px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* Text styles */
.anniv-text{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.anniv-line1{
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  color:#0e111b;
}

.anniv-line2{
  font-size:11px;
  font-weight:700;
  color:#6b7280;
}

.anniv-line3{
  font-size:11px;
  font-weight:800;
  color:#8a6a3c; /* قريب من الذهبي بالصورة */
}

/* Responsive */
@media (max-width: 980px){
  .anniv .badge20{ height:56px; }
  .anniv-line1{ font-size:11px; }
  .anniv-line2,
  .anniv-line3{ font-size:10px; }
}

@media (max-width: 720px){
  .anniv .badge20{ height:46px; }
  .anniv-line2,
  .anniv-line3{ display:none; } /* بالموبايل نخلي سطر واحد */
}
/* ===== Anniversary badge FIX ===== */
.cta.cta-badge{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:flex-end;
}

/* كرت الذكرى */
.anniv{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#ffffff;
  padding:10px 12px 8px;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
}

/* صورة 20 */
.anniv .badge20{
  height:64px;
  width:auto;
  object-fit:contain;
  margin-bottom:6px;
}

/* النص */
.anniv-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.anniv-line1{
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  color:#0e111b;
}

.anniv-line2{
  font-size:10px;
  font-weight:700;
  color:#4b5563; /* رمادي واضح */
}

.anniv-line3{
  font-size:10px;
  font-weight:800;
  color:#8a6a3c; /* ذهبي واضح */
}

/* موبايل */
@media (max-width: 980px){
  .anniv{padding:8px 10px}
  .anniv .badge20{height:52px}
  .anniv-line2,
  .anniv-line3{display:none}
}
.logoMarquee{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  cursor: grab;
  user-select: none;
  padding: 10px 0;

  /* اخفاء السكرول بار */
  scrollbar-width: none;
}
.logoMarquee::-webkit-scrollbar{ display:none; }

.logoMarquee.dragging{ cursor: grabbing; }

.logoTrack{
  display:inline-flex;
  gap:16px;
  align-items:center;
  width:max-content;
  padding: 6px 10px;
}

/* أكبر */
.logoTile{
  width: 190px;
  height: 110px;
  border-radius: 16px;
}

.logoTile img{
  max-width: 90%;
  max-height: 80%;
}
@media (max-width: 520px){
  .logoTile{
    width: 150px;
    height: 95px;
  }
  .logoTile img{
    max-width: 92%;
    max-height: 82%;
  }
}