/* =============================== */
/* PRO v2 styling (FINAL RTL/EN)   */
/* =============================== */

:root{
  --brand:#0b57cf;
  --ink:#0b1b2b;
  --muted:#5e6c7a;
  --bg:#f7fafc;
  --ring:rgba(11,87,207,.25);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  max-width:100%; overflow-x:hidden;
}
.container{width:min(1160px,92vw); margin-inline:auto}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.85rem}
.muted{color:var(--muted)}

/* ================= Header / Nav ================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid #e8eef6;
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  padding:10px 0;
}
.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.logo{width:40px; height:40px}
.brand-title{font-weight:800}
.brand-sub{font-size:12px; color:#47607b}
.brand .moic-inline{height:40px; width:auto; object-fit:contain; margin-inline-start:8px}

/* القائـمة الافتراضية على الديسكتوب */
.nav{margin-left:auto; display:flex; gap:18px; align-items:center}

/* ألوان روابط المينيو على الديسكتوب */
.site-header .nav a{
  color:#0a1b4d !important;   /* أزرق غامق */
  font-weight:600;
  text-decoration:none;
}
.site-header .nav a:hover{ color:#083c99 !important; }

/* Language buttons */
.lang-switch{display:flex; gap:6px; margin-left:12px}
.lang{
  border:1px solid #cfe0f7; background:#fff;
  border-radius:999px; padding:.35rem .6rem; font-weight:700;
}
.lang.active{background:var(--brand); border-color:var(--brand); color:#fff}

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.05rem; border-radius:12px;
  border:1px solid #cfe0f7; font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.btn-nav{background:#fff}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-outline{background:#fff; color:#0a273f}
.btn-full{width:100%}

/* ================= Hero ================= */
.hero{position:relative; color:#fff}
.hero-harbour{
  position:relative; min-height:68vh;
  background:#061a30 url('assets/financial-harbour.png') center bottom/contain no-repeat;
  background-attachment:scroll;
}
.hero .backdrop{position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,26,48,.6), rgba(6,26,48,.75));}
.hero-grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:stretch; padding:56px 0}
.hero-copy h1{font-size:44px; line-height:1.08; margin:8px 0 10px}
.hero-sub{font-weight:600}
.lead{margin:8px 0 18px; color:#e6f0ff}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pill{background:#ffffff22; border:1px solid #ffffff33; color:#fff; border-radius:999px; padding:.4rem .7rem; font-weight:700}
.glass{backdrop-filter:blur(6px) saturate(1.2); background:linear-gradient(#ffffffee,#ffffffee); border:1px solid #e6eef6; border-radius:16px; padding:18px; color:#0b1b2b}

/* ================= Forms ================= */
.field{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.field input,.field select,.field textarea{padding:.8rem .9rem; border-radius:12px; border:1px solid #d6e3f4; outline:none; background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.field.two{display:grid; grid-template-columns:.6fr 1fr; gap:10px}
.helper{font-size:.8rem; color:#5b6b7c; margin-top:6px}

/* ================= Sections / Cards ================= */
.section{padding:56px 0}
.alt{background:#ffffff}

/* مبدئيًا: شبكة عامة بدون تحديد أعمدة عشان ما تتعارض مع أقسام معيّنة */
.grid.cards{display:grid; gap:16px}
.card{border:1px solid #e6eef6; border-radius:16px; padding:18px; background:#fff}
.card.dark{background:#0f2341; color:#e6f0ff; border-color:transparent}
.card.accent{border-color:#b9d4ff; background:#f6faff}

.grid.features{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.feature{border:1px solid #e6eef6; border-radius:14px; background:#fff; padding:16px}

.timeline{list-style:none; display:grid; gap:18px; margin:0; padding:0}
.timeline li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; background:#fff; border:1px solid #e6eef6; border-radius:14px; padding:14px}
.t-badge{font-weight:900; color:#6ba0ff}

/* ================= Footer ================= */
.footer{border-top:1px solid #e8eef6; background:#061629; color:#cfe0f7}
.foot-grid{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.left{display:flex; gap:12px; align-items:center}
.right{display:flex; gap:16px; flex-wrap:wrap}
.footer-accredit{display:flex; justify-content:center; align-items:center; text-align:center; margin-top:8px}
.accredit-text{font-weight:800}

/* ================= WhatsApp ================= */
.float-wa{
  position:fixed; right:16px; bottom:16px;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(2,12,24,.25);
  z-index:12000;
}
.float-wa img{width:28px; height:28px}

/* ================= Responsive ================= */
html[lang="ar"] body{font-family:'Tajawal',Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* تصغير/توحيد شعاري الاعتماد */
.accredit-logos{
  display:inline-flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.approval-logo{
  height:110px;
  width:auto;
  object-fit:contain;
}
@media (max-width:600px){
  .approval-logo{ height:64px; }
}

/* بطاقات قابلة للنقر بالكامل */
.card.is-link{
  position: relative;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline: none;
}
.card.is-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(10, 32, 54, 0.12);
}
.card.is-link:focus-within{
  box-shadow: 0 0 0 3px rgba(11, 87, 207, 0.25);
  border-color: #9cc2ff;
}
.stretched-link{
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
.stretched-link:focus{ outline: none; }
.card .more{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; margin-top:10px; opacity:.9;
}
.card.is-link .more span[aria-hidden="true"]{ transition: transform .18s ease; }
.card.is-link:hover .more span[aria-hidden="true"]{ transform: translateX(3px); }

/* ====== Explore Our Services (section-specific) ====== */

/* وسّع حاوية القسم قليلاً مثل قبل */
#types .container{
  width: min(1160px, 96vw);
  margin-inline: auto;
  padding-inline: 16px;
}

/* شبكة الخدمات: 3 / 2 / 1 */
#types .grid.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items:stretch;
  justify-items:stretch;
}
#types .grid.cards .card{
  padding: 28px;
  border-radius: 16px;
  border: 1px solid #dbe3f1;
  background:#fff;
  transition: transform .2s ease, box-shadow .2s ease;
  height:100%;                 /* تملأ العمود */
  box-sizing:border-box;
}
#types .grid.cards .card.dark{
  background:#0a2036; color:#fff; border:none;
}
#types .grid.cards .card.accent{
  border:1px solid #cfe0f7; background:#f9fbff;
}
#types .grid.cards .card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
#types .grid.cards .card h3{
  font-size:1.15rem; line-height:1.4; margin-bottom:12px;
}
#types .grid.cards .card p{
  font-size:1rem; line-height:1.55; margin:0;
}

/* ==== تجاوب ==== */
@media (max-width:980px){
  /* ترتيب الهيدر */
  .header-inner{
    display:grid !important;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "brand lang"
      "nav   nav";
    align-items:center; gap:10px;
  }
  .brand{grid-area:brand}
  .lang-switch{grid-area:lang; justify-self:end}
  .brand-sub, .moic-inline{display:none}
  /* أخفي القائمة فقط على الموبايل */
  .site-header .nav{ display:none !important; }

  /* لا نلمس كل .grid.cards هنا حتى لا نخرب أقسام ثانية */
  .hero-grid{grid-template-columns:1fr}
  .grid.features{grid-template-columns:1fr}
  .field.two{grid-template-columns:1fr 1fr}
  .hero-copy h1{font-size:clamp(28px,7vw,34px); line-height:1.12}
  .hero-harbour{background-position:center bottom; background-size:contain}

  /* خدمات: عمودين تحت 980px */
  #types .grid.cards{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; }
}
@media (max-width:680px){
  /* خدمات: عمود واحد على الجوال */
  #types .grid.cards{ grid-template-columns: 1fr; gap:18px; }
  #types .grid.cards .card{ padding:22px; }
}

/* تأثير بارالاكس بسيط */
@media (min-width:1024px){
  .hero-harbour{background-attachment:fixed; background-position:center bottom}
}

/* فوتر على الشاشات الصغيرة */
@media (max-width:768px){
  .footer-accredit{display:flex; justify-content:center; align-items:center; text-align:center; margin-top:8px}
}

/* === إصلاح عرض قسم Explore Our Services === */

#types {
  background: var(--bg);
}

#types .container {
  max-width: 1160px;     /* نفس عرض باقي الأقسام */
  width: 90%;
  margin-inline: auto;   /* يوسّط القسم بالصفحة */
  padding-inline: 20px;  /* يضيف فراغ من الجانبين */
}

#types .grid.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}

/* البطاقات نفسها */
#types .card {
  border-radius: 16px;
  border: 1px solid #dbe3f1;
  background: #fff;
  padding: 28px;
  box-sizing: border-box;
  transition: transform .2s ease, box-shadow .2s ease;
}
#types .card.dark {
  background: #0a2036;
  color: #fff;
  border: none;
}
#types .card.accent {
  background: #f9fbff;
  border: 1px solid #cfe0f7;
}
#types .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* تجاوب الأجهزة */
@media (max-width: 1024px) {
  #types .grid.cards {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 680px) {
  #types .grid.cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #types .card {
    padding: 22px;
  }
}
/* Map embed responsive */
.map-embed{
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  aspect-ratio: 16 / 9;         /* يضمن التناسق على كل الشاشات */
  background: #e9f1fb;
}
.map-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

/* أزرار الجايد لو ما كانت أنماط الأزرار العالمية مفعلة */
.map-guide .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:10px; font-weight:700;
  border:1px solid #cfe0f7; text-decoration:none;
}
.map-guide .btn-primary{ background:#0b57cf; color:#fff; border-color:#0b57cf; }
.map-guide .btn-outline{ background:#fff; color:#0a273f; }

#location .lead {
  color: #0b1b2b;
}
#location .lead a {
  color: #0b57cf;
  text-decoration: none;
  font-weight: 600;
}
#location .lead a:hover {
  text-decoration: underline;
}
/* تأكد أن الكارد ما عنده فروقات غير مقصودة */
.hero-card { margin-top: 10px; }

/* بس علشان ما ينكسر في الموبايل */
@media (max-width:980px){
  .hero-card { margin-top: 6px; }
}
/* نمط الروابط الثنائية اللغة */
.nav .bi-link { display:inline-flex; align-items:center; gap:6px; }
.nav .bi-link .en { direction:ltr; }
.nav .bi-link .ar { direction:rtl; }

/* موبايل: نخلي كل رابط سطرين ونخفي الفاصل | */
@media (max-width: 768px){
  .site-header .nav{ flex-wrap:wrap; gap:10px; }
  .nav .bi-link{
    display:inline-grid;      /* سطرين فوق بعض */
    grid-auto-flow:row;
    padding:8px 10px;
    line-height:1.1;
  }
  .nav .bi-link .sep{ display:none; }       /* نخفي | */
  .nav .bi-link .en,
  .nav .bi-link .ar{ display:block; font-size:14px; }
  .btn.btn-nav.bi-link{ border:1px solid #9fb7d9; border-radius:10px; } /* نفس شكل الزر */
}

/* تابلت/ديسكتوب: نرجعها على سطر واحد مع الفاصل | */
@media (min-width: 769px){
  .nav .bi-link{ font-size:16px; }
  .nav .bi-link .en, .nav .bi-link .ar{ display:inline; }
  .nav .bi-link .sep{ display:inline; }
}

/* اجبار اظهار القائمة على الشاشات الصغيرة + ترتيبها كسطرين */
@media (max-width:980px){
  header.site-header .nav{
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
  }
}

/* ===== Force dark text inside the hero form (EN + AR) ===== */
.hero .hero-card.glass,
.hero .hero-card.glass * {
  color:#0b1b2b !important;     /* نص داكن لكل ما بداخل الكارد */
}

/* حقول الإدخال والنصوص */
.hero .hero-card.glass input,
.hero .hero-card.glass select,
.hero .hero-card.glass textarea {
  color:#0b1b2b !important;
  background:#fff;              /* تأكيد خلفية بيضاء للحقول */
  border-color:#d6e3f4;
}

/* Placeholder */
.hero .hero-card.glass input::placeholder,
.hero .hero-card.glass textarea::placeholder {
  color:#556779 !important;
}

/* حالة التركيز */
.hero .hero-card.glass input:focus,
.hero .hero-card.glass select:focus,
.hero .hero-card.glass textarea:focus {
  border-color:#0b57cf !important;
  box-shadow:0 0 0 4px rgba(11,87,207,.25) !important;
}

/* إصلاح Safari (الأوتوفِل يطلع أبيض) */
.hero .hero-card.glass input:-webkit-autofill {
  -webkit-text-fill-color:#0b1b2b !important;
  transition:background-color 10000s ease-in-out 0s; /* يخفي أصفر الأوتوفل */
}
/* ==== Force black text inside the hero quote form ==== */
.hero .hero-card.glass * {
  color: #0b1b2b !important; /* أسود غامق */
}

/* العناوين */
.hero .hero-card.glass h3 {
  color: #0b1b2b !important;
  font-weight: 800;
}

/* اللابلز */
.hero .hero-card.glass label {
  color: #0b1b2b !important;
  font-weight: 600;
}

/* الحقول */
.hero .hero-card.glass input,
.hero .hero-card.glass select,
.hero .hero-card.glass textarea {
  color: #0b1b2b !important;
  background: #fff !important;
  border: 1px solid #d6e3f4 !important;
}

/* Placeholder */
.hero .hero-card.glass input::placeholder,
.hero .hero-card.glass textarea::placeholder {
  color: #4b5563 !important;
  opacity: 1 !important;
}

/* النصوص الصغيرة داخل الكارد */
.hero .hero-card.glass p,
.hero .hero-card.glass .helper {
  color: #334155 !important;
}

.always-available {
  margin-inline: auto !important;
}