/* Reset and basic */
* {margin:0; padding:0; box-sizing:border-box; font-family:'Tajawal', sans-serif;}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* overflow: hidden;  <- أزلناها لتسمح بالـ scroll */
}

/* Body background */
body {
    background: url('images/1.jpg') no-repeat center center;
    background-size: cover;
    color:#fff;
}

/* Container */
.container {width:90%; max-width:1200px; margin:auto;}

/* Header */
header {
    position: sticky;
    top:0;
    z-index: 100;
    background: rgba(0, 28, 80, 0.6);
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.header-container {
    width: 100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo img {height:80px;}
nav ul {display:flex; list-style:none; align-items:center;}
nav ul li {margin-left:20px;}
nav ul li a {color:#fff; text-decoration:none; font-weight:500; transition:0.3s;}
nav ul li a:hover {color:#ffd700;}
nav ul li a.active {color:#ffd700;} /* Active link */
.menu-toggle {display:none; font-size:28px; color:#fff; cursor:pointer;}

/* Hero Section (Home Page) */
body.home .hero {
    width:100%;
    height: calc(100vh - 180px); /* يأخذ الشاشة مع الهيدر والفوتر */
    background-size: cover;
    background-position: center;
    position: relative;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
body.home .hero::after {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background-color:rgba(0,0,0,0.4); z-index:1;
}
body.home .hero-content {
    position:relative; z-index:2;
}
body.home .hero-content h2 {
    font-size:32px;
    font-weight:bold;
    color:#ffd900dc;
    margin-bottom:20px;
}
body.home .hero-content h1 {
    font-size:48px;
    font-weight:bold;
    color:#001c50;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff;
    margin-bottom:20px;
}
body.home .hero-content p {
    font-size:20px; font-weight:600; max-width:900px; margin:0 auto; line-height:1.6; color:#fff;
}
body.home .hero-content .btn {
    background:#001c50;
    color:#fff;
    padding:14px 35px;
    text-decoration:none;
    font-weight:bold;
    border-radius:6px;
    transition:0.3s;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff;
    display:inline-block;
    margin-top:20px;
}
body.home .hero-content .btn:hover {
    background:#00264d;
    transform:scale(1.05);
}

/* Footer */
footer {
    background: rgba(0, 28, 80, 0.6);
    color:#fff;
    height: 60px; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    font-size:16px;
    margin-top: auto;   /* تثبيت الفوتر بأسفل الصفحة */
}
footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 10px; 
}
footer .footer-logo {
    height: 40px; 
    width: auto;
}

/* ========================= FINAL: Professional About Page Styles =========================
   This block intentionally overrides previous about-related rules and provides a
   concise, modern, and accessible design for `about.html`. It is mobile-first,
   uses a neutral palette with an accent color, clear hierarchy and consistent cards.
   Keep header/footer styles unchanged.
   ===================================================================================== */

/* Load a clean system font stack (no external fetch) */
:root{
  --primary: #0b3b63;   /* deep blue */
  --accent:  #ffbf00;   /* warm gold */
  --muted:   #6b7280;   /* subdued gray */
  --bg:      #f6f8fa;   /* page background */
  --card:    #ffffff;   /* card background */
  --radius:  12px;
  --gap:     20px;
  --max:     1100px;
}

/* 👇 تطبّق على كل الصفحات ما عدا الهوم */
body:not(.home) { 
    background:var(--bg); 
    font-family: 'Segoe UI', Roboto, Arial, sans-serif; 
    color:#0f1724; 
    -webkit-font-smoothing:antialiased; 
}
.container{ max-width:var(--max); margin:0 auto; padding:0 18px; }

/* ✅ Override لصفحة About: نخليها تاخد الخلفية 7.jpg ونخلي النص فوق الخلفية أبيض */
body.about {
    background: url('images/7.jpg') no-repeat center center fixed;
    background-size: cover;
    color:#fff;
}

/* HERO */
.about-hero{ position:relative; background:url('images/1.jpg') center/cover no-repeat; padding:88px 0 36px; display:flex; align-items:center; }
.about-hero::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(3,18,30,0.46), rgba(3,18,30,0.46)); }
.hero-inner{ position:relative; z-index:2; display:flex; gap:var(--gap); align-items:center; width:100%; max-width:var(--max); margin:0 auto; }
.hero-card{ background:var(--card); padding:28px; border-radius:14px; flex:1; box-shadow:0 18px 40px rgba(11,59,99,0.06); border:1px solid rgba(11,59,99,0.04); }
.hero-card h1{ margin:0 0 10px; color:var(--primary); font-size:2rem; line-height:1.02; }
.hero-card p.lead{ margin:0 0 14px; color:var(--muted); font-size:1.02rem; line-height:1.6; }
.hero-media{ flex:0 0 340px; width:340px; }
.hero-media img{ width:100%; height:220px; object-fit:cover; border-radius:10px; box-shadow:0 12px 30px rgba(2,18,28,0.36); }
.hero-actions{ display:flex; gap:12px; }
.btn-primary{ background:var(--accent); color:var(--primary); padding:10px 16px; border-radius:10px; font-weight:800; text-decoration:none; }
.btn-ghost{ background:transparent; border:1px solid rgba(11,59,99,0.06); padding:10px 14px; border-radius:10px; color:var(--primary); }

/* MAIN: floating content that overlaps hero */
.main-overlap{ margin-top:-44px; padding-bottom:60px; }
.main-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:26px; align-items:start; max-width:var(--max); margin:0 auto; }

/* STORY CARD */
.story-card{ display:flex; gap:18px; background:var(--card); border-radius:12px; overflow:hidden; box-shadow:0 12px 30px rgba(11,59,99,0.04); border:1px solid rgba(11,59,99,0.03); }
.story-image{ width:44%; min-width:200px; object-fit:cover; height:100%; }
.story-content{ padding:24px; }
.story-content h2{ margin:0 0 10px; font-size:1.45rem; color:var(--primary); }
.story-content p{ margin:0 0 12px; color:#374151; line-height:1.7; }

/* ASIDE: mission/vision and metrics */
.aside-stack{ display:flex; flex-direction:column; gap:14px; }
.info-card{ padding:14px; border-radius:10px; background:linear-gradient(180deg,#fff,#fbfdff); border-left:5px solid var(--accent); box-shadow:0 10px 30px rgba(11,59,99,0.04); }
.info-card h3{ margin:0 0 8px; color:var(--primary); }
.info-card p{ margin:0; color:var(--muted); }
.metrics{ display:flex; gap:12px; }
.metric{ flex:1; background:var(--card); padding:12px; border-radius:8px; text-align:center; box-shadow:0 8px 24px rgba(11,59,99,0.04); }
.metric strong{ display:block; font-size:1.25rem; color:var(--primary); }
.metric span{ color:var(--muted); font-size:0.95rem; }

/* VALUES */
.values-section{ max-width:var(--max); margin:28px auto 0; padding:0 18px; }
.section-title{ text-align:center; font-size:1.45rem; color:var(--primary); margin-bottom:14px; }
.values-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.value-tile{ display:flex; gap:12px; align-items:flex-start; padding:14px; background:var(--card); border-radius:10px; box-shadow:0 10px 30px rgba(11,59,99,0.04); border:1px solid rgba(11,59,99,0.03); transition: transform .16s ease, box-shadow .16s ease; }
.value-tile:hover{ transform: translateY(-6px); box-shadow:0 20px 46px rgba(11,59,99,0.08); }
.value-icon{ width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; background: linear-gradient(180deg,var(--accent), #ffd36b); font-size:20px; }
.value-body h4{ margin:0 0 6px; color:var(--primary); font-size:1rem; }
.value-body p{ margin:0; color:var(--muted); font-size:0.95rem; }

/* CTA before footer */
.cta-card{ max-width:var(--max); margin:28px auto 40px; padding:18px; border-radius:12px; background: linear-gradient(90deg,#0b3b63,#0e5478); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px; box-shadow:0 18px 46px rgba(11,59,99,0.08); }
.cta-card h3{ margin:0; font-size:1.1rem; }
.cta-card p{ margin:0; color:rgba(255,255,255,0.92); }

/* Footer keep as-is but add slight padding */
footer .footer-content{ padding:22px 18px; }

/* Responsive */
@media (max-width: 980px){
  .hero-inner{ flex-direction:column-reverse; text-align:center; }
  .hero-media{ width:100%; }
  .hero-media img{ height:200px; }
  .main-grid{ grid-template-columns: 1 fr; }
  .story-card{ flex-direction:column; }
  .story-image{ width:100%; height:220px; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .cta-card{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 520px){
  .hero-card h1{ font-size:1.4rem; }
  .hero-media img{ height:150px; }
  .values-grid{ grid-template-columns: 1fr; }
  .metric strong{ font-size:1rem; }
  .hero-card{ padding:18px; }
}

/* ===================================================================================== */
/* End final about styles */


/* ============ NEW: About page hero background using pro-hero & pro-hero-bg ============ */

.pro-hero {
    position: relative;
    padding: 80px 0 40px;
    overflow: hidden;
}

.pro-hero-bg {
    position: absolute;
    inset: 0;
    background: url('images/7.jpg') center/cover no-repeat;
    filter: brightness(0.5);
    z-index: -1;
}

.pro-hero-inner {
    position: relative;
    z-index: 1;
}

/* ✅ إخفاء صورة الـ<img> اللي فوق الباكغراوند */
.pro-hero-media {
    display: none;
}