:root {
  --accent: #1B7DAD
}
/* ===== Base layout ===== */
.mv-section{ padding: 48px 0; background:#fff; }
.mv-container{ width:min(1100px, 92vw); margin-inline:auto; }
.mv-head{ font-size: clamp(20px, 2.4vw, 28px); font-weight:700; margin:0 0 20px; }

/* ===== Grid ===== */
.mv-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 2.4vw, 28px);
}
@media (max-width: 768px){
.mv-grid{ grid-template-columns:1fr; }
}

/* ===== Card ===== */
.mv-card{
position:relative;
background:#eaf6ff;              /* خلفية فاتحة */
border-radius:22px;
padding: clamp(18px, 2.4vw, 28px);
box-shadow: 0 10px 26px rgba(0,0,0,.08);
overflow:hidden;
isolation:isolate;               /* لأجل الز-index */
}
.mv-header{ 
    backdrop-filter:none;
text-shadow: none;
  margin-bottom: 8px; 
  background:none;
  text-decoration: none;
  text-shadow: none;
}
.mv-badge{
display:block; letter-spacing:.1em; opacity:.7;
font-weight:700; color:#333; margin-bottom:4px;
font-size: 30px;
}
.mv-title{
font-size: clamp(26px, 4vw, 40px);
line-height:1.05;
margin:0 0 8px;
color: #1B7DAD;
box-shadow: none;
text-shadow: none;
font-weight:800;
}
.mv-text{
color:#2f3a45; line-height:1.6; max-width: 60ch; margin:0;
}

/* ===== Decorative icons (images from /image/) ===== */
.mv-deco{
position:absolute; pointer-events:none; user-select:none; opacity:.12;
width:min(48%, 240px); max-width:42%;
filter: drop-shadow(0 2px 0 rgba(0,0,0,.02));
z-index:-1;
}
/* bottom-left (goal) */
.deco-bl{ left:-6%; bottom:-6%; }
/* top-right (eye) */
.deco-tr{ right:-4%; top:-6%; width:min(44%, 220px); }

/* Optional: different soft backgrounds per card */
.is-mission{ background:#e9f5ff; }
.is-vision { background:#e6f4ff; }

/* ==== Mission & Vision – pixel-perfect overrides ==== */

/* الحاوية والعنوان */
#mission-vision.mv-section{ padding:48px 0; background:#fff; }
#mission-vision .mv-container{ width:min(1100px,92vw); margin-inline:auto; }
#mission-vision .mv-head{ 
margin:0 0 22px;
font-size:clamp(20px,2.4vw,28px);
font-weight:700;
color:#0f172a;
}

/* الشبكة */
#mission-vision .mv-grid{
display:grid; grid-template-columns:repeat(2,1fr);
gap:clamp(18px,2.8vw,32px);
}
@media (max-width: 768px){ #mission-vision .mv-grid{ grid-template-columns:1fr; } }

/* الكرت الأساسي */
#mission-vision .mv-card{
position:relative; isolation:isolate;
background:#eaf5ff;                 /* نفس الدرجة الفاتحة */
border-radius:24px;                   /* حواف ناعمة */
padding:clamp(22px,2.8vw,32px);
box-shadow:0 10px 26px rgba(0,0,0,.08);
overflow:hidden;
}

/* كارت الرؤية بنفس الهدوء لكن درجة مختلفة خفيفة */
#mission-vision .mv-card.is-vision{ 
  background:#e6f4ff;
  padding-top:100px
}

/* الهيدر والعناوين - امسح أي خلفيات غير مقصودة */
#mission-vision .mv-header,
#mission-vision .mv-title,
#mission-vision .mv-badge{
background:transparent !important;
text-shadow: none;

}

/* OUR */
#mission-vision .mv-badge{
display:block;
font-size:36px;
margin-bottom:6px;
font-weight:700;
letter-spacing:.12em;
color:#475569;           /* رمادي داكن */
opacity:.9;
}

/* MISSION / VISION */
#mission-vision .mv-title{
margin:0 0 10px;
font-weight:900;
font-size:clamp(28px,4.2vw,44px);
line-height:1.05;
text-transform:uppercase;
color: #1B7DAD
}

/* النص */
#mission-vision .mv-text{
margin:0;
max-width:60ch;
color:#2f3a45;
line-height:1.65;
font-size:clamp(18px,1.2vw,16px);
}

/* الأيقونات (صور من image/) كـ watermark */
#mission-vision .mv-deco{
position:absolute;
pointer-events:none; user-select:none;
opacity:1;                               /* وضوح قريب من التصميم */
filter: drop-shadow(0 2px 0 rgba(0,0,0,.02));
z-index:0;                                 /* خلف المحتوى */
}

/* الهدف أسفل يسار */
#mission-vision .deco-bl{
left:-6%; bottom:-10%;
width:min(58%, 300px); max-width:41%;
left:0;
bottom:0
}

/* العين أعلى يمين */
#mission-vision .deco-tr{
  top:0;
  right:0;
width:min(58%, 300px); max-width:41%;
}

/* تأكيد أن النص فوق الأيقونات */
#mission-vision .mv-header,
#mission-vision .mv-text{ position:relative; z-index:1; }

/* موبايل */
@media (max-width:575.98px){
#mission-vision .mv-card{ border-radius:20px; padding:20px; }
#mission-vision .deco-bl{ left:-12%; bottom:-14%; width:72%; }
#mission-vision .deco-tr{ right:0; top:0; width:72%; }
.product-card.is-right
{
  margin-top:20px !important
}
}

/* Section wrapper */
.values-section{ padding:48px 0; background:#fff; }

/* نفس كارت الـ mv-card */
.val-card{
background:#eaf5ff;              /* درجة هادئة */
border-radius:24px;
padding:clamp(22px,2.8vw,32px);
box-shadow:0 10px 26px rgba(0,0,0,.08);
position:relative; isolation:isolate; overflow:hidden;
}

/* قائمة القيم */
.values-list{
list-style:none; margin:10px 0 0; padding:0;
display:grid; gap:18px;
}
.values-list li{ display:block; }
.values-list h4{
margin:0 0 6px;
font-weight:700; color:#0f172a;
font-size:clamp(15px,1.6vw,18px);
position:relative; padding-left:20px;
}
.values-list h4::before{
content:""; position:absolute; left:0; top:0.45em;
width:10px; height:10px; border-radius:50%;
background: #1B7DAD;      /* نقطة بنفس لون العنوان */
}
.values-list p{
margin:0; color:#2f3a45; line-height:1.65;
font-size:clamp(14px,1.2vw,16px);
}

/* الأيقونة الزخرفية (الماسة) أعلى يمين */
.val-deco-tr{
position:absolute; right:0; top:0;
width:min(448%, 300px); max-width:58%;
opacity:1; pointer-events:none; user-select:none;
filter: drop-shadow(0 2px 0 rgba(0,0,0,.02));
z-index:0;
}

/* تأكيد الطبقات: النص فوق الأيقونة */
.val-card .mv-header, .val-card .values-list{ position:relative; z-index:1; }

/* موبايل */
@media (max-width:575.98px){
.val-card{ border-radius:20px; padding:20px; }
.val-deco-tr{ right:-12%; top:-16%; width:72%; }
}


/* ===== Section slab خلف الشبكة (درجة سماوي لطيفة + حواف سفلية ناعمة) ===== */
.values-wrap{
padding:36px 0;
background:#f0f7fb;
border-radius:0 0 24px 24px;
}


/* ===== Grid ===== */
.values-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(16px, 2.2vw, 24px);
}
@media (max-width: 992px){
.values-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 576px){
.values-grid{ grid-template-columns:1fr; }
}

/* ===== Card ===== */
.v-card{
position:relative;
background:var(--bg, #eef6ff);
border-radius:22px;
padding:78px 18px 22px;        /* مسافة كبيرة أعلى للأيقونة المثبتة */
box-shadow:0 14px 26px rgba(31,41,55,.12);
overflow:hidden;
}

/* الهالة الكبيرة خلف الأيقونة (مقتوصة بحواف الكارت) */
.v-halo{
position:absolute;
top:-28px; left:-22px;         /* جزء خارج الكارت زي المعاينة */
width:110px; height:110px;
border-radius:50%;
background:
  radial-gradient(circle at 55% 45%,
    rgba(var(--accent-r,0), var(--accent-g,0), var(--accent-b,0), .22) 0 62%,
    rgba(var(--accent-r,0), var(--accent-g,0), var(--accent-b,0), 0) 65%);
pointer-events:none;
filter:blur(0.2px);
z-index:0;
}

/* الأيقونة مثبتة أعلى يسار */
.v-icon{
position:absolute;
top:12px; left:12px;
width:50px; height:50px;
border-radius:50%;
display:grid; place-items:center;
background:rgba(255,255,255,.85);
box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
z-index:1;
}
.v-icon img{ width:36px; height:36px; object-fit:contain; }

/* لمعان خفيف داخل دائرة الأيقونة */
.v-icon .bubble{
position:absolute; inset:0; border-radius:50%;
background:radial-gradient(closest-side, rgba(255,255,255,.7), transparent 72%);
pointer-events:none;
}

/* سبركل صغير بجوار الأيقونة */
.v-icon::after{
content:"";
position:absolute; right:-10px; top:6px;
width:10px; height:10px;
transform:rotate(45deg);
background:var(--accent, #77c0d9);
opacity:.55; border-radius:2px;
box-shadow:0 0 0 2px rgba(255,255,255,.55) inset, 0 2px 4px rgba(0,0,0,.05);
}

/* العنوان والنص */
#core-values .v-title{
margin:0 0 8px;
position: absolute;
left: 40%;
top:20px;
font-size:clamp(16px,1.6vw,18px);
font-weight:700;
color:#0f172a;
}
.v-text{
margin:0;
color:#334155;
line-height:1.65;
font-size:clamp(14px,1.3vw,16px);
}

/* ظل سفلي لطيف يشبه المعاينة */
.v-card::after{
content:"";
position:absolute; left:8px; right:8px; bottom:8px;
height:16px; border-radius:16px;
background:radial-gradient(50% 100% at 50% 0%,
            rgba(0,0,0,.12), rgba(0,0,0,0) 70%);
filter:blur(10px);
z-index:-1;
}

/* موبايل: تضبيط بسيط */
@media (max-width:575.98px){
.v-card{ padding:74px 16px 20px; border-radius:20px; }
.v-halo{ top:-30px; left:-26px; width:128px; height:128px; }
}


/* ===== Our Products – pixel perfect ===== */
.products-wrap{ padding:48px 0; background:#fff; }
.products-container{ width:min(1100px,92vw); margin-inline:auto; }
.products-head{ margin:0 0 20px; font-size:clamp(20px,2.4vw,28px); font-weight:700; color:#0f172a; }

/* Grid */
.products-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(22px,3.2vw,44px);
align-items:stretch;
}
@media (max-width:900px){ .products-grid{ grid-template-columns:1fr; } }

/* Card base */
.product-card{
position:relative;
isolation:isolate;
/* صورة الخلفية + طبقة زجاجية */
background: url("/images/product-section-bg.png") ;
box-shadow: 0 14px 61px rgba(15,23,42,.12), inset 0 0 0 1px rgba(255,255,255,.55);
overflow:hidden;
color:#0f172a;
padding:clamp(22px,3.2vw,32px);
height: 350px;
}
/* زجاج (تدرّج أبيض شفاف) – اتجاه مختلف لكل كارد */
.product-card::before{
content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
}

/* انحناءات الزوايا – مطابقة للصورة */
.product-card.is-left{  border-radius:22px 68px 40px 60px; }   /* TL TR BR BL */
.product-card.is-right{ border-radius:29px 34px 12px 49px; margin-top: 100px}   /* TL TR BR BL */

/* ظلّ أرضي مائل لكل كارد */
.product-card::after{
content:""; position:absolute; bottom:12px; height:18px; border-radius:18px; z-index:-1;
background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.12), rgba(0,0,0,0) 70%);
filter:blur(10px);
}
.product-card.is-left::after { left:12px; right:120px; }
.product-card.is-right::after{ left:120px; right:12px; }

/* Title */
.product-title{
position:relative; z-index:1;
margin:0 0 12px;
font-weight:800;
font-size:clamp(20px,2.4vw,30px);
}

/* Bulleted list */
.product-list{
position:relative; z-index:1;
list-style:none; margin:0; padding:0;
display:grid; gap:12px;
}
.product-list li{
position:relative; padding-left:26px;margin-top:5px;
color:#334155; line-height:1.65; font-size:clamp(16px,1.2vw,16px);
}
/* نقطة زرقاء بحلقة ولمعة صغيرة (زي المعاينة) */
.product-list li::before{
content:""; position:absolute; left:0; top:.62em; width:12px; height:12px; border-radius:50%;
background:
  radial-gradient(circle at 50% 50%, #1e78c7 0 55%, #0c67b2 56% 58%, rgba(30,120,199,.32) 59% 92%, transparent 93%);
box-shadow:
  0 0 0 3px rgba(30,120,199,.16),
  inset 0 -1px 0 rgba(255,255,255,.65);
}

/* Note (الكارد اليسار فقط) */
.product-note{
position:relative; z-index:1;
margin-top:16px; color:#475569; opacity:.95; font-size:clamp(13px,1.1vw,15px);
}


/* ===== Layout ===== */
.story-wrap{ padding:44px 0; background:#fff; }
.story-container{ width:min(1100px,92vw); margin-inline:auto; }
.story-head{ margin:0 0 18px; font-size:clamp(20px,2.4vw,28px); font-weight:700; color:#0f172a; }

.story-panels{
display:flex; gap:clamp(14px,2vw,22px);
align-items:flex-end;
}

/* ===== Panel (card) ===== */
.panel{
position:relative;
flex:1; min-height:420px; height:clamp(420px, 52vw, 520px);
border-radius:30px;                    /* ستتغير عند التوسّع */
overflow:hidden; isolation:isolate;
box-shadow: 0 16px 32px rgba(15,23,42,.16);
transition:
  flex .55s cubic-bezier(.2,.8,.2,1),
  transform .45s ease,
  filter .35s ease,
  border-radius .45s ease;
}

/* طبقة زجاجية خفيفة + تغميق بسيط */
.panel::before{
content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.30));
opacity:.55; transition: opacity .35s ease;
}

/* الرقم الكبير */
.panel::after{
content: attr(data-step);
position:absolute; inset:0; display:grid; place-items:center; z-index:1;
font-size: clamp(120px, 16vw, 220px);
font-weight:900; letter-spacing:-.02em;
color: rgba(0,0,0,.55);
mix-blend-mode:multiply;
transition: opacity .35s ease, transform .45s ease;
}

/* كبسولة العنوان */
.cap{
  position: absolute;
  z-index: 2;
  top: -7px;
  left: -4px;
  right: 0;
  width: 104%;
  height: 78px;
  border-radius: 40px 40px 0 0;
  background: #d9f3fa;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.cap-title{
margin:0; font-weight:700; font-size:clamp(14px,1.4vw,18px); color:#213a4a;
}

/* نص اللوحة عند التوسّع */
.content{
position:absolute; inset:0; z-index:3;
display:grid; place-content:center; justify-items:center;
text-align:center; padding: clamp(16px,3vw,28px);
color:#fff;
opacity:0; transform: translateY(10px);
transition: opacity .35s ease, transform .45s ease;
}
.content h4{ margin:0 0 10px; font-size:clamp(18px,2.2vw,26px); font-weight:800; }
.content p { margin:0; max-width:45ch; line-height:1.7; font-size:clamp(14px,1.4vw,18px); }

/* ===== Hover effects (desktop) ===== */
.story-panels:hover .panel{
flex:.9; filter: blur(1px) saturate(.85); transform: translateY(8px);
}
.story-panels .panel:hover{
flex:3; filter:none; transform: translateY(0);
border-radius:40px;                       /* كبر radius زي الصورة التانية */
}
.story-panels .panel:hover::before{ opacity:.85; }   /* تغميق الخلفية */
.story-panels .panel:hover::after{ opacity:0; transform: scale(.95); }
.story-panels .panel:hover .content{ opacity:1; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 900px){
.story-panels{ gap:12px; }
.panel{ min-height:380px; }
}
@media (max-width: 700px){
.story-panels{
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
}
.panel{
  flex: 0 0 78%;
  scroll-snap-align:center;
  min-height:420px;
}
/* في الموبايل: ما فيش hover؛ بنستخدم كلاس .active (JS) */
.panel.active{
  filter:none; transform:translateY(0);
  border-radius:40px;
}
.panel.active::before{ opacity:.85; }
.panel.active::after{ opacity:0; transform: scale(.95); }
.panel.active .content{ opacity:1; transform: translateY(0); }
}