:root { --primary:#0c2f86; --primary-dark:#0a1f63; --accent:#9aa3b5; --text:#1b1f30; --muted:#5f6475; --bg:#f5f7fb; --card:#fff; --stroke:#e3e7ef; --shadow:0 8px 24px rgba(0,0,0,0.08); }
    *{box-sizing:border-box;}
    body{margin:0;font-family:"Cairo",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;}
    a{text-decoration:none;color:inherit;} img{max-width:100%;display:block;}
    .topbar{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.06);}
    nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;max-width:1200px;margin:0 auto;}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:18px;letter-spacing:-0.3px;} .brand img{width:200px;}
    .menu{display:flex;gap:12px;flex-wrap:wrap;}
    .menu a{padding:8px 12px;border-radius:10px;color:#4a5163;font-weight:700;}
    .menu a.active{color:var(--primary);background:rgba(12,47,134,0.08);}
    .cta{display:inline-flex;align-items:center;gap:8px;border:none;padding:10px 16px;border-radius:12px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer;box-shadow:var(--shadow);}
    .container{max-width:1200px;margin:0 auto;padding:0 20px;}
    .hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;padding:50px 0 40px;}
    h1{margin:10px 0 6px;font-size:clamp(28px,4vw + 4px,42px);line-height:1.2;} .lead{color:rgba(255,255,255,0.85);font-size:17px;}
    .section{padding:44px 0;} .section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
    h2{margin:0;font-size:24px;color:var(--text);} .underline{width:58px;height:4px;background:var(--accent);border-radius:10px;margin-top:6px;}
    .projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
    @media(max-width:1100px){.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
    @media(max-width:720px){.projects-grid{grid-template-columns:repeat(1,minmax(0,1fr));}}

    /* Filters */
    .filters-card{
        background:#fff;
        border:1px solid var(--stroke);
        border-radius:16px;
        padding:16px;
        box-shadow:var(--shadow);
        margin-bottom:18px;
    }
    .filters-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:12px;
        align-items:end;
    }
    .filter-field label{
        display:block;
        margin-bottom:6px;
        font-weight:800;
        color:#0f1c42;
        font-size:13px;
    }
    .filter-input{
        display:flex;
        align-items:center;
        gap:8px;
        background:#f8fafc;
        border:1px solid #e5e7eb;
        border-radius:12px;
        padding:10px 12px;
    }
    .filter-input i{
        color:#0c2f86;
        font-size:18px;
    }
    .filter-input input,
    .filter-input select{
        width:100%;
        border:none;
        background:transparent;
        font-weight:700;
        color:#0f172a;
        font-size:13px;
        outline:none;
        appearance:none;
    }
    .filter-input select{
        padding-right:4px;
    }
    .filter-actions{
        display:flex;
        gap:10px;
        align-items:center;
        justify-content:flex-end;
    }
    .filter-actions .primary-btn,
    .filter-actions .ghost-btn{
        width:100%;
        height:46px;
    }
    .filter-reset{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-weight:800;
    }

    .stats {
      position: relative;
      background: linear-gradient(135deg, #0d2f84, #0b1f63);
      color: #fff;
      padding: 40px 0 46px;
      overflow: hidden;
      margin-top: 20px;
      border-radius: 14px;
    }
    .stats::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(30deg, rgba(255,255,255,0.04) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.04) 87.5%, rgba(255,255,255,0.04)),
        linear-gradient(150deg, rgba(255,255,255,0.04) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.04) 87.5%, rgba(255,255,255,0.04)),
        linear-gradient(90deg, rgba(255,255,255,0.02) 2%, transparent 2.5%, transparent 97%, rgba(255,255,255,0.02) 97.5%, rgba(255,255,255,0.02));
      background-size: 160px 278px, 160px 278px, 160px 278px;
      opacity: 0.6;
      pointer-events: none;
    }
    .stats .container { position: relative; z-index: 1; }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 14px;
      margin-top: 12px;
    }
    .stat-card {
      background: rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 18px;
      text-align: center;
      font-weight: 900;
      font-size: 22px;
      color: #9aa3b5;
      box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    }
    .stat-card small { display: block; margin-top: 6px; color: rgba(255,255,255,0.9); font-weight: 600; }
    .card{background:var(--card);border-radius:14px;border:1px solid var(--stroke);box-shadow:var(--shadow);padding:14px;}
    .project-card{background:#fff;border:1px solid var(--stroke);border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.07);padding:0;overflow:hidden;display:flex;flex-direction:column;transition:.3s ease;}
    .project-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.12);}
.project-hero{position:relative;height:240px;overflow:hidden;}
.project-hero img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:0;}
.project-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(15,23,42,0) 45%, rgba(15,23,42,0.65) 100%);
    pointer-events:none;
    z-index:1;
}
    .status-pill{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;background:#9aa3b5;color:#0f1c42;font-weight:700;font-size:13px;box-shadow:0 3px 10px rgba(0,0,0,.22);z-index:2;}

.status-progress {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fef4da;
    color: #0f1c42;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    z-index:2;
}
.project-hero .title-overlay{
    position:absolute;
    right:10px;
    bottom:10px;
    color:#fff;
    text-shadow:0 3px 10px rgba(0,0,0,0.55);
    z-index:2;
}
.project-hero .title-overlay h3{
    margin:0 0 4px;
    font-size:18px;
    font-weight:800;
    color:white;
    line-height:1.35;
}
.project-hero .title-overlay.title-accent h3{
    color:white;
}
.project-hero .title-overlay.title-progress h3{
    color:white;
}
.project-hero .title-overlay .muted{
    color:white;
    font-size:16px;
    font-weight:400;
}
    .project-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;}
    .project-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:11px;}
.project-meta-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;padding:10px 8px;background:#f8fafc;border-radius:10px;}
    .project-meta-icons .meta-item{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#0f172a;}
    .project-meta-icons .meta-item i{font-size:18px;color:#0c2f86;flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
    .project-meta-icons .meta-item span{color:#0f172a;font-weight:600;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.project-meta-icons .meta-item.highlight{grid-column:auto;}
    .project-meta-icons .meta-item.highlight span{color:#1d4ed8;font-weight:800;}
    .pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:10px;background:#eef2fb;color:var(--primary);font-weight:600;font-size:11px;}
.feature-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;margin:0;padding:0;list-style:none;color:var(--text);font-weight:600;font-size:11px;}
.feature-list li{display:flex;align-items:center;gap:5px;}
.feature-list li::before{content:"";}
.feature-list .feature-icon{font-size:18px;color:#0c2f86;}
@media (max-width: 720px){
    .feature-list{grid-template-columns:repeat(3,minmax(0,1fr));}
}
    .project-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 14px 12px;border-top:1px solid var(--stroke);background:#f7f8fb;}
    .ghost-btn{background:#fff;color:var(--text);border:1px solid var(--stroke);border-radius:12px;padding:9px;font-weight:700;font-size:12px;cursor:pointer;text-align:center;transition:.3s ease;}
    .ghost-btn:hover{background:#f8fafc;border-color:#3b82f6;color:#2563eb;}
    .primary-btn{background:#185adb;color:#fff;border:none;border-radius:12px;padding:9px;font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 4px 12px rgba(24,90,219,0.4);text-align:center;transition:.3s ease;}
    .primary-btn:hover{background:#0c2f86;transform:translateY(-2px);box-shadow:0 8px 20px rgba(12,47,134,0.5);}
    .muted{color:var(--muted);} .chips{display:flex;gap:8px;flex-wrap:wrap;}
    .footer {
      margin-top: 40px;
      background: radial-gradient(120% 160% at 80% -10%, rgba(24,90,219,0.12), transparent 55%), linear-gradient(135deg, #050c23, #0a1538 55%, #040817);
      color: #dfe5f5;
      padding: 44px 0 40px;
      position: relative;
      overflow: hidden;
      border-top: 1px solid #13224a;
    }
    .footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(244,170,27,0.16), transparent 28%, transparent 72%, rgba(244,170,27,0.16));
      opacity: 0.4;
      pointer-events: none;
    }
    .footer .container { position: relative; z-index: 1; }
    .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 16px; }
    .brand-stack { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
    .footer-logo {
      width: 70px;
      height: 70px;
      border-radius: 16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      display: grid;
      place-items: center;
      padding: 10px;
    }
    .footer-logo img { width: 100%; height: 100%; object-fit: contain; }
    .footer-brand { font-size: 18px; font-weight: 900; color: #fff; }
    .footer-tagline { color: #9eb1d6; font-weight: 600; margin-top: 4px; }
    .footer-ribbon {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: #dfe5f5;
      font-weight: 700;
      margin-top: 12px;
    }
    .footer-ribbon .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
    .footer-title { margin: 0 0 10px; color: #fff; font-size: 17px; }
    .footer-desc { margin: 0 0 10px; color: #9eb1d6; font-weight: 600; }
    .footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
    .footer-links a { color: #dfe5f5; font-weight: 700; }
    .footer-links a:hover, .footer-contact a:hover { color: var(--accent); }
    .footer-contact li { color: #c6d1e9; font-weight: 700; }
    .newsletter { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
    .newsletter input {
      flex: 1;
      min-width: 200px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid #1f2c54;
      background: rgba(12,18,40,0.7);
      color: #fff;
    }
    .newsletter button {
      border: none;
      border-radius: 12px;
      padding: 12px 16px;
      background: var(--accent);
      color: #0f1c42;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(244,170,27,0.25);
    }
    .footer-bottom {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid #131f3f;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      color: #9eb1d6;
      font-weight: 700;
    }
    .social { display: inline-flex; gap: 8px; }
    .social a {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.06);
      color: #dfe5f5;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,0.08);
    }

    .custom-pagination{
    margin-top:50px;
    padding:30px 0;
    display:flex;
    justify-content:center;
}
.custom-pagination nav{
    direction:rtl;
}
.custom-pagination .pagination{
    display:flex;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0;
    align-items:center;
}
.custom-pagination .page-item{
    list-style:none;
}
.custom-pagination .page-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:45px;
    height:45px;
    padding:0 16px;
    border-radius:12px;
    border:2px solid #e5e7eb;
    background:#fff;
    color:#64748b;
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    transition:all 0.3s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.custom-pagination .page-link i{
    font-size:18px;
}
.custom-pagination .page-link:hover{
    background:#f8fafc;
    border-color:#3b82f6;
    color:#2563eb;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(59,130,246,0.2);
}
.custom-pagination .page-item.active .page-link{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    border-color:#2563eb;
    color:#fff;
    box-shadow:0 8px 20px rgba(37,99,235,0.3);
    font-weight:900;
}
.custom-pagination .page-item.disabled .page-link{
    background:#f1f5f9;
    border-color:#e5e7eb;
    color:#cbd5e1;
    cursor:not-allowed;
    box-shadow:none;
}
.custom-pagination .page-item.disabled .page-link:hover{
    transform:none;
    background:#f1f5f9;
    border-color:#e5e7eb;
}

/* ================= ICON META ================= */
.project-meta-icons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:14px;
    padding:14px;
    background:#f8fafc;
    border-radius:12px;
}
@media (max-width: 1100px){
    .project-meta-icons{
        grid-template-columns:repeat(3,1fr);
    }
}
@media (max-width: 720px){
    .project-meta-icons{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:10px;
    }
    .project-meta-icons .meta-item.meta-type{
        grid-column:auto;
    }
    .project-meta-icons .meta-item span{
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
    }
}

.meta-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#0f172a;
    font-weight:700;
}

.meta-item i{
    font-size:18px;
    color:#0c2f86;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.meta-item span{
    color:#0f172a;
    font-weight:700;
    font-size:13px;
}

/* Highlight units */
.meta-item.highlight{
    background:rgba(12,47,134,0.08);
    padding:8px 12px;
    border-radius:10px;
    font-weight:800;
    color:#0c2f86;
    border-left:3px solid #0c2f86;
}

/* ================= ACTIONS ================= */
.project-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:14px;
    border-top:1px solid #eef0f4;
    align-items:stretch; /* مهم */
}

.project-actions a{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-weight:800;
    border-radius:12px;
    padding:12px 14px;
    min-height:46px;
    font-size:14px;
    transition:.3s;
    text-decoration:none;
}
.project-actions{
    align-items: stretch;
}
.project-actions a,
.project-actions button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    height:48px;              /* 🔥 ارتفاع ثابت */
    min-height:48px;
    padding:0 16px;

    font-size:14px;
    font-weight:800;
    line-height:1;

    border-radius:14px;
    white-space:nowrap;       /* 🔥 منع النزول لسطر */
    text-align:center;

    transition:all .25s ease;
}


.ghost-btn{
    background:#f8fafc;
    color:#334155;
    border:1px solid #e2e8f0;
}
.ghost-btn:hover{
    background:#e2e8f0;
}

.primary-btn{
    background:#0c2f86;
    color:#fff;
    box-shadow:0 10px 22px rgba(13,110,253,0.28);
}
.primary-btn:hover{
    background:#0c2f86;
    box-shadow:0 12px 26px rgba(13,110,253,0.34);
}

.project-actions .ghost-btn{
    background:#f8fafc;
    color:#334155;
    border:1px solid #e2e8f0;
}

.project-actions .ghost-btn:hover{
    background:#e2e8f0;
}

    @media(max-width:768px){nav{padding:12px 16px;} .hero{padding:40px 0 32px;}}