:root{--turq-dark:#1C9090;--turq-mid:#3FB6B6;--border:#e7efef}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:#fff;color:#102a2a;line-height:1.8}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Header + nav */
header{background:linear-gradient(180deg,var(--turq-dark),var(--turq-mid));color:#fff;text-align:center;padding:10px 0;box-shadow:0 3px 6px rgba(0,0,0,.1);position:sticky;top:0;z-index:999
font-weight:700;
transition:.25s;
font-family:'Cairo', sans-serif;
font-size:18px;
letter-spacing:0.3px;
text-transform: none;}
.brand{display:flex;justify-content:center;align-items:center;margin:10px 0}
.brand img{max-height:70px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
nav a{text-decoration:none;color:#fff;background:rgba(255,255,255,.12);padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);font-weight:600;transition:.25s}
nav a:hover{background:rgba(255,255,255,.35);color:#0b3e3e}
.lang-toggle{position:absolute;left:16px;top:10px}
.lang-toggle button{background:#fff;color:#0b3e3e;border:none;border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer}

/* Hero with background image */
.hero{position:relative;color:#fff;text-align:center;padding:40px 0 35px;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(28,144,144,.75), rgba(63,182,182,.7)),
    url('../img/bh_pattern.jpg') center/cover no-repeat;}
.hero .container{position:relative;z-index:1}
.logo-block{display:flex;flex-direction:column;align-items:center;gap:100px;padding:65px 0}
.logo-block .logo img{width:380px;height:auto;filter:drop-shadow(0 9px 12px rgba(0,0,0,.25));opacity:0;animation:fadeInUp .8s ease .1s forwards}.logo-block .logo {
  margin-top: 40px; /* نزل اللوغو بمقدار 40px */
}
.logo-block .manuscript{width:100%;max-width:1100px;margin:0 auto;opacity:0;animation:fadeInUp 1s ease .35s forwards}
.logo-block .manuscript img{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)}}

.intro{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.25);padding:12px 16px;margin:16px auto 20px;border-radius:20px;max-width:780px}

/* CTA pulse */
.cta{display:inline-block;background:#fff;color:#1c9090;padding:12px 20px;border-radius:12px;font-weight:800;text-decoration:none;transition:.25s;
     animation:pulse 2s infinite ease-in-out;box-shadow:0 0 0 rgba(255,255,255,.6)font-weight:700;
transition:.25s;
font-family:'Cairo', sans-serif;
font-size:18px;
letter-spacing:0.3px;
text-transform: none;}

.cta:hover{background:#e7efef}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);transform:scale(1)}50%{box-shadow:0 0 25px 10px rgba(255,255,255,.4);transform:scale(1.05)}100%{box-shadow:0 0 0 0 rgba(255,255,255,.7);transform:scale(1)}}

/* Cards / grids */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px auto}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.05);text-align:center}
.card h3, 
.card p {
  color: #1C9090; /* ← نفس درجة التركوازي المستخدم بالموقع */
  font-weight: 600;
font-weight:700;
transition:.25s;
font-family:'Cairo', sans-serif;
font-size:18px;
letter-spacing:0.3px;
text-transform: none;}

/* Works grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:1100px;margin:26px auto}
.item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05);text-align:center}
.item a{display:block;color:inherit;text-decoration:none}
.item img{width:100%;height:200px;object-fit:cover;display:block}
.item p{padding:12px}

/* Contact */
.contact-wrap{max-width:900px;margin:26px auto;display:grid;grid-template-columns:1fr;gap:16px}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.socials a{display:inline-flex;align-items:center;gap:6px;background:#f3fbfb;border:1px solid var(--border);padding:8px 10px;border-radius:10px;color:#0b3e3e;text-decoration:none}
.socials a:hover{background:#e7f4f4}
.icon{width:18px;height:18px;display:inline-block}

/* Footer */
footer{border-top:1px solid var(--border);padding:16px 0;text-align:center;color:#557;font-size:14px;margin-top:24px}
/* ===== Mobile tweaks ===== */
@media (max-width: 768px) {
  header { padding: 6px 0; }
  .brand img { max-height: 54px; }

  nav { gap: 8px; }
  nav a {
    font-size: 15px;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
  }

  .hero { padding: 28px 0 28px 0; }
  .logo-block { gap: 75px; padding: 28px 0; }
  .logo-block .logo img { width: 220px; }          /* اللوغو */
  .logo-block .manuscript img { max-width: 100%; }  /* المخطوطة */

  .intro {
    max-width: 92%;
    font-size: 14px;
    padding: 10px 12px;
  }

  .cta {
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 10px;
  }

  .features {
    grid-template-columns: 1fr;   /* كرت واحد بالسطر */
    gap: 12px;
    max-width: 92%;
  }
  .card { padding: 12px; }
}

@media (max-width: 480px) {
  nav a { font-size: 14px; padding: 5px 9px; }
  .logo-block .logo img { width: 140px; }
  .intro { font-size: 13px; }
  .cta { font-size: 15px; padding: 9px 14px; }
}
/* ===== Mobile fine-tuning ===== */
@media (max-width: 768px) {
  /* خليه ثابت بزاوية الهيدر وما يزحلق البنلات */
  .lang-toggle {
    position: absolute;
    right: 10px;   /* يمين بدلاً من اليسار لواجهة RTL */
    left: auto;
    top: 8px;
    z-index: 1001;
  }
  .lang-toggle button {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 8px;
  }

  /* أعطي الهيدر فراغ علوي بسيط حتى ما تتقاطع العناصر */
  header { padding-top: 42px; }

  /* البنلات: تصغير خفيف حتى تبقى بسطر واحد */
  nav { gap: 8px; margin-top: 4px; justify-content: center; }
  nav a {
    font-size: 15px;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
  }

  /* شعارات الهيرو والمسافات */
  .hero { padding: 28px 0; }
  .logo-block { gap: 44px; padding: 26px 0; }
  .logo-block .logo img { width: 145px; }
  .logo-block .manuscript img { max-width: 92%; }

  /* النص والزر */
  .intro { max-width: 92%; font-size: 14px; padding: 10px 12px; }
  .cta   { font-size: 16px; padding: 10px 16px; border-radius: 10px; }

  /* الكروت تحت */
  .features { grid-template-columns: 1fr; gap: 12px; max-width: 92%; }
  .card h3 { font-size: 18px; }
  .card p  { font-size: 14px; }
}

@media (max-width: 480px) {
  nav a { font-size: 14px; padding: 5px 9px; }
  .logo-block .logo img { width: 250px; }
  .cta { font-size: 15px; padding: 9px 14px; }
}
/* === تكبير المخطوطة بالموبايل === */
@media (max-width: 768px) {
  .logo-block .manuscript img {
    max-width: 115%;   /* تكبير خفيف */
  }
}

@media (max-width: 480px) {
  .logo-block .manuscript img {
    max-width: 140%;   /* تكبير أقوى للشاشات الصغيرة */
  }
}
/* ===== خلفية تدرّج تركوازي ثابتة لكل الصفحات ===== */
body{
  background:
    linear-gradient(180deg, #1C9090 0%, #2AA4A4 40%, #3FB6B6 100%);
  background-attachment: fixed;
}

/* ===== كلاس زجاجي قابل لإعادة الاستخدام ===== */
.glass{
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  color: #fff;                /* نص أبيض لقراءة أفضل فوق التدرّج */
  padding: 18px;
}

/* تأكيد لون العناوين والنص داخل الصندوق الزجاجي */
.glass h1,.glass h2,.glass h3,.glass p,.glass li{ color:#fff; }
/* ===== كلاس زجاجي قابل لإعادة الاستخدام ===== */
.glass{
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  color: #fff;
  padding: 18px;
}

.glass h1,.glass h2,.glass h3,.glass p,.glass li{ color:#fff; }