:root{
      --bg-dark:#0e0e0e; --bg-darker:#0b0b0b;   --bg:#ffffff;  --muted:rgba(0,0,0,.6);
  --fg:#111111;  --bg-muted:#121212; --acc:#ffffff; --muted:rgba(255,255,255,.7);
      --sand:#e7e4db; --brand:#3a2173; --brand2:#8AB3FF; --glass:rgb(43 43 43 / 6%);
    }
    /* Dark overrides */
[data-theme="dark"]{
  --bg:#0e0e0e;
  --fg:#ffffff;
  --muted:#121212
  --glass:rgba(255,255,255,.06);
}
@keyframes slideDown {
  0% {
    top: 0; /* Starting position */
  }
  100% {
    top: 200px; /* Ending position */
  }
}

main {
    background: url(../images/copywrite.png) repeat-y;
    background-size: contain;
}
    *{scroll-behavior:smooth}
    body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;   background:var(--bg);
  color:var(--fg);}
.text-white-50{
        color:var(--fg) !important;
    }
    .text-white-40{
        color:var(--acc) !important;
    }
    
    .lang{
        width: 40px;
    height: 40px;
    text-align: center;
    align-content: center;
}



    /* Navbar */
    .topbar{background:var(--bg-dark);border-bottom:1px solid rgba(255,255,255,.08)}
    .navbar{background:var(--bg-dark);  backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid rgba(255,255,255,.08); transition:all .3s ease}
    .navbar.nav-scrolled{background:var(--bg-dark)}
    .nav-link{color:rgba(255,255,255,.85)} .nav-link:hover{color:#fff}

    /* Hero */
    .section{padding:50px 0}
    .hero{position:relative; overflow:hidden; min-height:80vh; display:flex; align-items:center}
    .hero::before{content:""; position:absolute; inset:0; background:\radial-gradient(60% 50% at 50% 10%, rgb(138 179 255 / 20%), transparent 60%),  radial-gradient(40% 40% at 80% 10%,  rgb(138 179 255 / 15%), transparent 60%)}
    #framework{ color:var(--fg)}
    .framwo{background: url(../images/hand-using-touch-screen.jpg) no-repeat;
       background-size: 100% 100%;
        height: 38vh;
       font-size: 20px;
        align-content: center;
       filter: grayscale(1);
        }
        .hero-bg{position:absolute; inset:0;  transform:translateY(-6%); will-change:transform; filter:brightness(.65)}

    .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65))}
    .hero-content{position:relative; z-index:2;color:var(--acc); padding-top: 5%;}

    /* Cards & elements */
    .rounded-2xl{border-radius:5px}
    .ring{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
    .glass{background: var(--glass);
    border: 1px solid var(--sand);}
    .btn-soft{background:#fff; color:#111; border-radius:999px; padding:.7rem 1.3rem}
    .btn-outline{border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.65rem 1.2rem; color:#fff}
.btn-brand {
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    border: 0;
    color: #fff;
    text-decoration: none;
}
.card-hover{transition:transform .35s ease, box-shadow .35s ease}
.card-hover1{transition:transform .35s ease, box-shadow .35s ease}
    .card-hover:hover{transform:translateY(-6px);}

      .card-hover1:hover {
        background: url(../images/battern.png) no-repeat #4a31a6;
        background-size: 30%;
        background-position: left;
         color:#fff;
    }


.card-hover1:hover .text-white-50{
    color:#fff !important;
}
.card-hover1:hover a{
    color:#fff !important;
}
#about {
    text-align: justify;
}
    /* 7) منهجية العمل */
    .meth-ico{font-size:28px; line-height:1}
    .meth-card{background:rgba(255,255,255,.06)}

    /* 8) الحوكمة */
    .gov-ico{font-size:22px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:var(--glass); border-radius:12px}

    /* 9) القطاعات */
    .sector-card{padding:12px 14px; text-align:center; background:var(--glass); font-weight:600}

    /* 10) قصص نجاح */
    .case-card .case-media{height:220px}


    .section-muted{background:var(--muted)}
    .section-sand{background:var(--sand); color:#111}

    .logo-tile{aspect-ratio:3/2;background:var(--bg-dark);        align-content: center;}
    .logo-tile img {
    width: 70%;
}
    .thumb{aspect-ratio:16/9; background:#1e1e1e; object-fit:cover}
    .thumb-square{aspect-ratio:1/1; background:#1e1e1e; object-fit:cover}

    .footer a{color:#bbb} .footer a:hover{color:#fff}

    /* Lang toggle */

    [data-lang="en"] html{direction:ltr}
    .lang-ar #leadForm .lang-en{display:none}
    .lang-en #leadForm .lang-ar{display:none}




    /* Animated counters */
    .counter{font-variant-numeric:tabular-nums}

    /* Scroll progress */
    #scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));z-index:9999;box-shadow:0 0 12px rgba(0,0,0,.25)}

    /* Tilt effect base */
    .tilt{transform-style:preserve-3d; perspective:1000px}
    .logohead img {
    width: 100px;
}

.form-control{
    color:#fff;
}

.form-control:focus {
    background: none;
    outline: none !important;
    box-shadow: none;
    border-color: #222;
    color: #fff;
}
.form-control:placeholder {
    color: #fff;
}