/* ======================================================
   HEADER | FINAL FIXED VERSION
   - Logo & Brand centered visually
   - eHotline bar fixed to the right
   - Safe-area aware (iOS / Android)
====================================================== */

/* ======================================================
   AUTO LANGUAGE TYPOGRAPHY (NO RTL REQUIRED)
====================================================== */

/* Arabic text */
:lang(ar){
  font-family:"Cairo", system-ui, sans-serif;
}

/* English text */
:lang(en){
  font-family:"Inter", system-ui, sans-serif;
}



@font-face {
font-family: "Cairo";
src: url("../eHotline/Cairo.ttf");
} 
/* ======================================================
   HEADER | APP-LEVEL OFFICIAL (FIXED)
====================================================== */
 
 /* ======================================================
   GLOBAL TYPOGRAPHY SYSTEM
====================================================== */

/* الإعداد الافتراضي */
html{
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* العربي */
:lang(ar){
  font-family:"Cairo", system-ui, sans-serif;
  letter-spacing:0;
}

/* الإنجليزي */
:lang(en){
  font-family:"Inter", system-ui, sans-serif;
  letter-spacing:.02em;
}

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  
  background-color:#ffffff;

  border-bottom: 1px solid rgba(0,0,0,.06); z-index:9999;
}

/* ===== Layout ===== */
.header-in{
  display: flex;                 /* ⬅️ بدل Grid */
  align-items: center;
  justify-content: space-between;

  padding-inline:
    max(14px, env(safe-area-inset-left))
    max(14px, env(safe-area-inset-right));

  padding-block:
    calc(env(safe-area-inset-top, 0px) + 10px)
    10px;

  min-height: clamp(70px, 16vw, 88px);
}

/* ======================================================
   Arabic Brand Typography
====================================================== */

.ar-text,
.ar-text *{
  font-family:"Cairo", system-ui, sans-serif;
  letter-spacing:0;
}

/* الاسم الرئيسي */
.ar-text .brand-name{
  font-weight:700;
  font-size:14px;
  color:#0b0f16;
  margin:0;
  font-family:Cairo !important
}

/* IMC */
.ar-text .brand-sub{
  font-size:12px;
  font-weight:600;
  color:#034990;
  display:block;
  margin-top:2px;
  font-family:Cairo !important
}

/* السلوغن */
.ar-text .brand-slogan{
  display:block;
  font-size:11.5px;
  font-weight:500;
  color:#6b7a90;
  margin-top:4px;
  line-height:1.4;
  font-family:Cairo !important
}

/* ======================================================
   BRAND (LEFT)
====================================================== */
.brand-left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Logo */
.logo{
  width: clamp(78px, 30vw, 96px);
  height: auto;
  flex-shrink: 0;
}

/* Text */
.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* Name */
.brand-name{
  margin: 0;
   font-family:"Righteous-Regular",system-ui,sans-serif !important;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: #0b0f16;
}

/* IMC */
.brand-sub{
	font-family: "Righteous-Regular", system-ui, sans-serif!important;
  font-size:  13.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0b0f16;
}

/* Slogan */
.brand-slogan{
	font-family: "Righteous-Regular", system-ui, sans-serif!important;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #6b7280;
  white-space: nowrap;
}

/* Hide slogan on very small screens */
@media (max-width: 420px){
  .brand-slogan{
    display: none;
  }
}

/* ======================================================
   eHotline (RIGHT)
====================================================== */
.hotline-right{
  flex-shrink: 0;
}

.hotline-right .bar{
  max-height: clamp(28px, 6vw, 38px);
  width: auto;
  display: block;
  object-fit: contain;
}

 /* ======================================================
   BRAND TEXT | Arabic & English Typography
====================================================== */

/* Arabic (RTL) */
[dir="rtl"] .brand-name,
[dir="rtl"] .brand-slogan{
  font-family:"Cairo", system-ui, sans-serif;
}

/* English (LTR) */
[dir="ltr"] .brand-name,
[dir="ltr"] .brand-slogan{
  font-family:"Inter", system-ui, sans-serif;
}

 
/* ======================================================
   ROOT VAR
====================================================== */
:root{
  --header-h: 0px;
}

/* ======================================================
   HEADER | FIXED OFFICIAL
====================================================== */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 100;
  background: #ffffff;                 /* أبيض صريح */
  border-bottom: 1px solid #eceff4;
}

/* Header layout */
.header-in{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-inline:
    max(14px, env(safe-area-inset-left))
    max(14px, env(safe-area-inset-right));

  padding-block:
    calc(env(safe-area-inset-top, 0px) + 10px)
    10px;
}

/* ======================================================
   BRAND (LEFT)
====================================================== */
.brand-left{
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo{
  width: clamp(78px, 30vw, 96px);
  height: auto;
}

.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

 
 

 

@media (max-width:420px){
  .brand-slogan{ display:none; }
}

/* ======================================================
   eHotline BAR (RIGHT)
====================================================== */
.hotline-right .bar{
  max-height: clamp(28px, 6vw, 38px);
  width: auto;
  display: block;
}

/* ======================================================
   HEADER SPACER (AUTO HEIGHT)
====================================================== */
.header-spacer{
  height: var(--header-h);     /* ⬅️ ارتفاع حقيقي */
}

/* ======================================================
   TICKER | CREATIVE OFFICIAL VERSION (UNCHANGED)
====================================================== */
.ticker{
  display:flex;
  align-items:center;
  gap:16px;

  padding:
    6px max(12px, env(safe-area-inset-left))
    6px max(12px, env(safe-area-inset-right));

  border-top:1px solid #eceff4;
  overflow:hidden;

  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:clamp(.75rem, 2.6vw, .85rem);
  color:#374151;
}

/* Label */
.ticker-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* Pulse dot */
.pulse-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fbb900;
  position:relative;
}
.pulse-dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:rgba(195,32,38,.25);
  animation:pulse 2.4s ease-out infinite;
}

/* Scrolling text */
.ticker-track{ overflow:hidden; flex:1; }
.marquee{
  white-space:nowrap;
  animation:tickerScroll 30s linear infinite;
  font-weight:500;
}

/* Animations */
@keyframes tickerScroll{
  from{ transform:translateX(100%); }
  to{ transform:translateX(-100%); }
}
@keyframes pulse{
  0%{ transform:scale(.6); opacity:.8; }
  100%{ transform:scale(1.8); opacity:0; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .marquee{ animation:none; }
  .pulse-dot::after{ animation:none; }
}
 
/* ======================================================
   TICKER | Arabic & English Typography
====================================================== */

/* Arabic (RTL) */
[dir="rtl"] .ticker-label,
[dir="rtl"] .marquee{
  font-family:"Cairo", system-ui, sans-serif;
}

/* English (LTR) */
[dir="ltr"] .ticker-label,
[dir="ltr"] .marquee{
  font-family:"Inter", system-ui, sans-serif;
}


/* ======================================================
   VERY SMALL SCREENS TWEAK
====================================================== */
@media (max-width: 360px){
  .logo{ width: 80px; }
  
  .hotline-left .bar{ max-height: 28px; }
}





 

/* ======================================================
   ROOT VARIABLES | Brand Palette
====================================================== */
:root{
  --imc-blue:#033e7c;
  --imc-deep:#021f3f;

  /* Sovereign Metallic Gold */
  --gold-main:#d4af37;
  --gold-dark:#b8962e;
}

 
/* ======================================================
   HERO SECTION
====================================================== */
/* ======================================================
   RESET
====================================================== */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:"Inter",system-ui,sans-serif;
  background:#ffffff;
  color:#fff;
}
.imc-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:120px;

  background:linear-gradient(
    to bottom,
    rgba(2,47,99,0) 0%,
    #ffffff 100%
  );

  z-index:1;
}


.imc-hero-divider.crest{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:22px auto 28px;
}

.imc-hero-divider.crest span{
  height:5px;
  background:#d4d4d4;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}

.imc-hero-divider.crest span:nth-child(1),
.imc-hero-divider.crest span:nth-child(3){
  width:34px;
  opacity:.45;
}

.imc-hero-divider.crest span:nth-child(2){
  width:64px;
  height:7px; /* ⬅️ القيادة */
  opacity:1;
}

/* ======================================================
   HERO
====================================================== */
.imc-hero{
  position:relative;
  min-height:calc(100vh - 70px);
  padding:80px 20px 130px; /* مساحة للماتريكس */
  background:
    linear-gradient(rgba(2,47,99,.85),rgba(2,47,99,.85)),
    url("../logo/hero-bg.avif") center/cover no-repeat;

  overflow:visible; /* ⬅️ مهم جدًا */
}

/* Center content */
.imc-content{
  max-width:920px;
  margin:auto;
  text-align:center;
}

/* Logo */
.imc-logo img{
  width:280px;
  margin-bottom:0px;
}

/* Badge */
.imc-badge{
  display:inline-block;
  padding:8px 18px;
  border-radius:30px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4);
  font-size:13px;
  margin-bottom:22px;
}

/* Title */
.imc-content h1{
  font-size:22px;
  line-height:1.2;
  margin-bottom:18px;
    color:#fbb900;
}

.sovereign-line{
   color:#f0c75e;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.imc-content h1 .sovereign-line{
  color:#ffffff;
  text-shadow:
    0 2px 4px rgba(0,0,0,.45),
    0 0 1px rgba(0,0,0,.6);
}

/* Description */
.imc-content p{
  max-width:720px;
  margin:0 auto 32px;
  font-size:16px;
  opacity:.95;
  color:#ffffff;
}

/* Actions */
.imc-actions{
  display:flex;
  gap:14px;
  justify-content:center; margin-bottom:-20px;
}

.imc-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:18px;
  text-decoration:none;
  font-weight:600;
  color:#d4d4d4;

  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px);
}

.btn-icon-img{
  width:22px;
}

/* ======================================================
   MATRIX (BRIDGE STYLE)
====================================================== */
.imc-matrix-bridge{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,50%); /* ⬅️ نص فوق ونص تحت */
  width:92%;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;

  z-index:10;
}

/* Card */
.imc-metric{
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.4);
  border-radius:26px;

  padding:26px 14px 28px;
  text-align:center;

  box-shadow:
    0 26px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.6);
}

.imc-metric img{
  width:38px;
  margin-bottom:12px;
}

.imc-metric b{
  display:block;
  font-size:14px;
  font-weight:900;
  color:#000000;margin-bottom:5px;
}

.imc-metric span{
  font-size:13px;
  opacity:.95;
  color:#000000;
}

/* ======================================================
   RESPONSIVE
====================================================== */
@media(max-width:640px){
  .imc-content h1{
    font-size:32px;
  }

  .imc-matrix-bridge{
    gap:12px;
  }

  .imc-metric{
    padding:20px 10px 22px;
  }

  .imc-metric b{
    font-size:14px;
  }
}

.imc-hero-spacer{
  height:140px; /* المسافة اللي الماتريكس نازلة فيها */
}


/* ======================================================
   MATRIX ENTRY ANIMATION – 1666 STYLE
====================================================== */

/* الحالة الافتراضية (قبل الظهور) */
.imc-matrix-bridge .imc-metric{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,.61,.36,1);
}

/* الحالة بعد التفعيل */
.imc-matrix-bridge.animate .imc-metric{
  opacity:1;
  transform:translateY(0);
}

/* Stagger – كل كارت بتطلع بعد اللي قبلها */
.imc-matrix-bridge.animate .imc-metric:nth-child(1){
  transition-delay:.05s;
}
.imc-matrix-bridge.animate .imc-metric:nth-child(2){
  transition-delay:.15s;
}
.imc-matrix-bridge.animate .imc-metric:nth-child(3){
  transition-delay:.25s;
}


/* ======================================================
   BUTTON BASE | FIXED (COMPACT)
====================================================== */
.imc-btn{
  height:52px;              /* ⬅️ أصغر */
  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;

  padding:0 16px;           /* ⬅️ يقلل العرض */

  font-size:12.5px;         /* ⬅️ أصغر */
  font-weight:800;
  text-decoration:none;
  letter-spacing:.01em;

  white-space:nowrap;       /* سطر واحد */
  overflow:hidden;          /* ⬅️ يمنع الخروج */
  text-overflow:ellipsis;

  transition:.3s ease;
}


/* ======================================================
   BUTTON ICON
====================================================== */
.btn-icon{
  width:18px;               /* ⬅️ أصغر */
  height:18px;
  flex-shrink:0;
}

.btn-icon svg{
  width:100%;
  height:100%;
  fill:currentColor;
}


/* ======================================================
   PRIMARY BUTTON | Clean Sovereign Gold
====================================================== */
.imc-primary{
  background:linear-gradient(-135deg,#ffe8a6,var(--gold-main));
  color:#1b1b1b;

  box-shadow:none;
  border:1px solid rgba(212,175,55,.65);
}

.imc-primary:hover{
  transform:translateY(-2px);
}


/* ======================================================
   SECONDARY BUTTON
====================================================== */
.imc-secondary{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(20px);
  color:#ffd253;
}

.imc-secondary:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-2px);
}


/* ======================================================
   MOBILE SAFETY (VERY IMPORTANT)
====================================================== */
@media (max-width:420px){
  .imc-actions{
    grid-template-columns:1fr;   /* ⬅️ عمود واحد */
    gap:10px;
  }

  .imc-btn{
    justify-content:center;
  }
}


/* ======================================================
   ANIMATIONS
====================================================== */
@keyframes lightSweep{
  from{transform:translateX(-45%)}
  to{transform:translateX(45%)}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}


/* ======================================================
   BUTTON ICON IMAGE
====================================================== */
.btn-icon-img{
  width:18px;
  height:18px;
  object-fit:contain;
  flex-shrink:0;
}





/* ======================================================
   IMC eHotline – Mobile App Grid (ICON IMAGES)
====================================================== */
/* ======================================================
   IMC APP GRID – PREMIUM 3 COLUMNS
====================================================== */

.imc-app-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:14px;
}

/* ================= TILE ================= */
.imc-tile{
  background:#ffffff;
  border-radius:18px;
  padding:16px 12px 14px;
  text-align:center;
  text-decoration:none;
  color:#022f63;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;

  box-shadow:
    0 10px 26px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

/* Touch / Hover */
.imc-tile:active,
.imc-tile:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 34px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* ================= ICON ================= */
.tile-icon{
  width:52px;
  height:52px;
  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(180deg,#f7faff,#eef3fb);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(3,73,144,.18);
}

.tile-icon img{
  width:26px;
  height:26px;
  object-fit:contain;
}

/* ================= TEXT ================= */
.imc-tile h4{
  font-size:13px;
  font-weight:700;
  margin-top:4px;
}

.imc-tile span{
  font-size:11px;
  font-weight:500;
  color:#6b7c95;
  line-height:1.3;
}

/* ================= RESPONSIVE ================= */
/* Small phones */
@media(max-width:380px){
  .imc-app-grid{
    grid-template-columns:repeat(2,1fr);
  }
}



/* ======================================================
   IMC eHotline – Social Media Row (LUX)
====================================================== */

.imc-social-row.lux{
  margin:12px 16px 30px;
  padding:14px 18px;

  display:flex;
  justify-content:center;
  gap:18px;

  background:
    linear-gradient(180deg,#ffffff,#f3f6fb);

  border-radius:22px;

  box-shadow:
    0 14px 34px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ===== Icon Holder ===== */
.imc-social-row.lux a{
  width:56px;
  height:56px;
  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(180deg,#f7faff,#eef2f8);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 4px rgba(0,0,0,.06),
    0 6px 16px rgba(0,0,0,.12);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* Hover / Tap */
.imc-social-row.lux a:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -3px 6px rgba(0,0,0,.08),
    0 10px 24px rgba(0,0,0,.18);
}

/* ===== Icon Image ===== */
.imc-social-row.lux img{
  width:30px;
  height:30px;
  object-fit:contain;
  filter:saturate(1.05);
}






/* ======================================================
   IMC eHotline – Choose Your Path (Mobile App UI)
====================================================== */

.imc-path{
  padding:42px 18px 56px;
  background:#f6f8fb;
  font-family:"Inter",system-ui,sans-serif;
}

/* ===== Header ===== */
.imc-path-header{
  text-align:center;
  max-width:520px;
  margin:0 auto 34px;
}

.imc-path-header h2{
  font-size:22px;
  font-weight:800;
  color:#022f63;
  margin-bottom:10px;
}

.imc-path-header p{
  font-size:14px;
  line-height:1.6;
  color:#5f6f86;
}

/* ===== List ===== */
.imc-path-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ===== Card ===== */
.path-card{
  display:flex;
  align-items:center;
  gap:16px;

  padding:18px 20px;
  background:#ffffff;
  border-radius:22px;

  box-shadow:0 12px 30px rgba(0,0,0,.08);
  border:1px solid #edf1f7;

  transition:.35s ease;
}

.path-card:hover{
  transform:translateX(6px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* ===== Icon ===== */
.path-icon{
  width:58px;
  height:58px;
  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(135deg,#eef3ff,#f9fbff);
}

.path-icon img{
  width:34px;
  height:34px;
  object-fit:contain;
}

/* ===== Content ===== */
.path-content h4{
  font-size:15.5px;
  font-weight:700;
  color:#022f63;
  margin-bottom:6px;
}

.path-content p{
  font-size:13px;
  color:#6b7a90;
  line-height:1.5;
}



/* ======================================================
   IMC PATH | Arabic & English Typography
====================================================== */

/* Arabic (RTL) */
[dir="rtl"] .imc-path-header h2,
[dir="rtl"] .imc-path-header p,
[dir="rtl"] .path-content h4,
[dir="rtl"] .path-content p,
[dir="rtl"] .join-mini-text{
  font-family:"Cairo", system-ui, sans-serif;
}

/* English (LTR) */
[dir="ltr"] .imc-path-header h2,
[dir="ltr"] .imc-path-header p,
[dir="ltr"] .path-content h4,
[dir="ltr"] .path-content p,
[dir="ltr"] .join-mini-text{
  font-family:"Inter", system-ui, sans-serif;
}


/* ======================================================
   IMC – JOIN IMC (GLASS COMPACT)
====================================================== */

.imc-join-center{
  display:flex;
  justify-content:center;
  margin:18px 0 28px;
}

/* ===== Button ===== */
.imc-join-glass{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 18px;

  background:rgba(255,255,255,.65);
  backdrop-filter:blur(10px);

  border-radius:999px;
  text-decoration:none;

  color:#034990;
  font-weight:700;
  font-size:14px;

  border:1px solid rgba(3,73,144,.18);

  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.85);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

/* Hover / Tap */
.imc-join-glass:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 32px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* ===== Icon ===== */
.join-mini-icon{
  width:28px;
  height:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(180deg,#ffffff,#f1f5ff);

  border-radius:8px;
}

.join-mini-icon img{
  width:16px;
  height:16px;
}

/* ===== Text ===== */
.join-mini-text{
  white-space:nowrap;
}


/* ======================================================
   IMC eHotline – Digital Ecosystem (LUX)
====================================================== */
.imc-eco-mini{margin-top:-50px}
.imc-eco-mini.lux{
  padding:30px 16px 40px;
  background:
    linear-gradient(180deg,#ffffff,#f4f7fc);
}

/* ===== Grid ===== */
.eco-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

/* ===== Card ===== */
.eco-mini-card{
  text-decoration:none;
  text-align:center;

  padding:18px 12px 14px;

  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);

  border-radius:20px;
  border:1px solid rgba(3,73,144,.15);

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 6px rgba(0,0,0,.05),
    0 14px 32px rgba(0,0,0,.12);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* Hover / Tap */
.eco-mini-card:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -3px 8px rgba(0,0,0,.08),
    0 20px 46px rgba(0,0,0,.18);
}

/* ===== Logo Pedestal ===== */
.eco-logo{
  width:72px;
  height:72px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(180deg,#ffffff,#eef3fb);

  border-radius:18px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 18px rgba(3,73,144,.18);
}

.eco-logo img{
  width:95px;
  height:95px;
  object-fit:contain;
}

/* ===== Name ===== */
.eco-name{
  font-size:12px;
  font-weight:700;
  color:#022f63;
  line-height:1.35;
}


/* ======================================================
   IMC ECOSYSTEM | Arabic & English Typography
====================================================== */

/* Arabic */
[dir="rtl"] .imc-eco-mini h2,
[dir="rtl"] .imc-eco-mini p,
[dir="rtl"] .eco-name{
  font-family:"Cairo", system-ui, sans-serif;
}

/* English */
[dir="ltr"] .imc-eco-mini h2,
[dir="ltr"] .imc-eco-mini p,
[dir="ltr"] .eco-name{
  font-family:"Inter", system-ui, sans-serif;
}

 


/* ======================================================
   NEWS CAROUSEL | Arabic & English Typography
====================================================== */

/* Arabic */
[dir="rtl"] .news-carousel h2,
[dir="rtl"] .news-carousel p,
[dir="rtl"] .news-carousel h3,
[dir="rtl"] .news-date,
[dir="rtl"] .btn-read{
  font-family:"Cairo", system-ui, sans-serif;
}

/* English */
[dir="ltr"] .news-carousel h2,
[dir="ltr"] .news-carousel p,
[dir="ltr"] .news-carousel h3,
[dir="ltr"] .news-date,
[dir="ltr"] .btn-read{
  font-family:"Inter", system-ui, sans-serif;
}



/* ======================================================
   NEWS DETAILS – IMC MEDIA CENTER
====================================================== */

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"Cairo",system-ui,sans-serif;
  background:#f4f6fb;
  color:#1c2b4a;
  line-height:1.9;
}

.news-content{margin-top:150px}


/* Container */
.news-wrap{
  max-width:900px;
  margin:0 auto;
  padding:28px 16px 60px;
}

/* Header */
.news-header{
  background:#ffffff;
  padding:26px 24px;
  border-radius:22px;

  box-shadow:
    0 18px 40px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);

  margin-bottom:22px;
}

.news-category{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  color:#034990;
  background:#eef3ff;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:12px;
}

.news-title{
  font-size:22px;
  font-weight:800;
  margin-bottom:10px;
}

.news-date{
  font-size:13px;
  color:#6b7a90;
}

/* Content */
.news-content{
  background:#ffffff;
  padding:28px 24px;
  border-radius:22px;

  box-shadow:
    0 18px 40px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Highlights */
.news-highlights{
  background:#f7faff;
  border:1px solid #e3e9f4;
  border-radius:18px;
  padding:20px 22px;
  margin-bottom:26px;
}

.news-highlights h3{
  font-size:16px;
  font-weight:800;
  margin-bottom:12px;
  color:#022f63;
}

.news-highlights ul{
  list-style:none;
}

.news-highlights li{
  position:relative;
  padding-right:18px;
  margin-bottom:10px;
  font-size:14px;
}

.news-highlights li::before{
  content:"•";
  position:absolute;
  right:0;
  color:#034990;
  font-size:18px;
  line-height:1;
}

/* Paragraphs */
.news-content p{
  font-size:15px;
  margin-bottom:18px;
}

/* Section title inside content */
.news-section-title{
  font-size:17px;
  font-weight:800;
  color:#022f63;
  margin:26px 0 12px;
}

/* Footer actions */
.news-actions{
  margin-top:28px;
  display:flex;
  justify-content:center;
}

.news-actions a{
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:#034990;

  padding:12px 22px;
  border-radius:999px;

  background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);

  border:1px solid rgba(3,73,144,.2);

  box-shadow:
    0 10px 26px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.85);

  transition:.2s ease;
}

.news-actions a:hover{
  transform:translateY(-1px);
}



/* ======================================================
   IMC eHotline – Development Partners Carousel
====================================================== */

.imc-partners{
  padding:26px 0 36px;
  background:#ffffff;
  overflow:hidden;
  font-family:"Inter",system-ui,sans-serif;
}

/* Title */
.partners-title{
  text-align:center;
  font-size:18px;
  font-weight:700;
  color:#022f63;
  margin-bottom:18px;
  font-family:Cairo
}

/* Rail */
.partners-rail{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* Track */
.partners-track{
  display:flex;
  gap:42px;
  align-items:center;
  width:max-content;

  animation:partnersScroll 38s linear infinite;
}

/* Logos */
.partners-track img{
  height:65px;
  width:auto;
  object-fit:contain;

  filter:none;
  opacity:1;
  transition:.35s ease;
}

/* Hover (desktop only) */
.partners-track img:hover{
  filter:grayscale(0%);
  opacity:1;
}

/* Animation */
@keyframes partnersScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ======================================================
   PARTNERS SECTIONS | Arabic & English Typography
====================================================== */

/* Arabic (RTL) */
[dir="rtl"] .partners-title,
[dir="rtl"] .partners-box-btn{
  font-family:"Cairo", system-ui, sans-serif;
}

/* English (LTR) */
[dir="ltr"] .partners-title,
[dir="ltr"] .partners-box-btn{
  font-family:"Inter", system-ui, sans-serif;
}


/* ======================================================
   Development Partners – Boxed Carousel
====================================================== */

/* Container box */
.partners-box{
  width:92%;
  max-width:1100px;
  margin:0 auto;

  background:#ffffff;
  border-radius:22px;

  padding:18px 0;
  overflow:hidden;              /* ⬅️ أهم حاجة */

  box-shadow:
    0 14px 36px rgba(0,0,0,.08),
    inset 0 0 0 1px #edf1f7;
}

 
 

/* ======================================================
   IMC eHotline – Success Partners
====================================================== */

/* Title Variation */
.partners-title.success{
  margin-top:34px;
}

/* Box variation */
.success-box{
  background:#ffffff;
  padding:22px 0;            /* ⬅️ أوسع شوية */
}

/* Track variation */
.success-track{
  gap:54px;                  /* ⬅️ مسافة أوسع */
  animation-duration:48s;    /* ⬅️ أهدى */
}

/* Logo size */
.success-track img{
  height:65px;               /* ⬅️ أكبر */
  width:auto;
  object-fit:contain;
}



/* Success Partners – reverse direction */
.success-track{
  gap:54px;
  animation:partnersScrollReverse 46s linear infinite;
}

/* Reverse animation */
@keyframes partnersScrollReverse{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
.success-box{
  background:#f9fbff;              /* ⬅️ مختلف */
  padding:22px 0;
  border-radius:22px;

  box-shadow:
    0 12px 30px rgba(0,0,0,.06),
    inset 0 0 0 1px #e6ecff;
}
.success-box::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);

  width:120px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#034990,#fbb900);
}









/* ======================================================
   Partners Box – Footer Button
====================================================== */

/* Footer داخل البوكس */
.partners-box-footer{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

/* الزر نفسه */
.partners-box-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 18px;
  border-radius:999px;

  font-size:13px;
  font-weight:600;
  text-decoration:none;

  color:#034990;
  background:#eef3ff;

  transition:.25s ease;
}

/* السهم */
.partners-box-btn .arrow{
  display:inline-block;
  transition:transform .25s ease;
  font-size:15px;
}

/* Hover / Tap */
.partners-box-btn:hover{
  background:#dde7ff;
}

.partners-box-btn:hover .arrow{
  transform:translateX(4px); /* ⬅️ حركة ذكية */
}



/* ======================================================
   HEADQUARTER & MAP | Arabic & English Typography
====================================================== */

/* Arabic (RTL) */
[dir="rtl"] .hq-badge,
[dir="rtl"] .hq-title,
[dir="rtl"] .hq-address,
[dir="rtl"] .hq-btn-gold{
  font-family:"Cairo", system-ui, sans-serif;
}

/* English (LTR) */
[dir="ltr"] .hq-badge,
[dir="ltr"] .hq-title,
[dir="ltr"] .hq-address,
[dir="ltr"] .hq-btn-gold{
  font-family:"Inter", system-ui, sans-serif;
}


/* ======================================================
   SECTION WRAPPER
====================================================== */
.imc-branch-mini{
  padding:22px 16px 30px;
  background:#ffffff;
  font-family:"Inter",system-ui,sans-serif;
}

/* ======================================================
   GRID (Always Side by Side – Mobile First)
====================================================== */
.branch-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

/* ======================================================
   CARD – EXECUTIVE GLASS
====================================================== */
.branch-mini-card{
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  gap:12px;

  padding:16px 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.95) 100%
    );

  border-radius:22px;
  border:1px solid rgba(3,73,144,.18);

  box-shadow:
    0 18px 40px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(3,73,144,.06);

  backdrop-filter:blur(14px);
  text-decoration:none;
  transition:.35s ease;

  animation:eliteFadeUp .6s ease both;
}

/* Glass highlight sweep */
.branch-mini-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.45) 50%,
      transparent 70%
    );
  opacity:.35;
  transform:translateX(-120%);
  transition:transform .8s ease;
}

.branch-mini-card:hover::before{
  transform:translateX(120%);
}

/* Hover */
.branch-mini-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 26px 60px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* ======================================================
   HIGHLIGHT CARD (Nearest Branch – Sovereign Accent)
====================================================== */
.branch-mini-card.highlight{
  border-color:rgba(212,175,55,.55); /* Gold */
  box-shadow:
    0 22px 50px rgba(3,73,144,.18),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* ======================================================
   ICON HOLDER – MATRIX DEPTH
====================================================== */
.branch-mini-icon.svg-icon{
  width:46px;
  height:46px;
  border-radius:14px;

  background:
    radial-gradient(
      120% 120% at 30% 20%,
      rgba(255,255,255,1),
      rgba(230,238,255,.95) 55%,
      rgba(210,220,245,.95) 100%
    );

  color:#033e7c;

  box-shadow:
    0 10px 26px rgba(3,62,124,.22),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(3,62,124,.12);

  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* Highlight icon glow */
.branch-mini-card.highlight .branch-mini-icon{
  box-shadow:
    0 12px 28px rgba(212,175,55,.35),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* SVG */
.branch-mini-icon svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

/* ======================================================
   TEXT
====================================================== */
.branch-mini-text strong{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#022f63;
  letter-spacing:.2px;
  margin-bottom:2px;
}

.branch-mini-text span{
  font-size:12px;
  color:#5e6f88;
}


/* ======================================================
   TEXT – Arabic & English Fonts
====================================================== */

/* Arabic (RTL) */
[dir="rtl"] .branch-mini-text strong,
[dir="rtl"] .branch-mini-text span{
  font-family:"Cairo", system-ui, sans-serif;
}

/* English (LTR) */
[dir="ltr"] .branch-mini-text strong,
[dir="ltr"] .branch-mini-text span{
  font-family:"Inter", system-ui, sans-serif;
}

/* Typography */
.branch-mini-text strong{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#022f63;
  letter-spacing:.2px;
  margin-bottom:2px;
}

.branch-mini-text span{
  font-size:12px;
  color:#5e6f88;
}


/* ======================================================
   ENTRY ANIMATION
====================================================== */
@keyframes eliteFadeUp{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


 
/* ===== Fixed, Responsive Footer (tight spacing) ===== */
/* ==========================================================================
   14) الفوتر السفلي (Footer Tabs + Primary Form Button)
   ========================================================================== */
.footer{
  position:fixed; left:0; right:0; bottom:0; height:var(--footerH);
  padding-bottom:env(safe-area-inset-bottom);
  background:#fff; color:#445; border-top:1px solid #e8eef7;
  display:grid; grid-template-columns:repeat(5,1fr);
  z-index:25; backdrop-filter:saturate(140%) blur(10px)
}
.fitem{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:relative; font-size:11px; color:#445 }
.fitem .ico{ width:36px; height:28px; display:grid; place-items:center; border-radius:8px }
.fitem small{ font-size:8px; line-height:1; white-space:nowrap; font-weight:600; color:#0b2344; text-shadow:0 1px 0 rgba(255,255,255,.65) }
.fitem.active{ color:#0b2344; filter:drop-shadow(0 2px 4px rgba(11,35,68,.15)) }

/* الزر الأساسي (طلب عرض) — دائرة مميزة وموجات */
.fitem.primary .ico{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(140deg,var(--accent-2),var(--accent)); color:#fff;
  display:grid; place-items:center; transform:translateY(-6px);
  box-shadow:0 10px 26px rgba(33,67,199,.28), 0 0 0 6px rgba(33,161,240,.10);
  position:relative;
}
.fitem.primary .ico::before,
.fitem.primary .ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid rgba(33,67,199,.35);
  transform:scale(1); opacity:.55; animation:ripple 2.8s ease-out infinite;
}
.fitem.primary .ico::after{ animation-delay:1s }
@keyframes ripple{ 0%{ transform:scale(1); opacity:.55 } 70%{ opacity:.08 } 100%{ transform:scale(1.85); opacity:0 } }

/* ==========================================================================
   15) المودال (Modal)
   ========================================================================== */
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:70; background:rgba(3,5,12,.45); backdrop-filter:blur(6px) }
.modal.open{ display:grid }
.sheet{
  position:relative; width:min(92vw,520px); max-height:88svh; overflow:auto;
  border-radius:18px; padding:16px; background:var(--card);
  border:1px solid #e6ecf5; box-shadow:0 20px 50px rgba(0,0,0,.25);
  animation:modalIn .32s cubic-bezier(.16,1,.3,1); color:var(--fg)
}
@keyframes modalIn{ from{ transform:translateY(18px) scale(.98); opacity:.3 } to{ transform:translateY(0) scale(1); opacity:1 } }
.sheet h3{ margin:0 0 8px }
.sheet .x{ position:absolute; top:10px; inset-inline-end:12px; cursor:pointer; font-weight:800; font-size:18px; line-height:1 }
.sheet label{ display:block; font-size:12px; margin:6px 2px }
.sheet input,.sheet textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #e6ecf5; background:#fff; color:var(--fg) }
.note{ color:var(--muted) }


/* ==========================================================================
   17) تحسينات ريسبونسف (Responsive)
   ========================================================================== */
@media (max-width:720px){
  .card{ min-width:82vw }
  .pcard{ width:82vw; height:180px }
  #contacts .contacts-grid{ grid-template-columns:repeat(2,1fr) }
  .float-store .msg{ max-width:200px; font-size:12px }
}
@media (max-width:380px){
  .footer .fitem small{ font-size:10px }
  .fitem.primary .ico{ width:50px; height:50px; transform:translateY(-5px) }
}

/* Contacts only */
.dark #contacts .gicon,
.dark #contacts .gicon i,
.dark #contacts .gicon svg{
  color: var(--navy) !important;   /* #021460 */
}

.dark #contacts .citem small{
  color:#e7efff !important;        /* العنوان تحت الأيقونة */
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* حجم الأيقونة داخل الدائرة */
#contacts .gicon-img{
  width: var(--soc-size, 28px);
  height: var(--soc-size, 28px);
  display: block;
  object-fit: contain;
  position: relative; z-index: 1; /* فوق الهالات ::before/::after */
  filter: none;                    /* نخلي الألوان الأصلية */
  user-select: none; -webkit-user-drag: none;
  image-rendering: -webkit-optimize-contrast;
}

/* لو عايزة تكبّريها بسرعة: بدّلي المتغيّر */
#contacts .gicon { /* الدائرة نفسها ثابتة عندك */
  /* مثال تكبير خفيف */
  /* --soc-size: 30px; */
}
/* ==========================================================================
   Footer — 7 tabs, centered primary, compact icons & labels
   ========================================================================== */
:root{
  --footerH: 64px;   /* كان 66px */
  --tab-ico: 22px;   /* حجم صورة الـPNG داخل المربع */
  --tab-gap: 3px;    /* المسافة بين الأيقونة والعنوان */
}

.footer{
  display:grid;
  grid-template-columns: repeat(7, 1fr); /* 3 يمين + فورم + 3 شمال */
  height: var(--footerH);
}

/* تبويب عادي */
.footer .fitem{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--tab-gap);
  min-width: 52px;
  -webkit-tap-highlight-color: transparent;
}

/* صندوق الأيقونة (أصغر شوية) */
.footer .fitem:not(.primary) .ico{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:#fff; border:1px solid #e6ecf5;
  box-shadow:0 3px 10px rgba(11,35,68,.08);
}

/* صورة الـPNG داخل الصندوق */
.footer .fitem .ico > img.f-ico{
  width: var(--tab-ico); height: var(--tab-ico);
  display:block; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}

/* العنوان: أصغر ورافعه لفوق سنة */
.footer .fitem small{
  font-size:10.5px; line-height:1; white-space:nowrap;
  font-weight:800; color:#0b2344; text-shadow:0 1px 0 rgba(255,255,255,.6);
  transform: translateY(-2px);
}

/* زر الفورم في المنتصف */
.footer .fitem.primary .ico{
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(
  140deg,
  #4f73b8 0%,
  #3a5fa4 45%,
  #1f2f6b 100%
);
  color:#fff; display:grid; place-items:center;
  transform:translateY(-6px);
  box-shadow:0 10px 22px rgba(33,67,199,.25), 0 0 0 6px rgba(33,161,240,.10);
  position:relative;
}
a{
  text-decoration: none;
}

.footer .fitem.primary .ico::before,
.footer .fitem.primary .ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid rgba(33,67,199,.35);
  transform:scale(1); opacity:.5; animation:ripple 2.6s ease-out infinite;
}
.footer .fitem.primary .ico::after{ animation-delay:.9s }
@keyframes ripple{ 0%{transform:scale(1);opacity:.5} 70%{opacity:.08} 100%{transform:scale(1.8);opacity:0} }

/* دارك مود للفوتر فقط */
.dark .footer{
  background:linear-gradient(180deg, rgba(11,35,68,.92), rgba(21,58,115,.85));
  border-top:1px solid rgba(255,255,255,.1);
}
.dark .footer .fitem small{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.dark .footer .fitem:not(.primary) .ico{
  background:linear-gradient(180deg,#103767,#0f2e5a);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}

/* شاشات صغيرة جداً */
@media (max-width:380px){
  :root{ --tab-ico:20px; }
  .footer .fitem small{ font-size:10px; }
  .footer .fitem:not(.primary) .ico{ width:32px; height:32px; }
  .footer .fitem.primary .ico{ width:46px; height:46px; }
}
/* ===== Footer fine-tune: smaller labels + raise primary icon ===== */

/* صغّري عناوين التبويبات وارفعيها سنة */
.footer .fitem small{
  font-size: 8.8px;          /* كان ~10.5–12px */
  line-height: 1.5;
  transform: translateY(-10px); /* تطلع لفوق سنة */
  font-weight: 600;            /* أخفّ شوية من 800 */
  white-space: nowrap;
}

/* ارفعي أيقونة الفورم أكتر شوية عشان تبان في النص */
.footer .fitem.primary .ico{
  transform: translateY(-10px);  /* كان -6px */
  /* لو محتاجة أقل/أكثر عدّلي الرقم بس */
}

/* شاشة صغيرة جدًا */
@media (max-width: 380px){
  .footer .fitem small{ font-size: 9.2px; transform: translateY(-2px); }
  .footer .fitem.primary .ico{ transform: translateY(-9px); }
}


/* ===== Footer labels – FIXED ===== */
.footer .fitem{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px; /* التحكم الحقيقي في المسافة */
  min-width:52px;
}

.footer .fitem small{
  font-size:8px !important;
  line-height:1.1;
  font-weight:600;
  color:#0b2344;
  white-space:nowrap;
  text-align:center;
}


/* ======================================================
   Floating Register Button – IMC
====================================================== */

/* زر التسجيل – دائرة جراديانت أزرق/ذهبي هادي */
.register-fab{
  position:fixed;
  inset-inline-end:max(14px, env(safe-area-inset-right));
  inset-block-end:calc(86px + env(safe-area-inset-bottom));
  z-index:70;

  inline-size:58px;
  block-size:58px;
  border:0;
  border-radius:999px;

  display:grid;
  place-items:center;

  background-color:#fbb900;
 
  color:#fff;

  box-shadow:0 10px 26px rgba(3,73,144,.35);
  animation:bob 2.6s ease-in-out infinite;
}

/* حركة خفيفة */
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* أيقونة */
.register-fab svg{
  inline-size:26px;
  block-size:26px;
}

/* ======================================================
   Floating Bubble – Register
====================================================== */

.register-bubble{
  position:fixed;
  inset-inline-end:calc(env(safe-area-inset-right) + 14px + 58px + 8px);
  inset-block-end:calc(86px + env(safe-area-inset-bottom));
  z-index:71;

  padding:10px 16px;
  max-inline-size:min(65vw, 280px);

  background:#ffffff;
  color:#0b1b42;

  border:1px solid #e6ebf3;
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.14);

  font-size:13px;
  font-weight:500;
  white-space:nowrap;

  display:none;
}

/* إظهار */
.register-bubble.show{
  display:block;
}

/* ======================================================
   FLOATING REGISTER | FORCE LEFT IN RTL
====================================================== */

/* Default position (LTR & RTL) */
.register-fab{
  position:fixed;
  bottom:50px;
  left:18px;          /* ⬅️ شمال */
  right:auto;
  z-index:999;
}
/* ======================================================
   FLOATING REGISTER | FORCE LEFT IN RTL
====================================================== */

/* Default position (LTR & RTL) */
.register-fab{
  position:fixed;
  bottom:60px;
  left:18px;          /* ⬅️ شمال */
  right:auto;
  z-index:999;
}
/* ======================================================
   FLOATING REGISTER | FORCE LEFT IN RTL
====================================================== */

/* Default position (LTR & RTL) */
.register-fab{
  position:fixed;
  bottom:90px;
  left:18px;          /* ⬅️ شمال */
  right:auto;
  z-index:999;
}

/* Bubble */
.register-bubble{
  position:fixed;
  bottom:100px;
  left:72px;          /* ⬅️ شمال */
  right:auto;
  z-index:998;
}

/* RTL override (keep LEFT) */
[dir="rtl"] .register-fab,
[dir="rtl"] .register-bubble{
  left:18px;
  right:auto;
}

 

/* RTL override (keep LEFT) */
[dir="rtl"] .register-fab,
[dir="rtl"] .register-bubble{
  left:18px;
  right:auto;
}

 

/* RTL override (keep LEFT) */
[dir="rtl"] .register-fab,
[dir="rtl"] .register-bubble{
  left:18px;
  right:auto;
}



/* Back-to-top — fixed + hidden by default */
.backtop{
  position: fixed;
  right: max(14px, env(safe-area-inset-left));
  bottom: calc(86px + env(safe-area-inset-bottom));
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid #e6ebf3;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  display: grid; place-items: center;
  z-index: 1000;                 /* أعلى من الفوتر وأزرار أخرى */
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.backtop.show{
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.backtop svg{ pointer-events: none }


 

/* أكبر أيقونة لتايل "اتصال" فقط */
.grid .tile.tile--lg-ico .ico{
  width: 72px !important;     /* كان ~34–40px */
  height: 72px !important;
  border-radius: 16px;
  padding: 0 !important;      /* لو فيه حشو كان مصغّر الصورة */
  display: grid; place-items: center;
  min-width: 72px;            /* يمنعها تصغر داخل الجريد */
}
.grid .tile.tile--lg-ico .ico-img{
  width: 44px !important;     /* حجم الأيقونة نفسه */
  height: 44px !important;
  object-fit: contain;
  transform: none;            /* إلغاء أي تصغير سابق */
  filter: drop-shadow(0 0 1px rgba(0,0,0,.12));
}

/* مسافة تحت الأيقونة */
.grid .tile.tile--lg-ico b{ margin-top: 8px; }



/* =====================================================
   FORM OVERLAY
===================================================== */
.imc-form-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}

/* Form Box */
.imc-form-box{
  width:100%;
  max-width:380px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 50px rgba(0,0,0,.25);
  overflow:hidden;
}

/* Header */
.form-header{
  background:#034990;
  color:#fff;
  padding:14px;
  font-weight:700;
  text-align:center;
  position:relative;
}

.close-form{
  position:absolute;
  right:14px;
  top:10px;
  font-size:20px;
  cursor:pointer;
}

/* Form Body */
#imcServiceForm{
  padding:16px;
}

#imcServiceForm label{
  font-size:12px;
  font-weight:600;
  display:block;
  margin-bottom:4px;
}

#imcServiceForm input,
#imcServiceForm select{
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border-radius:10px;
  border:1px solid #dce3ee;
  font-size:13px;
}

#imcServiceForm button{
  width:100%;
  padding:12px;
  background:#034990;
  color:#fff;
  border:none;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

/* ======================================================
   FIX | Form Text Visibility
====================================================== */
#imcServiceForm{
  color:#0b1b42;   /* لون نص واضح */
}

#imcServiceForm label{
  color:#0b1b42;   /* الأسئلة */
}

#imcServiceForm input,
#imcServiceForm select{
  color:#0b1b42;   /* النص داخل الحقول */
  background:#fff;
}

/* Placeholder */
#imcServiceForm input::placeholder{
  color:#8a96ab;
}


/* ======================================================
   HQ | Sovereign Executive Edition
====================================================== */
.hq-sovereign{
  padding:24px 18px 32px;
  background:
    radial-gradient(120% 120% at 20% 0%, #ffffff 0%, #f4f6fa 60%, #eef2f8 100%);
  font-family:"Inter",system-ui,sans-serif;
}

/* Layout */
.hq-sovereign-wrap{
  max-width:1200px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}

/* ================= Card ================= */
.hq-sovereign-card{
  position:relative;
  background:#ffffff;
  border-radius:34px;

  padding:36px 34px 38px;

  border:1px solid rgba(0,0,0,.04);
  box-shadow:
    0 30px 70px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* Gold hairline */
.hq-sovereign-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(251,185,0,.85),
    rgba(255,255,255,0),
    rgba(251,185,0,.45)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* Badge */
.hq-badge{
  display:inline-block;
  margin-bottom:16px;

  padding:6px 16px;
  border-radius:999px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:#7a5a00;
  background:linear-gradient(135deg,#fff4c4,#ffe08a);
}

/* Title */
.hq-title{
  font-size:18px;
  font-weight:900;
  color:#0b1b42;
  margin-bottom:14px;
  letter-spacing:.3px;
}



/* ================= Button ================= */
.hq-btn-gold{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:14px 28px;
  border-radius:999px;

  font-size:14px;
  font-weight:800;
  text-decoration:none;

  color:#1b1b1b;
  background:
    linear-gradient(135deg,#ffe8a6,#fbb900);

  box-shadow:
    0 14px 36px rgba(251,185,0,.45),
    inset 0 1px 0 rgba(255,255,255,.8);

  transition:.35s ease;
}

/* Button dot */
.hq-btn-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1b1b1b;
  opacity:.7;
}

/* Hover */
.hq-btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:
    0 22px 52px rgba(251,185,0,.55);
}

/* ================= Map ================= */
.hq-sovereign-map{
  border-radius:34px;
  overflow:hidden;
  background:#ffffff;

  border:1px solid rgba(0,0,0,.05);
  box-shadow:
    0 30px 70px rgba(0,0,0,.14);
}

.hq-sovereign-map iframe{
  width:100%;
  height:280px;
  border:0;
  display:block;
  
  border:1px solid rgba(0,0,0,.04);
  box-shadow:
    0 30px 70px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* ================= Desktop ================= */
@media (min-width:980px){
  .hq-sovereign-wrap{
    grid-template-columns:1.15fr 1fr;
    align-items:stretch;
  }

  .hq-sovereign-map iframe{
    height:100%;
    min-height:360px;
  }
}




.noor-contacts{
  --accent:#e00441;
  --accent-2:#ffe9ee;
  --bg:#fafbfd;
  --line:#f7d4dc;
  --rad:28px;
  --pad:clamp(14px,3vw,18px);
  font-family:'Cairo', system-ui;
  background:linear-gradient(180deg,#fff,#fafbfd);
  padding:var(--pad);
}
.qc-wrap{max-width:880px;margin:0 auto 12px;display:grid;gap:10px}
.qc-item{
  display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:var(--rad);
  border:1.5px solid #fbb900;
  padding:14px 16px;text-decoration:none;color:#111;
  box-shadow:0 5px 14px rgba(224,4,65,.05);
  transition:.25s ease;
}
.qc-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(224,4,65,.12)}
.qc-ico{
  flex:0 0 52px;height:52px;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff,#fff) padding-box,
             linear-gradient(135deg,#fbb900,#fbb900) border-box;
  border:1px solid transparent;border-radius:18px;
}
.qc-ico img{width:26px;height:26px}
.qc-text{display:flex;flex-direction:column;gap:2px}
.qc-label{font-weight:700;font-size:14px;color:#222}
.qc-value{font-weight:600;font-size:18px;color:#555;letter-spacing:.2px}
.qc-arrow{margin-inline-start:auto;font-size:22px;color:#d44b66;opacity:.4}

.card{
  max-width:880px;margin:12px auto 0;
  background:#fff;border-radius:20px;border:1.5px solid var(--line);
  padding:14px 16px;box-shadow:0 10px 30px rgba(224,4,65,.05);
}
.card-head{display:flex;align-items:center;gap:8px;color:#222;margin-bottom:8px}
.card-head svg{fill:none;stroke:currentColor;stroke-width:1.6}
.qc-address p{margin:4px 0}
.qc-address .en{color:#888;font-size:13px}
.qc-address .ar{color:#888;font-size:13px}
/* Address */
.hq-address{
  font-size:15px;
  line-height:1.75;
  color:#44516a;
  margin-bottom:28px;
}/* ================================
   QC ADDRESS — FORCE VISIBLE CARD
================================ */

.qc-address{
  background:#ffffff !important;
  border-radius:22px !important;
  padding:18px 16px !important;
  margin:14px auto !important;

  border:1.5px solid #e3e9f2 !important;
  box-shadow:0 14px 36px rgba(0,0,0,.10) !important;

  max-width:880px;
  display:block !important;
}

/* Header */
.qc-address .card-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#0b1b42;
}

.qc-address .card-head b{
  font-size:15px;
  font-weight:800;
}

/* Address text */
.qc-address p{
  margin:4px 0;
  line-height:1.6;
}

.qc-address .ar{
  font-size:14px;
  font-weight:600;
  color:#44516a;
}

.qc-address .en{
  font-size:13px;
  font-weight:500;
  color:#6b7280;
  direction:ltr;
}

/* Buttons */
.addr-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.addr-links .chip{
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  border-radius:999px;
  background:#f4f7fc;
  color:#034990;
  border:1px solid #dbe5f5;
  text-decoration:none;
}

.addr-links .chip.ghost{
  background:#fff;
  border:1px dashed #c9d6ea;
  color:#44516a;
}

/* Map */
.map-wrap{
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #edf1f7;
}

.map-wrap iframe{
  width:100%;
  height:320px;
  display:block;
  border:0;
}
.qc-address{
  max-width: var(--contact-card-w) !important;
  width: 100% !important;
  margin: 14px auto !important;
}

.addr-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.chip{
  background:#fff;border:1px dashed var(--accent);color:var(--accent);
  border-radius:999px;padding:8px 12px;font-size:13px;cursor:pointer;text-decoration:none
}
.chip.ghost{border-color:#ddd;color:#333}
.map-wrap{margin-top:10px;overflow:hidden;border-radius:14px;border:1px solid #eee}
.map-wrap iframe{width:100%;height:320px;display:block}
.fa-facebook-f{
  color:#1877f2;
  transition:.25s ease;
}

.fa-facebook-f:hover{
  color:#0f5bd8;   /* أغمق سنة */
}

/* ======================================================
   IMC Breadcrumb – Clean & Stable (RTL)
====================================================== */

 /* ================= IMC BREADCRUMB (FIXED) ================= */
.imc-breadcrumb{
  position:fixed;
  top:56px;              /* ⬅️ نفس ارتفاع الهيدر */
  left:0;
  right:0;

  background:#ffffff;
  border-bottom:2px solid #e9eef6;

   font-family:Cairo;
  z-index:900;           /* أقل من الهيدر */
}

.imc-breadcrumb-in{
  max-width:1100px;
  margin:0 auto;
  padding:10px 16px;

  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Link */
.bc-item{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-size:12px;
  font-weight:600;
  color:#034990;
  text-decoration:none;
   font-family:Cairo;

  padding:6px 12px;
  border-radius:999px;
}

.bc-item:hover{
  background:#f2f6ff;
}

/* Separator */
.bc-sep{
  color:#9aa6ba;
}

/* Current */
/* Current — Soft Active */
.bc-current{
  font-size:12px;
  font-weight:600;

  background:#f3f6fb;          /* فاتح وهادي */
  color:#034990;               /* لون البراند */

  padding:6px 14px;
  border-radius:999px;

  border:1px solid #dbe5f5;    /* حد خفيف */
  font-family:Cairo
}



/* ======================================================
   FORCE SHOW BREADCRUMB – FINAL FIX
====================================================== */

.imc-breadcrumb{
  position: fixed;
  top: clamp(62px, 16vw, 60px); /* نفس min-height الهيدر */
  left: 0;
  right: 0;

  background:#ffffff;
  border-bottom:2px solid #e9eef6;

  font-family:Cairo;
  z-index: 900;
}

.imc-breadcrumb{
  margin-top:28px;   /* جرّبي 12–18 حسب الذوق */
}


/* ===== Fixed footer bar (compact & crisp) ===== */
/* ---------- Footer ---------- */
.af-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:#fff; border-top:1px solid #e6ecf5;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 18px rgba(11,35,68,.08);
}
.af-tray{
  max-width:500px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end;
}
.af-act{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#0b2344; font-weight:700; text-decoration:none;
}
.af-act .ico{
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#f6f9ff,#ffffff);
  border:1px solid #e6ecf5;
  box-shadow:0 6px 14px rgba(11,35,68,.10);
}
.af-act small{ font-size:12px; line-height:1 }
.af-act:active .ico{ transform:translateY(1px) }

/* ---------- Icons ---------- */
.af-icon{ width:22px; height:22px; display:block }
.af-icon.lg{ width:24px; height:24px }

/* ---------- Dark Mode (لو عندك body.dark) ---------- */
.dark .af-head .af-bar,
.dark .af-foot{
  background:linear-gradient(180deg,#0f2e5a,#0d2144);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.dark .af-crumbs, 
.dark .af-crumbs a,
.dark .af-edit,
.dark .af-act{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35) }
.dark .af-act .ico{
  background:#fff; border-color:rgba(11,35,68,.12); box-shadow:0 6px 14px rgba(0,0,0,.28)
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:480px){
  :root{ --af-headH: 50px; --af-footH: 68px; }
  .af-act small{ font-size:11px }
}




/* ===== Noor Facebook Embed Style ===== */
.noor-facebook{
  background:linear-gradient(180deg,#fff,#fafbfe);
  padding:30px 0;
  display:flex;justify-content:center;align-items:center;
  border-top:1px solid #f4d7d7;
}
.fb-wrap{
  background:#fff5f5;
  padding:20px;
  border-radius:24px;
  box-shadow:0 8px 30px rgba(255,0,0,.08);
  transition:.25s ease;
}
.fb-wrap:hover{
  box-shadow:0 12px 36px rgba(255,0,0,.12);
  transform:translateY(-2px);
}
.fb-wrap iframe{
  max-width:100%;
  display:block;
}


/* ===== Centered Facebook Embed (No scroll visible) ===== */
.noor-facebook{
  background:linear-gradient(180deg,#fff,#fff7f8);
  border-top:1px solid #ffe2e5;
  padding:40px 0 60px;
  display:flex;justify-content:center;
  font-family:"Cairo",system-ui;
}
.fb-wrap{
  text-align:center;
  background:#fff;
  border:1px solid #ffe2e5;
  border-radius:28px;
  padding:26px 20px;
  box-shadow:0 8px 30px rgba(255,0,0,.08);
  transition:.25s ease;
  width:fit-content;
}
.fb-wrap:hover{ box-shadow:0 12px 36px rgba(255,0,0,.12); }

.fb-title{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-weight:900;font-size:20px;margin:0;color:#1a1d22;
}
.fb-title svg{ color:#034990 }
.fb-sub{
  margin:6px 0 16px;
  color:#6b7280;font-weight:600;font-size:13px;
}
.fb-card{
  display:flex;justify-content:center;
  overflow:hidden; /* يمنع السكرول الجانبي */
}
.fb-card iframe{
  display:block;
  max-width:100%;
  border:0;
  border-radius:20px;
}
@media(max-width:480px){
  .fb-wrap{ width:90%; padding:20px 10px; }
  .fb-card iframe{ height:600px; }
}



 


/* ========== 3) Ring Grid (Quick actions) ========== */
.ring-grid{display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:9px; padding:12px 14px}
.ring{
  position:relative; aspect-ratio:1; border-radius:24px; overflow:hidden; background:var(--card);
  border:1px solid var(--stroke); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; color:var(--fg);
  transition:transform .18s ease, box-shadow .18s ease; 
}
/* 1) ثبّتي 3 أعمدة على الموبايل */
:root { --cols: 3; }                /* الافتراضي للموبايل */
@media (min-width: 520px){ :root{ --cols: 4; } }  /* التابلت وفوق */
@media (max-width: 360px){ :root{ --cols: 3; } }  /* ما تنزليش لـ2 أعمدة */

/* 2) كبّري الأيقونة داخل البلاطة بدون تغيير حجم البلاطة */
.ring {
  aspect-ratio: 1;                  /* تفضل مربعة */
  padding: 14px 10px;               /* مسافة داخلية تكفي للأيقونة الكبيرة */
  gap: 8px;
}
.ring img{
  /* حجم مرن يكبر على الشاشات الكبيرة ويظل كبير على الصغير */
  width: clamp(40px, 10vw, 46px);
  height: clamp(40px, 10vw, 46px);
  object-fit: contain;
  display: block;
}
.ring b{ font-size: 13px; }         /* سطر العنوان أوضح شوية */
.ring small{ font-size: 11px; color: var(--muted); }

/* (اختياري) لو فيه ستايل سابق كان محدد 28px، خلّي ده يتغلّب عليه */

/* ========== 4) Sections / Cards ========== */
.section{padding:6px 14px 14px}
.row{display:grid; gap:12px; grid-template-columns:1fr}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:20px; box-shadow:var(--shadow); padding:14px}
.card h3{margin:0 0 6px; font-size:15px}
.meta{font-size:12px; color:var(--muted)}




.add-homescreen{
  --accent:#e00441;
  --accent2:#ff4f70;
  font-family:'Cairo',sans-serif;
  text-align:center;
  padding:40px 20px;
  background:linear-gradient(180deg,#fff,#f6f7fa);
  border-radius:28px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  max-width:700px;
  margin:40px auto;
  backdrop-filter:blur(10px);
}

/* زر البانر */
.contact-item{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#0b0f16;
  padding:24px 20px;
  border-radius:22px;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--accent),var(--accent2)) border-box;
  border:2px solid transparent;
  box-shadow:0 10px 26px rgba(224,4,65,.2);
  transition:.3s;
}
.contact-item:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(224,4,65,.25);
}
.contact-item .icon img{
  width:64px;
  height:64px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.15));
  margin-bottom:10px;
}
.labels b.ar{
  display:block;
  font-family:'Droid Arabic Kufi',sans-serif;
  font-size:1.1rem;
  margin-bottom:4px;
}
.labels small.en{
  display:block;
  font-family:'Righteous',cursive;
  color:#555;
  font-size:.9rem;
}

/* خطوات الصور */
.steps{
  margin-top:30px;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  justify-items:center;
}
.steps img{
  width:280px;
  border-radius:20px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .25s;
}
.steps img:hover{ transform:scale(1.04); }

@media (max-width:480px){
  .contact-item{ width:100%; }
  .steps img{ width:90%; }
}


/* ===============================
   GPS GUIDE CONTAINER
================================ */
.gps-guide{
  background:linear-gradient(180deg,#034990 0%, #022f63 100%);
  color:#ffffff;
  border-radius:26px;
  padding:34px 22px;
  text-align:center;
  font-family:"Cairo", system-ui, sans-serif;
  box-shadow:0 14px 36px rgba(3,73,144,.28);
}

/* ===============================
   TITLE
================================ */
.gps-title{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:700;
  font-size:1.15rem;
  line-height:1.6;
  margin-bottom:26px;
  letter-spacing:.2px;
}

.gps-title b{
  font-weight:800;
}

.gps-title .ar{
  display:block;
  margin-top:4px;
  font-family:"Cairo", system-ui, sans-serif;
  font-weight:600;
  font-size:.95rem;
  opacity:.9;
}

/* ===============================
   LINKS WRAPPER
================================ */
.gps-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

/* ===============================
   GPS BUTTON
================================ */
.gps-item{
  display:flex;
  align-items:center;
  gap:12px;

  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);

  border-radius:18px;
  padding:14px 20px;

  text-decoration:none;
  color:#ffffff;
  font-weight:600;

  backdrop-filter:blur(6px);
  transition:all .3s ease;
}

/* Hover */
.gps-item:hover{
  background:rgba(255,255,255,.2);
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/* ===============================
   ICON
================================ */
.gps-item .icon img{
  width:38px;
  height:38px;
  object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
}

/* ===============================
   TEXT
================================ */
.gps-item .text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.2;
}

.gps-item .text b{
  font-size:.55rem;
  font-weight:500;
  
}

.gps-item .text small{
  font-size:.8rem;
  opacity:.9;
}


.offers-gallery{
  text-align:center;
  padding:-10px 20px;
  background:linear-gradient(180deg,#fff,#f6f7fa);
  border-radius:28px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  font-family:'Cairo',sans-serif;
}
.offers-title{
  font-size:1.3rem;
  font-weight:800;
  color:#e00441;
  margin-bottom:24px;
}

/* الشبكة */
.offers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  justify-items:center;
}
.offers-grid a{
  display:block;
  overflow:hidden;
  border-radius:25px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.offers-grid a:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}
.offers-grid img{
  width:100%;
  height:auto;
  border-radius:25px;
  display:block;
}

/* موبايل */
@media (max-width:480px){
  .offers-grid{
    grid-template-columns:1fr;
  }
}





.partners{padding:44px 0;background:#fff}
.partners .wrap{width:min(1220px,92vw);margin:auto}
.sec-title{text-align:center;margin:0 0 18px;font-weight:900;color:#e00441}

.logos-marquee{
  position:relative; overflow:hidden; mask-image:linear-gradient( to left, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient( to left, transparent 0, #000 8%, #000 92%, transparent 100%);
  border-radius:18px; border:1px solid #eef1f7; background:#fafbff;
}
.track{
  display:flex; align-items:center; gap:14px; padding:14px;
  animation: slide 22s linear infinite;
}
.track.clone{ animation-name: slide2; position:absolute; inset:auto 0 0 0 }
@keyframes slide{
  from{ transform: translateX(0) }
  to  { transform: translateX(-100%) }
}
@keyframes slide2{
  from{ transform: translateX(100%) }
  to  { transform: translateX(0) }
}
/* توقف الحركة عند التفاعل أو تفضيل تقليل الحركة */
.logos-marquee:hover .track,
.logos-marquee:focus-within .track{ animation-play-state: paused }
@media (prefers-reduced-motion: reduce){
  .track, .track.clone{ animation: none }
}

.logo-card{
  width:160px; height:96px; flex:0 0 auto;
  background:#fff; border:1px solid #e8ebf3; border-radius:16px;
  display:grid; place-items:center; padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.logo-card img{
  max-width:100%; max-height:100%; object-fit:contain;
   
}
.logo-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.12); border-color:#dee3ef }
.logo-card:hover img{ filter:none; opacity:1 }

.center{display:flex; justify-content:center; margin-top:16px}
.btn.more{
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:14px; font-weight:900;
  background:linear-gradient(90deg,#e00441,#b80335); color:#fff; box-shadow:0 10px 24px rgba(224,4,65,.25);
}
.btn.more:hover{ transform:translateY(-2px) }
@media (max-width:720px){
  .logo-card{ width:136px; height:84px }
}




.contracts-static{
  padding:10px 0;
  background:#fafafa;
}
.contracts-wrap{
  width:min(1200px,90%);
  margin:auto;
  text-align:center;
}
.contracts-title{
  font-size:26px;
  color:#e00441;
  font-weight:900;
  margin-bottom:30px;
  letter-spacing:-.5px;
}

/* ===== شبكة اللوجوهات ===== */
.contracts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:18px;
  justify-items:center;
}
.contract-card{
  width:100%;
  max-width:360px;
  aspect-ratio:2.8/1.4;
  background:#fff;
  border-radius:22px;
  border:1px solid #eee;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.contract-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 32px rgba(0,0,0,.12);
}
.contract-card img{
  max-width:80%;
  max-height:80%;
  object-fit:contain;
  
  transition:.25s;
}
.contract-card:hover img{
  filter:none; opacity:1;
}

/* ===== زر المزيد ===== */
.contracts-center{
  margin-top:38px;
}
.contracts-btn{
  text-decoration:none;
  display:inline-block;
  background:linear-gradient(90deg,#e00441,#b80335);
  color:#fff;
  font-weight:700;
  padding:12px 32px;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(224,4,65,.25);
  transition:.3s;
}
.contracts-btn:hover{
  transform:translateY(-2px);
}



/* ==== Noor Hero + KPIs — LOCKED LAYOUT (Patch) ==== */

/* 1) الهيرو: مساحة سفلية مرنة موحّدة + منع القصّ */
.noor-hero{
  padding-bottom: clamp(56px, 12vw, 82px) !important;
  border-radius: 0 0 36px 36px !important;
  overflow: visible !important;                 /* لو في أجهزة قصّت التداخل */
}

/* 2) الأزرار: نثبّت عمودين دائمًا وبعرض متساوي */
.glassy-buttons{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-width: min(600px, 100%) !important;
  margin: 8px auto 0 !important;
}
.glassy-buttons .btn-glass{
  min-height: 40px !important;
  justify-content: center !important;
  flex-direction: row-reverse !important;       /* RTL */
}

/* 3) العدادات: تداخل ثابت محسوب بالـclamp بدل الـmargin السالب العشوائي */
.noor-kpis{
  max-width: 920px !important;
  margin: 0 auto !important;                    /* نشيل أي margins قديمة */
  position: relative !important;
  z-index: 5 !important;

  /* ↓ تداخل ثابت ومتناسب مع الشاشة على كل الأجهزة */
  transform: translateY( calc( clamp(56px, 12vw, 82px) * -0.62 ) ) !important;
  transition: transform .2s ease;
}

/* 4) شبكة العدادات: 3 أعمدة دائمًا (حتى على الشاشات الصغيرة) */
.noor-kpis{ display: grid !important; gap: 14px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* 5) الكارت الزجاجي للعدادات: ثبات الظلال والأحجام */
.noor-kpis .kpi{
  padding: 18px 10px !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 28px rgba(224,4,65,.16) !important;
}
.noor-kpis .kpi strong{ direction: ltr !important }

/* 6) أمان إضافي: لو أي تعريف قديم يغيّر الـoverlap تجاهليه */
:root{ --overlap: 0 !important; }
/* منع كسر سطر في نص الأزرار */
.glassy-buttons .btn-glass span{
  white-space: nowrap;      /* أهم سطر */
  text-wrap: nowrap;        /* احتياطي للمتصفحات الجديدة */
  hyphens: none;
}

/* لو الزرين بيتقسموا بالتساوي وده بيضيّق مساحة "جميع الفروع"،
   وسّعي الحد الأدنى لكل زر عشان تفضل كلمة واحدة */
.glassy-buttons{
  grid-template-columns: repeat(2, minmax(164px, 1fr)) !important;
}

/* بديل (لو حابة الزرين على قدّ المحتوى بدون مساواة العرض): */
/*
.glassy-buttons{ grid-template-columns: repeat(2, max-content) !important; }
*/




/* ===============================
   PROGRAMS – PREMIUM IMC
================================ */
.imc-programs{
  padding:48px 18px;
  background:#f6f8fb;
  font-family:"Cairo",system-ui,sans-serif;
}

.prog-title{
  text-align:center;
  font-size:1.8rem;
  font-weight:800;
  color:#022f63;
  margin-bottom:36px;
}

/* Grid */
.prog-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  gap:22px;
}

/* Card */
.prog-card{
  background:#fff;
  border-radius:20px;
  border:1px solid #e4ebf5;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Head */
.prog-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
}

.prog-icon{
  width:44px;
  height:44px;
  flex-shrink:0;
}

.prog-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.prog-head h3{
  flex:1;
  font-size:12px;
  font-weight:700;
  color:#034990;
  margin:0;
}

/* Toggle Button */
.prog-toggle{
  background:none;
  border:none;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-family:inherit;
  font-size:.9rem;
  font-weight:700;
  color:#034990;
}

.prog-toggle svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  transition:.3s ease;
}

/* Body */
.prog-body{
  padding:0 20px;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.prog-body p{
  padding:12px 0 20px;
  font-size:.95rem;
  line-height:1.7;
  color:#44516a;
}

/* Active */
.prog-card.active .prog-body{
  max-height:300px;
}

.prog-card.active .prog-toggle svg{
  transform:rotate(180deg);
}
.imc-programs{
  margin-top:38px;   /* نزول هادي */
}


/* ===============================
   SECTORS – PREMIUM IMC
================================ */
.imc-sectors{
  padding:60px 20px;
  background:#f6f8fb;
  font-family:"Cairo",system-ui,sans-serif;
}

.sectors-title{
  text-align:center;
  font-size:2rem;
  font-weight:800;
  color:#022f63;
  margin-bottom:10px;
}

.sectors-sub{
  text-align:center;
  max-width:780px;
  margin:0 auto 40px;
  color:#44516a;
  line-height:1.7;
}

/* Grid */
.sectors-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* Card */
.sector-card{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  transition:.35s ease;
  display:flex;
  flex-direction:column;
}

.sector-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(0,0,0,.14);
}

/* Image */
.sector-img img{
  width:100%;
  height:180px;
  object-fit:cover;
}

/* Body */
.sector-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.sector-body h3{
  font-size:1.1rem;
  font-weight:700;
  color:#034990;
  margin-bottom:10px;
}

.sector-body p{
  font-size:.95rem;
  color:#44516a;
  line-height:1.6;
  margin-bottom:auto;
}


 

.sector-card:hover .sector-btn span{
  transform:translateX(-4px);
}
/* Button */
.sector-btn{
  margin-top:18px;
  align-self:flex-start;

  padding:10px 18px;
  border-radius:999px;

  font-size:.9rem;
  font-weight:700;

  color:#034990;
  background:#f3f6fb;
  border:1px solid #dbe5f5;

  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;

  transition:.3s ease;
}

.sector-btn span{
  transition:.3s ease;
}

.sector-card:hover .sector-btn{
  background:#034990;
  color:#fff;
}

.sector-card:hover .sector-btn span{
  transform:translateX(-4px);
}





/* ===============================
   APP SECTOR – MOBILE UI - Sectors Pages
================================ */
.app-sector{
  background:#f4f7fb;
  font-family:"Cairo",system-ui,sans-serif;
  padding:16px;
}

/* APP HEADER */
.app-header{
  padding:6px 4px 14px;
}

.app-header .app-sub{
  font-size:11px;
  color:#6b7a90;
}

.app-header h1{
  font-size:20px;
  font-weight:800;
  color:#022f63;
  margin-top:4px;
}

/* CARD */
.app-card{
  background:#fff;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  margin-bottom:14px;
}

.intro-card p{
  font-size:13.5px;
  line-height:1.7;
  color:#44516a;
}

/* KPI ROW – FIXED, NO SCROLL */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}

.kpi{
  background:#ffffff;
  border-radius:16px;
  padding:12px 8px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.07);
}

.kpi small{
  font-size:11px;
  color:#6b7a90;
}

.kpi b{
  display:block;
  font-size:17px;
  font-weight:800;
  color:#034990;
  margin:4px 0;
}

.kpi span{
  font-size:10.5px;
  color:#6b7a90;
}

/* LIST */
.app-list{
  background:#fff;
  border-radius:22px;
  padding:10px 0;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.list-title{
  padding:10px 16px;
  font-size:14px;
  font-weight:800;
  color:#022f63;
}

/* ITEM */
.list-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-top:1px solid #edf1f7;
}

.list-item:first-of-type{
  border-top:none;
}

.list-item .icon{
  font-size:22px;
}

.list-item b{
  font-size:13.5px;
  color:#022f63;
}

.list-item small{
  font-size:11.5px;
  color:#6b7a90;
}


/* Push section below fixed breadcrumb */
.app-sector{
  margin-top:154px;   /* عدّلي الرقم لو الهيدر أطول */
}



/* Construction & Metallic Industries Accent */
.app-sector.industry .kpi b{
  color:#6b4e16; /* ذهبي صناعي هادي */
}

.app-sector.industry .icon{
  font-size:22px;
}



/* Leather Industry – Warm Brown Accent */
.app-sector.leather .kpi b{
  color:#7a4a2e;   /* بني جلدي أنيق */
}

.app-sector.leather .icon{
  font-size:22px;
}


/* Printing & Packaging – Ink Blue Accent */
.app-sector.printing .kpi b{
  color:#2f5fa8;   /* أزرق حبر هادي */
}

.app-sector.printing .icon{
  font-size:22px;
}



/* Textiles & Garments – Cotton Blue Accent */
.app-sector.textiles .kpi b{
  color:#2b6cb0;   /* أزرق نسيجي هادي */
}

.app-sector.textiles .icon{
  font-size:22px;
}



/* Wood & Furniture – Natural Wood Accent */
.app-sector.wood .kpi b{
  color:#7b4a2e;   /* بني خشبي دافئ */
}

.app-sector.wood .icon{
  font-size:22px;
}


/* Medical Industries – Clinical Blue Accent */
.app-sector.medical .kpi b{
  color:#0f766e;   /* أخضر طبي هادي */
}

.app-sector.medical .icon{
  font-size:22px;
}



/* Engineering Industries – Steel Blue Accent */
.app-sector.engineering .kpi b{
  color:#1f4fd8;   /* أزرق صناعي قوي */
}

.app-sector.engineering .icon{
  font-size:22px;
}


/* Chemical Industries – Teal Green Accent */
.app-sector.chemical .kpi b{
  color:#0d9488;   /* أخضر كيماوي هادي */
}

.app-sector.chemical .icon{
  font-size:22px;
}


/* Food Industries – Fresh Green Accent */
.app-sector.food .kpi b{
  color:#2f855a;   /* أخضر غذائي هادي */
}

.app-sector.food .icon{
  font-size:22px;
}



/* ======================================================
   ABOUT US – APP STYLE
====================================================== */
.about-app{
  padding:24px 16px 40px;
  font-family:"Cairo",system-ui,sans-serif;
  background:#f7f9fc;
}

/* Header */
.about-header{
  margin-bottom:24px;
}
.about-header .about-sub{
  font-size:12px;
  color:#6b7a90;
  font-weight:600;
}
.about-header h1{
  font-size:22px;
  font-weight:800;
  color:#034990;
  margin:4px 0 0;
}

/* Card */
.about-card{
  background:#fff;
  border-radius:20px;
  padding:18px;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.about-card h3{
  font-size:16px;
  font-weight:800;
  color:#034990;
  margin-bottom:10px;
}
.about-card p{
  font-size:13.5px;
  line-height:1.75;
  color:#44516a;
  margin-bottom:8px;
}

/* Mini blocks */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}
.about-mini{
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.about-mini .icon{
  font-size:22px;
}
.about-mini h4{
  font-size:14px;
  font-weight:700;
  margin:6px 0;
}
.about-mini p{
  font-size:13px;
  color:#5b6b82;
}

/* Stats */
.stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:12px;
}
.stat{
  background:#f2f6ff;
  border-radius:16px;
  padding:12px 8px;
  text-align:center;
}
.stat b{
  display:block;
  font-size:16px;
  font-weight:800;
  color:#034990;
}
.stat span{
  font-size:11px;
  color:#6b7a90;
}

/* Lists */
.about-list{
  list-style:none;
  padding:0;
  margin:8px 0 0;
}
.about-list li{
  font-size:13.5px;
  color:#44516a;
  margin-bottom:6px;
}

.about-app{
  margin-top:114px;   /* نزول هادي تحت الـ breadcrumb */
}



/* ======================================================
   IMC SERVICES – APP LUXURY STYLE
====================================================== */
.imc-services{
  padding:32px 16px 40px;
  background:#f7f9fc;
  font-family:"Cairo",system-ui,sans-serif;
}

/* Header */
.services-header{
  margin-bottom:24px;
}
.services-sub{
  font-size:12px;
  font-weight:600;
  color:#6b7a90;
}
.services-header h2{
  font-size:22px;
  font-weight:800;
  color:#034990;
  margin:6px 0;
}
.services-header p{
  font-size:13.5px;
  line-height:1.7;
  color:#44516a;
}

/* Services List */
.services-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* Card */
.service-card{
  background:#fff;
  border-radius:22px;
  padding:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  transition:.25s ease;
}
.service-card:hover{
  transform:translateY(-2px);
}

/* Icon */
.service-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,#034990,#0b5fd7);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:10px;
}

/* Text */
.service-card h4{
  font-size:15px;
  font-weight:700;
  color:#0b0f16;
  margin-bottom:6px;
}
.service-card p{
  font-size:13.5px;
  line-height:1.7;
  color:#5b6b82;
}




/* ===============================
   TENDERS HUB
================================ */


.imc-tenders{
  margin-top:144px;   /* نزول هادي تحت الـ breadcrumb */
}

.imc-tenders{
  padding:24px 16px 90px;
  background:#f6f8fc;
  font-family:"Cairo",system-ui,sans-serif;
}

/* Header */
.tenders-header h1{
  font-size:20px;
  font-weight:900;
  color:#0b0f16;
}

.tenders-header p{
  font-size:14px;
  color:#6b7280;
  margin-top:4px;
}

/* Search */
.tenders-search{
  margin:16px 0;
}

.tenders-search input{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #e3ebff;
  font-size:14px;
}

/* List */
.tenders-list{
  display:grid;
  gap:16px;
}

/* Card */
.tender-item{
  background:#fff;
  border-radius:20px;
  padding:16px;
  box-shadow:0 16px 36px rgba(0,0,0,.08);
}

.tender-item.closed{
  opacity:.65;
}

/* Top */
.tender-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.badge{
  background:#e00441;
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
}

.badge.gray{
  background:#9ca3af;
}

.date{
  font-size:12px;
  color:#6b7280;
}

/* Title */
.tender-item h3{
  font-size:15px;
  font-weight:800;
  color:#034990;
}

.tender-item h3 small{
  display:block;
  font-size:12px;
  font-weight:600;
  color:#6b7280;
}

/* Desc */
.desc{
  font-size:14px;
  line-height:1.6;
  color:#44516a;
  margin:8px 0;
}

/* Meta */
.tender-meta{
  font-size:12.5px;
  color:#6b7280;
  display:flex;
  gap:12px;
}

/* Button */
/* Calm Tender Button */
.tender-btn{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:12px 16px;
  border-radius:14px;

  background:#f4f7fc;          /* فاتح وهادي */
  border:1px solid #dbe5f5;

  color:#034990;
  font-weight:700;
  text-decoration:none;

  transition:.25s ease;
}

.tender-btn span{
  font-size:18px;
  transition:.25s ease;
}

/* Hover (ناعم جدًا) */
.tender-btn:hover{
  background:#eef4ff;
  border-color:#c9d8f0;
}

.tender-btn:hover span{
  transform:translateX(-4px);
}





/* ===============================
   TENDER | IMC STYLE - Tender Details
================================ */

.imc-tender{
  margin-top:146px;   /* نزول هادي تحت الـ breadcrumb */
}


.imc-tender{
  padding:24px 16px 80px;
  font-family:"Cairo",system-ui,sans-serif;
  background:#f6f8fc;
}

.tender-header{
  margin-bottom:16px;
}

.tender-date{
  font-size:13px;
  color:#6b7280;
}

.tender-header h1{
  font-size:18px;
  line-height:1.5;
  font-weight:800;
  color:#0b0f16;
}

.tender-header small{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#034990;
}

/* Card */
.tender-card{
  background:#fff;
  border-radius:20px;
  padding:18px;
  
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

/* Sections */
.tender-section{
  margin-top:18px;
}

.tender-section h4{
  font-size:14px;
  font-weight:800;
  color:#034990;
  margin-bottom:6px;
}

.tender-section p,
.tender-section li{
  font-size:14px;
  line-height:1.7;
  color:#44516a;
}

.tender-section ul{
  padding-right:16px;
}

/* Highlight */
.tender-section.highlight{
  background:#f2f6ff;
  padding:14px;
  border-radius:14px;
}

.note{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  font-weight:700;
  color:#c32026;
}

/* Contact */
.tender-section.contact{
  background:#f9fafc;
  border:1px solid #e3ebff;
  padding:14px;
  border-radius:14px;
}

.tender-section.contact a{
  color:#034990;
  font-weight:700;
  text-decoration:none;
}

/* Bank */
.tender-section.bank{
  background:#f6f9ff;
  border-radius:14px;
  padding:14px;
}

/* Footer */
.tender-section.footer{
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:#6b7280;
}

/* Helpers */
.muted{
  font-size:13px;
  color:#6b7280;
}



/* Opportunities Page */

.imc-gate{
  margin-top:146px;   /* نزول هادي تحت الـ breadcrumb */
}



.imc-gate{
  padding:48px 18px 60px;
  background:#fafbfd;
  font-family:"Cairo",system-ui;
}

/* Header */
.gate-head small{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:#8a94a6;
}

.gate-head h1{
  font-size:26px;
  font-weight:900;
  color:#0b2c5d;
  margin:6px 0 10px;
}

.gate-head p{
  font-size:14.5px;
  color:#5d6f88;
  line-height:1.8;
}

/* Stack */
.gate-stack{
  margin-top:34px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* File Card */
.gate-file{
  position:relative;
  background:#fff;
  border-radius:28px;
  padding:26px 24px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.08);
  border:1px solid #edf1f7;
}

/* Gold mark */
.file-mark{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:3px;
  background:linear-gradient(90deg,#f5c646,#e7b83d);
  border-radius:6px;
}

/* Body */
.file-body h3{
  font-size:18px;
  font-weight:900;
  color:#034990;
  margin-bottom:8px;
}

.file-body p{
  font-size:14px;
  color:#5b6d85;
  line-height:1.75;
  margin-bottom:12px;
}

.file-body ul{
  padding:0;
  list-style:none;
  margin:0;
}

.file-body li{
  font-size:13.5px;
  color:#4a5c73;
  margin-bottom:6px;
}

/* Link */
.file-link{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:800;
  color:#034990;
  text-decoration:none;
}

.file-link span{
  transition:.3s;
}

.file-link:hover span{
  transform:translateX(-4px);
}

/* Accent */
.gate-file.accent{
  background:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%);
}





/* ======================================================
   CONTRACTS | STATIC GRID (UPDATED)
====================================================== */

.contracts-static{
  padding:56px 16px;
  background:#f6f8fb; /* خلفية فاتحة ناعمة */
}

.contracts-wrap{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

/* ===== Title ===== */
.contracts-title{
  font-family:"Cairo",system-ui,sans-serif;
  font-size:24px;
  font-weight:800;
  color:#034990;
  margin-bottom:32px;
}

/* ===== Grid ===== */
.contracts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:22px;
}

/* ===== Logo Card ===== */
.contracts-grid img{
  width:100%;
  height:120px;               /* ارتفاع الكارت */
  
  /* ⬅️ الحل الأساسي */
  object-fit:contain;
  object-position:center;

  padding:12px;               /* قللنا البادينج */
  background:#ffffff;

  border-radius:18px;
  border:1px solid #eef2f7;

  box-shadow:
    0 10px 26px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9);

  filter:none;
  opacity:1;

  transition:transform .25s ease, box-shadow .25s ease;
}


/* Hover – فخم وبسيط */
.contracts-grid img:hover{
  transform:translateY(-4px);
  box-shadow:
    0 16px 34px rgba(0,0,0,.12);
}

/* ===== Mobile ===== */
@media(max-width:600px){
  .contracts-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .contracts-grid img{
    height:96px;
    padding:18px;
  }
}


/* ======================================================
   IMC NEWS – MOBILE STYLE (STABLE)
====================================================== */

.news-carousel{
  padding:80px 16px;
  font-family:"Cairo",system-ui;
}

/* Titles */
.section-title{
  font-size:26px;
  font-weight:900;
  margin-bottom:10px;
  text-align:center;
}

.section-subtitle{
  font-size:14px;
  line-height:1.8;
  color:#5b6b80;
  text-align:center;
  margin-bottom:30px;
}

/* Carousel */
.carousel-wrapper{
  overflow:hidden;
}

.carousel-track{
  display:flex;
  width:100%;
  transition:transform .5s ease;
}

/* Slide */
.news-slide{
  min-width:100%;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  border:1px solid #e4ebf3;
}

/* Image */
.news-slide img{
  width:100%;
  height:200px;
  object-fit:cover;
}

/* Info */
.news-info{
  padding:20px;
  direction:rtl; /* restore RTL text */
}

.news-date{
  font-size:12px;
  font-weight:700;
  color:#034990;
  display:block;
  margin-bottom:10px;
}

.news-info h3{
  font-size:17px;
  font-weight:800;
  line-height:1.6;
  margin-bottom:12px;
}

.news-info p{
  font-size:14px;
  line-height:1.8;
  color:#4a5a6a;
  margin-bottom:16px;
}

/* Button */
.btn-read{
  display:inline-block;
  padding:10px 18px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  color:#034990;
  text-decoration:none;
  background:rgba(3,73,144,.1);
  border:1px solid rgba(3,73,144,.3);
}

/* Dots */
.carousel-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#cfd8e3;
}

.dot.active{
  background:#034990;
}