/* =========================================================
   KERS POS – GLOBAL SAFE CSS
   Fix mobile white page + container drift + RTL
   ========================================================= */

:root{
  --primary:#004d99;
  --secondary:#ffc107;
  --dark:#001f3f;
  --light:#f4f7f9;
  --card:#ffffff;
  --border:rgba(0,0,0,.08);
  --shadow:0 12px 35px rgba(0,0,0,.10);
  --radius:18px;
}

/* ===== RESET SAFE ===== */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  direction:rtl;
  background:var(--light);
  font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ===== IMAGES ===== */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* ===== CONTAINER FIX (CRITICAL) ===== */
.container,
.container-fluid{
  display:block !important;
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:16px;
}

/* ===== BOOTSTRAP GRID SAFE ===== */
.row{
  display:flex !important;
  flex-wrap:wrap !important;
  margin-inline:-8px;
}
.row > *{
  padding-inline:8px;
}

/* ===== MAIN OFFSET (for fixed navbar) ===== */
body{
  padding-top:80px;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.modern-navbar{
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:1050;
}

.modern-navbar .container{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
}

.navbar-brand img{
  height:44px;
}

.navbar-nav{
  gap:6px;
}

.nav-link{
  font-weight:800;
  color:var(--primary) !important;
  white-space:nowrap;
}

.btn-order-main{
  background:var(--primary);
  color:#fff !important;
  border-radius:999px;
  padding:10px 18px;
  font-weight:900;
  box-shadow:0 6px 18px rgba(0,77,153,.35);
}

.btn-demo-secondary{
  border:2px solid var(--primary);
  color:var(--primary) !important;
  border-radius:999px;
  padding:10px 18px;
  font-weight:900;
  background:transparent;
}

/* ===== MOBILE NAV ===== */
@media (max-width:991px){
  .navbar-collapse{
    background:#fff;
    border-top:1px solid var(--border);
    margin-top:10px;
    padding:12px;
    border-radius:16px;
    box-shadow:var(--shadow);
  }

  .navbar-nav .nav-link{
    display:block;
    padding:12px;
    border-radius:14px;
    background:#f2f6fb;
    margin-bottom:6px;
  }

  .btn-order-main,
  .btn-demo-secondary{
    width:100%;
    text-align:center;
    margin-top:10px;
  }
}

/* =========================================================
   HERO / PAGE HEADER
   ========================================================= */
.page-hero{
  background:
    linear-gradient(140deg,rgba(0,31,63,.95),rgba(0,77,153,.9));
  color:#fff;
  border-radius:26px;
  padding:28px 20px;
  box-shadow:0 18px 45px rgba(0,0,0,.14);
  overflow:hidden;
}

.page-hero h1{
  font-weight:900;
  font-size:clamp(1.4rem,4vw,2.2rem);
}

.page-hero p{
  line-height:1.9;
  opacity:.95;
}

/* =========================================================
   CARDS
   ========================================================= */
.kers-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  height:100%;
}

.icon-pill{
  width:52px;
  height:52px;
  border-radius:14px;
  background:rgba(0,77,153,.12);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  margin-bottom:12px;
}

/* =========================================================
   IMAGE CARD
   ========================================================= */
.img-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  height:100%;
}

.img-wrap{
  aspect-ratio:16/10;
  background:#e9eef5;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  border-radius:14px;
  font-weight:900;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  background:#111;
  color:#fff;
  margin-top:60px;
}

/* =========================================================
   AOS FAILSAFE (VERY IMPORTANT)
   ========================================================= */
[data-aos]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* =========================================================
   EXTRA MOBILE SAFETY
   ========================================================= */
@media (max-width:576px){
  .page-hero{
    padding:22px 16px;
  }
}
/* ✅ HERO background image (per-page) */
.page-hero{
  position: relative;
  overflow: hidden;
}

/* الطبقة تاع الصورة */
.page-hero::after{
  content:"";
  position:absolute;
  inset:-30px;
  background-image: var(--hero-img, url('static/sa.png'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .14;            /* قوّيها إذا تحب: 0.18 / 0.22 */
  filter: blur(0px);       /* تقدر تخلي blur(2px) لو تحب نعومة */
  transform: scale(1.05);
  pointer-events: none;
  z-index: 0;
}

/* الطبقة تاع الgradient فوق الصورة */
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(140deg, rgba(0,31,63,.92), rgba(0,77,153,.86));
  z-index: 1;
}

/* محتوى الهيرو فوق كلشي */
.page-hero > *{
  position: relative;
  z-index: 2;
}