/* ======================================================================
   Rawafid Security & Safety theme — assets/css/style.css
   مستخرج من rawafid-website.html وتم تكييفه ليعمل ضمن نظام القوالب (Twig)
   ====================================================================== */

:root{
  --navy: #0B1B26;
  --navy-2: #101f2c;
  --navy-3: #16283a;
  --indigo: #1d2350;
  --green: #69C398;
  --green-dark: #4a9d76;
  --light: #E5E5E5;
  --white: #ffffff;
  --muted-text: rgba(229,229,229,.7);
  --radius: 14px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--navy);
  color:var(--light);
  font-family:'Tajawal', sans-serif;
  overflow-x:hidden;
  transition: background-color .4s ease, color .4s ease;
}

*, *::before, *::after{
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* ===== Fine grain texture overlay for depth ===== */
body::before{
  content:'';
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ===== Scroll progress bar ===== */
.scroll-progress{
  position:fixed; top:0; right:0; left:0; height:3px; z-index:1100;
  background:transparent;
}
.scroll-progress-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--green), var(--green-dark));
  transition:width .1s linear;
  box-shadow:0 0 10px rgba(105,195,152,.6);
}

/* ===== Back to top button ===== */
.back-to-top{
  position:fixed; bottom:26px; left:26px; z-index:900;
  width:46px; height:46px; border-radius:50%;
  background:var(--navy-2);
  border:1px solid rgba(105,195,152,.35);
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:.3s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  cursor:pointer;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--green); color:var(--navy); border-color:var(--green);}

/* ===== Active nav link ===== */
.nav-link.active{color:var(--white) !important;}
.nav-link.active::after{width:calc(100% - 32px);}

/* ===== Staggered reveal for grids ===== */
.row > .reveal:nth-child(1){transition-delay:.02s;}
.row > .reveal:nth-child(2){transition-delay:.08s;}
.row > .reveal:nth-child(3){transition-delay:.14s;}
.row > .reveal:nth-child(4){transition-delay:.20s;}
.row > .reveal:nth-child(5){transition-delay:.26s;}
.row > .reveal:nth-child(6){transition-delay:.32s;}
.row > .reveal:nth-child(7){transition-delay:.38s;}
.row > .reveal:nth-child(8){transition-delay:.44s;}
.row > .reveal:nth-child(9){transition-delay:.50s;}
.row > .reveal:nth-child(10){transition-delay:.56s;}
.row > .reveal:nth-child(11){transition-delay:.62s;}
.timeline > .reveal:nth-child(1){transition-delay:.02s;}
.timeline > .reveal:nth-child(2){transition-delay:.07s;}
.timeline > .reveal:nth-child(3){transition-delay:.12s;}
.timeline > .reveal:nth-child(4){transition-delay:.17s;}
.timeline > .reveal:nth-child(5){transition-delay:.22s;}
.timeline > .reveal:nth-child(6){transition-delay:.27s;}
.timeline > .reveal:nth-child(7){transition-delay:.32s;}
.timeline > .reveal:nth-child(8){transition-delay:.37s;}
.timeline > .reveal:nth-child(9){transition-delay:.42s;}

/* ===== Button icon micro-interaction ===== */
.btn-brand i, .btn-outline-brand i{transition:transform .25s ease; display:inline-block;}
.btn-brand:hover i, .btn-outline-brand:hover i{transform:translateX(-5px);}

/* ===== Gradient accent text ===== */
.text-gradient{
  background:linear-gradient(90deg, var(--green), #9adfc0);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

h1,h2,h3,h4,.display-font{
  font-family:'Cairo', sans-serif;
  font-weight:800;
  color:var(--white);
}

.text-green{color:var(--green) !important;}
.bg-navy{background:var(--navy) !important;}
.bg-navy-2{background:var(--navy-2) !important;}
.bg-navy-3{background:var(--navy-3) !important;}

a{text-decoration:none;}

/* ===== Grid pattern (from brand alignment grids) ===== */
.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 90%);
  pointer-events:none;
}

/* ===== Shield mark (drawn as CSS-friendly SVG use) ===== */
.shield-icon{display:inline-block; line-height:0;}

/* ===== Navbar ===== */
.navbar{
  position:fixed; top:0; right:0; left:0; z-index:1000;
  padding: 18px 0;
  transition: all .35s ease;
  background: linear-gradient(to bottom, rgba(11,27,38,.9), transparent);
}
.navbar.scrolled{
  padding: 10px 0;
  background: rgba(11,27,38,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(105,195,152,.15);
}
.navbar .brand-name{
  font-family:'Cairo', sans-serif;
  font-weight:800;
  font-size:1.15rem;
  color:var(--white);
}
.navbar .brand-name small{
  display:block; font-family:'Tajawal',sans-serif; font-weight:400;
  font-size:.68rem; color:var(--green); letter-spacing:.5px;
}
.nav-link{
  color: var(--light) !important;
  font-weight:500;
  padding: 8px 16px !important;
  position:relative;
}
.nav-link::after{
  content:''; position:absolute; right:16px; bottom:2px; width:0; height:2px;
  background:var(--green); transition: width .25s ease;
}
.nav-link:hover::after{width:calc(100% - 32px);}
.nav-link:hover{color:var(--white) !important;}

.btn-brand{
  background:var(--green);
  color:var(--navy);
  font-weight:700;
  border:none;
  padding:10px 26px;
  border-radius:10px;
  transition:.25s;
}
.btn-brand:hover{background:var(--white); color:var(--navy); transform:translateY(-2px);}

.btn-outline-brand{
  border:1.5px solid rgba(255,255,255,.35);
  color:var(--white);
  padding:10px 26px;
  border-radius:10px;
  font-weight:600;
  transition:.25s;
}
.btn-outline-brand:hover{border-color:var(--green); color:var(--green); background:rgba(105,195,152,.08);}

/* ===== Theme / Language icon buttons ===== */
.icon-btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  color:var(--light);
  background:transparent;
  font-size:1.05rem;
  transition:.25s;
  cursor:pointer;
}
.icon-btn:hover{background:var(--green); color:var(--navy); border-color:var(--green);}
.icon-btn:focus-visible{outline:2px solid var(--green); outline-offset:2px;}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:110px;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(105,195,152,.14), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(29,35,80,.5), transparent 45%),
    var(--navy);
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(105,195,152,.35);
  background:rgba(105,195,152,.08);
  color:var(--green);
  padding:6px 16px; border-radius:30px;
  font-size:.85rem; font-weight:600;
  margin-bottom:22px;
}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 0 4px rgba(105,195,152,.2);}
.hero h1{
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height:1.25;
}
.hero p.lead{
  color: rgba(229,229,229,.75);
  font-size:1.15rem;
  max-width:560px;
}
.hero-shield-wrap{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.hero-shield-glow{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(105,195,152,.25), transparent 70%);
  filter: blur(10px);
}
.hero-shield-svg{position:relative; z-index:2; width:100%; max-width:380px; filter: drop-shadow(0 20px 50px rgba(0,0,0,.5));}

.hero-watermark{
  position:absolute; top:50%; left:-6%; transform:translateY(-50%);
  width:520px; height:auto; opacity:.05; pointer-events:none;
}
body.light-mode .hero-watermark{opacity:.07;}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--green); font-size:1rem;
  z-index:3;
  animation: bounce-cue 2.2s ease-in-out infinite;
}
body.light-mode .scroll-cue{border-color:rgba(11,27,38,.15);}
@keyframes bounce-cue{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(8px);}
}

.stats-strip{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:60px; padding-top:34px;
}
.stat-item h3{
  font-size:2.2rem; color:var(--green); margin-bottom:2px;
}
.stat-item span{color:rgba(229,229,229,.6); font-size:.9rem;}

/* ===== Section heading pattern ===== */
.section-eyebrow{
  color:var(--green); font-weight:700; letter-spacing:1px;
  font-size:.85rem; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.section-eyebrow::before{
  content:''; width:26px; height:2px; background:var(--green); display:inline-block;
}
.section-title{font-size:clamp(1.7rem,3vw,2.4rem); margin-top:10px;}

/* ===== About ===== */
.about-visual{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background: var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  min-height:420px;
}
.shield-pattern{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
  padding:24px; opacity:.55;
}
.shield-pattern svg{width:100%; height:auto;}
.shield-pattern img{width:100%; height:auto;}
.about-visual .glass-badge{
  position:absolute; bottom:24px; right:24px; left:24px;
  background:rgba(11,27,38,.75);
  backdrop-filter: blur(10px);
  border:1px solid rgba(105,195,152,.25);
  border-radius:16px;
  padding:18px 22px;
  display:flex; align-items:center; gap:16px;
}
.about-visual .glass-badge i{font-size:1.8rem; color:var(--green);}

.check-list li{
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:14px; color:rgba(229,229,229,.85);
}
.check-list i{color:var(--green); font-size:1.2rem; margin-top:2px;}

/* ===== Vision / Mission cards ===== */
.vm-card{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:30px;
  height:100%;
  transition:.3s;
}
body.light-mode .vm-card{border-color:rgba(11,27,38,.08); box-shadow:0 4px 16px rgba(11,27,38,.04);}
.vm-card:hover{border-color:rgba(105,195,152,.4); transform:translateY(-4px);}
.vm-icon{
  width:52px; height:52px; border-radius:12px;
  background:rgba(105,195,152,.12);
  display:flex; align-items:center; justify-content:center;
  color:var(--green); font-size:1.4rem; margin-bottom:16px;
}
.vm-card h4{font-size:1.15rem; margin-bottom:10px;}
.vm-card p{color:var(--muted-text); font-size:.94rem; margin-bottom:0;}

/* ===== Value badges ===== */
.value-badge{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:20px 14px;
  text-align:center;
  height:100%;
  transition:.3s;
}
body.light-mode .value-badge{border-color:rgba(11,27,38,.08);}
.value-badge:hover{border-color:rgba(105,195,152,.45); transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.2);}
.value-badge i{font-size:1.5rem; color:var(--green); display:block; margin-bottom:10px;}
.value-badge span{font-weight:700; font-size:.9rem; color:var(--white);}

/* ===== Quality & Safety commitment cards ===== */
.commitment-card{
  background:linear-gradient(150deg, var(--navy-2), var(--navy-3));
  border:1px solid rgba(105,195,152,.18);
  border-radius:16px;
  padding:30px;
  height:100%;
}
.commitment-card i{font-size:1.7rem; color:var(--green); margin-bottom:14px; display:block;}
.commitment-card h4{font-size:1.2rem; margin-bottom:10px;}
.commitment-card p{color:var(--muted-text); font-size:.94rem; margin-bottom:0;}

/* ===== Services ===== */
.service-card{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:32px 26px;
  height:100%;
  transition:.3s ease;
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(105,195,152,.10), transparent 60%);
  opacity:0; transition:.3s;
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(105,195,152,.4);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.service-card:hover::before{opacity:1;}
.service-icon{
  width:58px; height:58px; border-radius:14px;
  background:rgba(105,195,152,.12);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  font-size:1.5rem; color:var(--green);
  position:relative; z-index:1;
}
.service-card h4{font-size:1.15rem; position:relative; z-index:1;}
.service-card p{color:rgba(229,229,229,.65); font-size:.92rem; position:relative; z-index:1; margin-bottom:0;}
.service-num{
  position:absolute; top:20px; left:24px; font-family:'Cairo',sans-serif;
  font-weight:800; font-size:.8rem; color:rgba(255,255,255,.18);
}

/* ===== Service category cards ===== */
.category-card{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:32px 28px;
  height:100%;
  transition:.3s ease;
}
body.light-mode .category-card{border-color:rgba(11,27,38,.08); box-shadow:0 4px 18px rgba(11,27,38,.04);}
.category-card:hover{transform:translateY(-6px); border-color:rgba(105,195,152,.4); box-shadow:0 20px 40px rgba(0,0,0,.3);}
.category-card h4{font-size:1.2rem; margin-bottom:18px;}
.category-list{list-style:none; padding:0; margin:0;}
.category-list li{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
  color:var(--muted-text);
  font-size:.92rem;
}
body.light-mode .category-list li{border-bottom-color:rgba(11,27,38,.1);}
.category-list li:last-child{border-bottom:none;}
.category-list i{color:var(--green); font-size:.95rem;}

/* ===== Product / Sector chips ===== */
.product-chip, .sector-chip{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:20px 14px;
  text-align:center;
  height:100%;
  transition:.3s;
}
body.light-mode .product-chip, body.light-mode .sector-chip{border-color:rgba(11,27,38,.08);}
.product-chip:hover, .sector-chip:hover{
  border-color:rgba(105,195,152,.45); transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.product-chip i, .sector-chip i{font-size:1.4rem; color:var(--green); display:block; margin-bottom:10px;}
.product-chip span, .sector-chip span{font-size:.86rem; font-weight:600; color:var(--white);}

/* ===== Diagonal gradient band (signature element from brand slides) ===== */
.diagonal-band{
  position:relative;
  background: linear-gradient(115deg, #3f7d63 0%, var(--navy) 62%);
  overflow:hidden;
  padding:90px 0;
}
.diagonal-band::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image: linear-gradient(115deg, #000 0%, transparent 60%);
}
.diagonal-band .content{position:relative; z-index:2;}
.why-card{
  background:rgba(11,27,38,.45);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:26px;
  backdrop-filter: blur(4px);
  height:100%;
}
.why-card i{font-size:1.6rem; color:var(--green); margin-bottom:14px; display:block;}
.why-card h5{color:var(--white); font-family:'Cairo',sans-serif; font-weight:700;}
.why-card p{color:rgba(229,229,229,.75); font-size:.9rem; margin-bottom:0;}

/* ===== Process timeline ===== */
.timeline{position:relative; max-width:820px; margin:0 auto; padding-right:10px;}
.timeline::before{
  content:''; position:absolute; top:6px; bottom:6px; right:23px;
  width:2px;
  background: repeating-linear-gradient(to bottom, rgba(105,195,152,.5) 0 8px, transparent 8px 16px);
}
.timeline-item{
  position:relative;
  display:flex; align-items:flex-start; gap:22px;
  padding-right:0;
  margin-bottom:30px;
}
.timeline-item:last-child{margin-bottom:0;}
.timeline-num{
  flex:0 0 auto;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--navy-2);
  border:2px solid var(--green);
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cairo',sans-serif; font-weight:800; font-size:.95rem;
  position:relative; z-index:1;
}
.timeline-body{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:18px 22px;
  flex:1;
}
body.light-mode .timeline-body{border-color:rgba(11,27,38,.08); box-shadow:0 4px 14px rgba(11,27,38,.04);}
.timeline-body h5{font-family:'Cairo',sans-serif; font-size:1.02rem; margin-bottom:6px;}
.timeline-body p{color:var(--muted-text); font-size:.9rem; margin-bottom:0;}

/* ===== Management quote block ===== */
.quote-block{
  max-width:820px; margin:0 auto; text-align:center;
  position:relative;
}
.quote-mark{
  font-size:3rem; color:rgba(105,195,152,.35);
  display:block; margin-bottom:6px;
}
.quote-text{
  font-size:1.15rem; line-height:2; color:var(--white);
  margin:18px 0 22px;
}
.quote-signature{
  color:var(--green); font-weight:700; font-size:.95rem;
  position:relative; display:inline-block; padding-top:16px;
}
.quote-signature::before{
  content:''; position:absolute; top:0; right:50%; transform:translateX(50%);
  width:40px; height:2px; background:var(--green);
}

/* ===== CTA banner ===== */
.cta-banner{
  background:var(--navy-2);
  border:1px solid rgba(105,195,152,.25);
  border-radius:24px;
  padding:52px;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(105,195,152,.18), transparent 70%);
  top:-100px; left:-60px;
}

/* ===== Contact ===== */
.contact-card{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  padding:16px 20px;
  display:flex; align-items:center; gap:16px;
  margin-bottom:16px;
}
.contact-card i{font-size:1.3rem; color:var(--green);}
.contact-card .lbl{font-size:.78rem; color:rgba(229,229,229,.55);}
.contact-card .val{font-weight:700; color:var(--white);}

.form-control, .form-select{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.1);
  color:var(--white);
  padding:12px 16px;
  border-radius:10px;
}
.form-control:focus, .form-select:focus{
  background:var(--navy-2); color:var(--white);
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(105,195,152,.15);
}
.form-control::placeholder{color:rgba(229,229,229,.4);}
label.form-label{font-size:.85rem; color:rgba(229,229,229,.7); margin-bottom:6px;}

/* ===== Footer ===== */
footer{
  background:var(--navy-2);
  border-top:1px solid rgba(255,255,255,.06);
  padding:56px 0 22px;
}
footer h6{font-family:'Cairo',sans-serif; color:var(--white); margin-bottom:18px; font-weight:700;}
footer a.flink{color:rgba(229,229,229,.6); display:block; margin-bottom:10px; font-size:.92rem; transition:.2s;}
footer a.flink:hover{color:var(--green);}
.social-circle{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--light); margin-left:8px; transition:.25s;
}
.social-circle:hover{background:var(--green); border-color:var(--green); color:var(--navy);}

/* ===== reveal animation ===== */
.reveal{transition:opacity .7s ease, transform .7s ease;}
.js-ready .reveal{opacity:0; transform:translateY(24px);}
.reveal.show{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
  .scroll-cue{animation:none;}
}

/* ===== Portfolio / Works ===== */
.project-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  height:100%;
  transition:.35s ease;
}
body.light-mode .project-card{border-color:rgba(11,27,38,.08); box-shadow:0 4px 18px rgba(11,27,38,.05);}
.project-card:hover{transform:translateY(-8px); border-color:rgba(105,195,152,.4); box-shadow:0 20px 40px rgba(0,0,0,.35);}
body.light-mode .project-card:hover{box-shadow:0 20px 40px rgba(11,27,38,.12);}
.project-visual{
  height:190px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(105,195,152,.22), rgba(29,35,80,.45));
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, rgba(105,195,152,.22), rgba(29,35,80,.45));
  overflow:hidden;
}
.project-visual i{font-size:3rem; color:var(--green); position:relative; z-index:1;}
.project-visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,27,38,.55), transparent 60%);
}
.project-body{padding:22px 24px;}
.project-tag{
  display:inline-block;
  background:rgba(105,195,152,.12);
  color:var(--green);
  font-size:.72rem;
  font-weight:700;
  padding:4px 14px;
  border-radius:20px;
  margin-bottom:12px;
}
.project-card h5{font-family:'Cairo',sans-serif; font-size:1.05rem; margin-bottom:8px;}
.project-card .meta{font-size:.82rem; color:var(--muted-text); display:flex; align-items:center; gap:6px; margin-bottom:0;}
.project-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--green); font-size:.85rem; font-weight:700;
  margin-top:14px;
}
.project-link i{transition:.25s;}
.project-card:hover .project-link i{transform:translateX(-4px);}

/* ===== Clients logos ===== */
.client-logo-card{
  background:#ffffff;
  border-radius:14px;
  padding:20px;
  height:104px;
  display:flex; align-items:center; justify-content:center;
  filter:grayscale(1);
  opacity:.7;
  transition:.3s ease;
  border:1px solid rgba(11,27,38,.06);
}
.client-logo-card:hover{filter:grayscale(0); opacity:1; transform:translateY(-4px); box-shadow:0 14px 26px rgba(0,0,0,.18);}
.client-logo-card img{max-width:100%; max-height:44px; object-fit:contain;}
.clients-note{
  font-size:.85rem; color:var(--muted-text);
  border:1px dashed rgba(255,255,255,.18);
  border-radius:10px; padding:10px 16px; display:inline-flex; align-items:center; gap:8px;
}
body.light-mode .clients-note{border-color:rgba(11,27,38,.18);}

@media (max-width:991px){
  .diagonal-band{background:linear-gradient(160deg, #3f7d63 0%, var(--navy) 55%);}
}

/* ===== Mobile menu: solid readable background ===== */
@media (max-width: 991.98px){
  .navbar-collapse{
    background: var(--navy-2);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    margin-top: 14px;
    padding: 18px 20px 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,.4);
  }
  body.light-mode .navbar-collapse{
    border-color: rgba(11,27,38,.08);
    box-shadow: 0 18px 40px rgba(11,27,38,.12);
  }
  .navbar-collapse .nav-item{
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  body.light-mode .navbar-collapse .nav-item{
    border-bottom-color: rgba(11,27,38,.06);
  }
  .navbar-collapse .nav-item:last-child{border-bottom:none;}
  .navbar-collapse .nav-link{padding: 12px 4px !important;}
}

/* ======================================================
   LIGHT MODE
   ====================================================== */
body.light-mode{
  --navy: #F3F6F5;
  --navy-2: #FFFFFF;
  --navy-3: #ECF1EF;
  --white: #0B1B26;
  --light: #33454f;
  --muted-text: rgba(11,27,38,.62);
}
body.light-mode .grid-overlay{
  background-image:
    linear-gradient(rgba(11,27,38,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,27,38,.06) 1px, transparent 1px);
}
body.light-mode .navbar.scrolled{
  background: rgba(255,255,255,.92);
  border-bottom-color: rgba(11,27,38,.08);
}
body.light-mode .navbar:not(.scrolled){
  background: linear-gradient(to bottom, rgba(243,246,245,.9), transparent);
}
body.light-mode .nav-link{color:#1c2a33 !important;}
body.light-mode .nav-link:hover{color:#0B1B26 !important;}
body.light-mode .hero{
  background:
    radial-gradient(circle at 85% 20%, rgba(105,195,152,.2), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(29,35,80,.06), transparent 45%),
    var(--navy);
}
body.light-mode .hero-eyebrow{border-color:rgba(74,157,118,.4); background:rgba(105,195,152,.12);}
body.light-mode .hero p.lead{color:rgba(11,27,38,.65);}
body.light-mode .btn-outline-brand{border-color:rgba(11,27,38,.25); color:#0B1B26;}
body.light-mode .btn-outline-brand:hover{border-color:var(--green-dark); color:var(--green-dark); background:rgba(105,195,152,.12);}
body.light-mode .stats-strip{border-top-color:rgba(11,27,38,.1);}
body.light-mode .stat-item span{color:rgba(11,27,38,.55);}
body.light-mode .about-visual{border-color:rgba(11,27,38,.08); box-shadow:0 10px 30px rgba(11,27,38,.06);}
body.light-mode .about-visual .glass-badge{background:rgba(255,255,255,.9); border-color:rgba(105,195,152,.35);}
body.light-mode .glass-badge .text-white{color:#0B1B26 !important;}
body.light-mode .check-list li{color:rgba(11,27,38,.75);}
body.light-mode .service-card{border-color:rgba(11,27,38,.08); box-shadow:0 4px 18px rgba(11,27,38,.05);}
body.light-mode .service-card:hover{border-color:rgba(74,157,118,.5); box-shadow:0 20px 40px rgba(11,27,38,.1);}
body.light-mode .service-card p{color:rgba(11,27,38,.6);}
body.light-mode .service-num{color:rgba(11,27,38,.12);}
body.light-mode .process-item p{color:rgba(11,27,38,.55);}
body.light-mode .cta-banner{border-color:rgba(105,195,152,.4); box-shadow:0 10px 30px rgba(11,27,38,.05);}
body.light-mode .cta-banner p{color:rgba(11,27,38,.65);}
body.light-mode .contact-card{border-color:rgba(11,27,38,.08); box-shadow:0 4px 14px rgba(11,27,38,.04);}
body.light-mode .contact-card .lbl{color:rgba(11,27,38,.5);}
body.light-mode .form-control, body.light-mode .form-select{background:#fff; border-color:rgba(11,27,38,.15); color:#0B1B26;}
body.light-mode .form-control::placeholder{color:rgba(11,27,38,.35);}
body.light-mode label.form-label{color:rgba(11,27,38,.6);}
body.light-mode footer{border-top-color:rgba(11,27,38,.08);}
body.light-mode footer a.flink{color:rgba(11,27,38,.6);}
body.light-mode footer a.flink:hover{color:var(--green-dark);}
body.light-mode .social-circle{border-color:rgba(11,27,38,.15); color:#0B1B26;}
body.light-mode hr{border-color:rgba(11,27,38,.08) !important;}
body.light-mode svg path[stroke="#ffffff"]{stroke:#0B1B26;}
body.light-mode .icon-btn{border-color:rgba(11,27,38,.15); color:#0B1B26;}
body.light-mode .icon-btn:hover{background:var(--green); color:#0B1B26; border-color:var(--green);}

/* ======================================================================
   إضافات لدعم صفحات لوحة التحكم (أعمالنا الكاملة، تواصل، بحث، صفحات، 404)
   ====================================================================== */

/* ===== Inner page hero ===== */
.page-hero{
  position:relative; padding:150px 0 60px;
  background:
    radial-gradient(circle at 85% 20%, rgba(105,195,152,.14), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(29,35,80,.5), transparent 45%),
    var(--navy);
  overflow:hidden;
}
.page-hero h1{font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:10px;}
.page-hero p{color:var(--muted-text); font-size:1rem; margin-bottom:0;}

/* ===== Breadcrumb ===== */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:rgba(229,229,229,.6); margin-bottom:10px;}
.breadcrumb a{color:rgba(229,229,229,.75);}
.breadcrumb a:hover{color:var(--green);}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--green);}

/* ===== Page header (rich sub-page hero, e.g. generic CMS pages) ===== */
.page-header{
  position:relative;
  padding:160px 0 90px;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(105,195,152,.14), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(29,35,80,.5), transparent 45%),
    var(--navy);
}
.page-header .section-title{font-size:clamp(2rem,4vw,2.8rem);}
.page-header .updated-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted-text);
  padding:8px 18px; border-radius:30px;
  font-size:.85rem; margin-top:18px;
}
body.light-mode .page-header .updated-badge{border-color:rgba(11,27,38,.08);}
.breadcrumb-link{
  color:var(--muted-text); font-size:.9rem; display:inline-flex; align-items:center; gap:6px;
}
.breadcrumb-link:hover{color:var(--green);}

/* ===== Policy-style content (rich text pages) ===== */
.policy-wrap{max-width:880px;}
.policy-wrap.mx-auto{margin:0 auto;}
.policy-section{padding:0 0 36px;}
.policy-section:last-child{border-bottom:none;}
.policy-section p{color:var(--muted-text); font-size:1rem; line-height:2; margin-bottom:14px;}
.policy-section h2{font-size:1.5rem; margin:36px 0 14px;}
.policy-section h3{font-size:1.2rem; margin:28px 0 12px;}
.policy-section ul, .policy-section ol{color:var(--muted-text); font-size:1rem; line-height:2; padding-inline-start:22px; margin-bottom:14px;}
.policy-section ul li{margin-bottom:6px;}
.policy-section ul li::marker{color:var(--green);}
.policy-section img{border-radius:16px; margin:28px 0; max-width:100%;}
.policy-head{display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.policy-num{
  flex:0 0 auto;
  width:46px; height:46px; border-radius:12px;
  background:rgba(105,195,152,.12);
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cairo',sans-serif; font-weight:800; font-size:.95rem;
}
.policy-head h3{font-size:1.25rem; margin:0;}
.policy-toc{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:22px 24px;
  margin-bottom:10px;
}
body.light-mode .policy-toc{border-color:rgba(11,27,38,.08);}
.policy-toc h6{font-family:'Cairo',sans-serif; color:var(--white); margin-bottom:14px; font-weight:700;}
.policy-toc a{
  display:flex; align-items:center; gap:10px;
  color:var(--muted-text); font-size:.92rem;
  padding:7px 0;
}
.policy-toc a:hover, .policy-toc a.active{color:var(--green);}
.policy-toc a span.n{
  color:var(--green); font-family:'Cairo',sans-serif; font-weight:800; font-size:.82rem;
  width:20px;
}

/* ===== Category filter pills ===== */
.filter-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px;}
.filter-pill{
  background:var(--navy-2); border:1.5px solid rgba(255,255,255,.08); color:var(--muted-text);
  font-family:inherit; font-size:.85rem; font-weight:700; padding:9px 20px; border-radius:999px; cursor:pointer;
}
body.light-mode .filter-pill{border-color:rgba(11,27,38,.08);}
.filter-pill.active{background:var(--green); border-color:var(--green); color:var(--navy);}
.filter-pill:not(.active):hover{border-color:var(--green); color:var(--green);}

/* ===== Pagination ===== */
.pagination{display:flex; justify-content:center; margin-top:50px;}
.pagination ul{display:flex; align-items:center; gap:8px; list-style:none; padding:0; margin:0; flex-wrap:wrap;}
.pagination a, .pagination span{
  display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px;
  border-radius:10px; border:1px solid rgba(255,255,255,.1); color:var(--light); font-weight:700; font-size:.85rem;
}
body.light-mode .pagination a, body.light-mode .pagination span{border-color:rgba(11,27,38,.1);}
.pagination a:hover{border-color:var(--green); color:var(--green);}
.pagination li.active span{background:var(--green); border-color:var(--green); color:var(--navy);}
.pagination li.disabled span{opacity:.35;}
.pagination li.dots span{border:none;}

/* ===== Rich text page content ===== */
.page-content{max-width:820px; margin:0 auto; font-size:1rem; color:var(--light);}
.page-content p{margin:0 0 20px; color:var(--muted-text);}
.page-content h2{font-size:1.5rem; margin:36px 0 14px;}
.page-content h3{font-size:1.2rem; margin:28px 0 12px;}
.page-content ul, .page-content ol{margin:0 0 20px; padding-inline-start:22px; color:var(--muted-text);}
.page-content li{margin-bottom:8px;}
.page-content img{border-radius:16px; margin:28px 0; max-width:100%;}

/* ===== Other pages / sidebar list ===== */
.other-pages-card{background:var(--navy-2); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px;}
body.light-mode .other-pages-card{border-color:rgba(11,27,38,.08);}
.other-pages-card h5{font-family:'Cairo',sans-serif; font-size:1rem; margin-bottom:14px;}
.other-pages-card a{display:block; color:var(--muted-text); font-weight:600; font-size:.92rem; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,.08);}
body.light-mode .other-pages-card a{border-bottom-color:rgba(11,27,38,.1);}
.other-pages-card a:last-child{border-bottom:none;}
.other-pages-card a:hover, .other-pages-card a.active{color:var(--green);}

/* ===== Search results ===== */
.result-card{
  background:var(--navy-2); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:24px; display:flex; gap:18px; align-items:flex-start; margin-bottom:18px; transition:.25s;
}
body.light-mode .result-card{border-color:rgba(11,27,38,.08);}
.result-card:hover{border-color:rgba(105,195,152,.4); transform:translateY(-3px);}
.result-card .thumb{
  width:110px; height:82px; border-radius:12px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg, rgba(105,195,152,.22), rgba(29,35,80,.45));
  display:flex; align-items:center; justify-content:center;
}
.result-card .thumb img{width:100%; height:100%; object-fit:cover;}
.result-card .thumb i{font-size:1.6rem; color:var(--green);}
.result-card h3{font-size:1.05rem; margin-bottom:6px;}
.result-card p{color:var(--muted-text); font-size:.88rem; margin-bottom:0;}

/* ===== Alerts ===== */
.alert{border-radius:12px; padding:14px 18px; font-size:.9rem; font-weight:700; margin-bottom:26px;}
.alert-success{background:rgba(105,195,152,.12); border:1px solid rgba(105,195,152,.35); color:var(--green);}
.alert-warning{background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35); color:#F59E0B;}

/* ===== 404 ===== */
.error-code{
  font-family:'Cairo',sans-serif; font-weight:900; font-size:clamp(70px,14vw,140px); line-height:1;
  background:linear-gradient(90deg, var(--green), #9adfc0); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== LTR direction overrides (English pages) ===== */
html[dir="ltr"] .nav-link::after{right:auto; left:16px;}
html[dir="ltr"] .timeline{padding-right:0; padding-left:10px;}
html[dir="ltr"] .timeline::before{right:auto; left:23px;}

/* ===== Contact page tweaks ===== */
.contact-page-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:start;}
@media (max-width:900px){ .contact-page-grid{grid-template-columns:1fr;} }
#msgSubmit .text-success{color:var(--green) !important; font-weight:700;}
#msgSubmit .text-danger{color:#EF4444 !important; font-weight:700;}
#msgSubmit .text-warning{color:#F59E0B !important; font-weight:700;}