/* =========================================================
   QARMA — Quality And Risk Management Advisor
   Design tokens: navy / orange (from the QARMA mark),
   a maritime compass-dial motif as the recurring signature.
   ========================================================= */

:root{
  /* --- brand palette --- */
  --navy-900:#0b2a56;
  --navy-800:#011e4a;
  --navy-700:#003484;
  --navy-600:#0454a5;
  --orange-500:#f7801d;
  --orange-600:#DD7A0F;
  --orange-100:#FDEBD4;
  --fog-100:#F4F6F9;
  --fog-200:#E8ECF2;
  --ink-900:#011e4a;
  --ink-600:#4A5568;
  --ink-400:#8592A3;
  --white:#FFFFFF;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;

  --shadow-card: 0 12px 30px -14px rgba(8,27,48,.25);
  --shadow-card-hover: 0 20px 40px -16px rgba(8,27,48,.32);

  --font-display:'Cairo', 'Tajawal', sans-serif;
  --font-body:'Tajawal', 'Cairo', sans-serif;
  --font-utility:'Inter', 'Tajawal', sans-serif;
}

html,body{
  overflow-x: hidden;
}

.text-orange{
  color: var(--orange-500) !important;
}
.bg-orange{
  background-color: var(--orange-500) !important;
}
.bg-lite-orange{
  background: #fefaf7;
}

.service-contact-icon-div i{
  padding:10px 10px;
}
.btn-outline-qarma{
  border-radius: 5px;
  border: 2px solid var(--orange-500);
}

.btn-outline-qarma:hover{
  background-color: var(--orange-600);
  color: var(--white);
}

.btn-more-qarma{
    background-color: var(--orange-600);
  color: var(--white);
}

.btn-more-qarma:hover{
  color: #011e4a;
    border-radius: 5px;
  background: #f6b682;
}
.service-image{
  width:350px;
  border-radius:6px;
  border-bottom:3px solid var(--orange-500);
}
.services-page-img{
height:200px;
width: 300px;
object-fit: cover;
  border-radius:6px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth; scroll-padding-top:110px;}

body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--white);
  line-height:1.8;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--navy-900);
  margin-bottom:.6em;
}

.navbar-logo{
  width:160px;
}

a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}

.ltr-nums{font-family:var(--font-utility); direction:ltr; unicode-bidi:isolate; display:inline-block;}

::selection{background:var(--orange-100); color:var(--navy-900);}

/* focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--orange-500);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-narrow{max-width:900px; margin-inline:auto;}

/* =========================================================
   Compass / dial motif — the site's signature graphic device
   ========================================================= */
.dial{
  --dial-color: var(--orange-500);
  position:relative;
}
.dial-ring{
  fill:none;
  stroke:currentColor;
}

.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-utility);
  font-weight:700;
  letter-spacing:.06em;
  font-size:.8rem;
  color:var(--orange-600);
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.section-eyebrow svg{width:20px; height:20px; flex-shrink:0;}
.section-eyebrow .eyebrow-ar{
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:0;
  color:var(--navy-700);
  font-weight:700;
  font-size:.95rem;
}

.section-title{
  font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  max-width:820px;
}
.section-lead{
  color:var(--ink-600);
  font-size:1.05rem;
  max-width:720px;
}

.section-pad{padding-block:clamp(3.5rem, 3rem + 3vw, 6.5rem);}
.section-pad-sm{padding-block:clamp(2.5rem, 2rem + 2vw, 4rem);}

.bg-fog{background:var(--fog-100);}
.bg-navy{background:var(--navy-900); color:var(--fog-100);}
.bg-navy .section-title, .bg-navy h1, .bg-navy h2, .bg-navy h3{color:var(--white);}
.bg-navy .section-lead{color:#C9D5E4;}

/* =========================================================
   Buttons
   ========================================================= */
.btn-brand{
  background:linear-gradient(135deg, var(--orange-500), var(--orange-600));
  color:var(--white);
  border:none;
  font-weight:700;
  padding:.85rem 1.9rem;
  border-radius:999px;
  box-shadow:0 10px 22px -8px rgba(243,144,30,.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-brand:hover, .btn-brand:focus-visible{
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 16px 28px -8px rgba(243,144,30,.6);
}
.btn-outline-invert{
  border:1.5px solid rgba(255,255,255,.55);
  color:var(--white);
  font-weight:700;
  padding:.82rem 1.9rem;
  border-radius:999px;
  transition:.2s ease;
}
.btn-outline-invert:hover, .btn-outline-invert:focus-visible{
  background:rgba(255,255,255,.12);
  color:var(--white);
  border-color:#fff;
}
.btn-outline-navy{
  border:1.5px solid var(--navy-700);
  color:var(--navy-700);
  font-weight:700;
  padding:.82rem 1.9rem;
  border-radius:999px;
  transition:.2s ease;
}
.btn-outline-navy:hover, .btn-outline-navy:focus-visible{
  background:var(--navy-700);
  color:var(--white);
}

/* =========================================================
   Navbar
   ========================================================= */
.top-strip{
  background:var(--navy-900);
  color:#B9C7DA;
  font-size:.85rem;
  padding-block:.45rem;
}
.top-strip a{color:#EFD6B0; font-weight:600;}
.top-strip .divider{opacity:.3; margin-inline:.6rem;}

.navbar-qarma{
  background:var(--white);
  padding-block:.7rem;
  box-shadow:0 2px 18px -8px rgba(8,27,48,.18);
}
.brand-mark{display:flex; align-items:center; gap:.65rem;}
.brand-mark svg{width:44px; height:44px;}
.brand-word{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.5rem;
  color:var(--navy-800);
  line-height:1;
}
.brand-word span{color:var(--orange-500);}
.brand-sub{
  font-family:var(--font-utility);
  font-size:.62rem;
  letter-spacing:.05em;
  color:var(--ink-400);
  display:block;
  margin-top:.15rem;
}

.navbar-qarma .nav-link{
  font-weight:700;
  color:var(--navy-800) !important;
  padding-inline:1rem !important;
  position:relative;
}
.navbar-qarma .nav-link.active,
.navbar-qarma .nav-link:hover{color:var(--orange-600) !important;}

.navbar-qarma .dropdown-menu{
  border:none;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card-hover);
  padding:.6rem;
  margin-top:.5rem !important;
}
.navbar-qarma .dropdown-item{
  border-radius:var(--radius-sm);
  padding:.6rem .9rem;
  font-weight:600;
  color:var(--navy-800);
}
.navbar-qarma .dropdown-item:hover, .navbar-qarma .dropdown-item:focus{
  background:var(--orange-100);
  color:var(--orange-600);
}

.navbar-phone{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-utility);
  font-weight:700;
  color:var(--navy-800);
}
.navbar-phone svg{width:20px; height:20px; color:var(--orange-500);}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  /* background:radial-gradient(1200px 600px at 15% -10%, #163E6C 0%, var(--navy-900) 55%); */
  background:url('../images/bg.jpg');
  background-size: cover;
  background-position: center center;
  color:var(--white);
  overflow:hidden;
  padding-block:clamp(4rem, 3rem + 5vw, 7.5rem);
}
.hero-compass{
  position:absolute;
  inset-inline-end:-8%;
  top:50%;
  transform:translateY(-50%);
  width:min(46vw, 620px);
  opacity:.9;
  pointer-events:none;
}
.hero-compass .tick{stroke:rgba(255,255,255,.35); stroke-width:2;}
.hero-compass .tick-major{stroke:rgba(243,144,30,.75); stroke-width:3;}
.hero-compass .ring{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.4;}
.hero-compass .needle{fill:var(--orange-500);}
.hero-compass .center-dot{fill:var(--white);}

.hero-eyebrow{
  color:var(--orange-500);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.85rem;
}
.hero h1{
  color:var(--white);
  font-size:clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem);
  line-height:1.25;
  max-width:760px;
}
.hero p.lead{
  color:#CBD8E9;
  max-width:620px;
  font-size:1.12rem;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:2.2rem;
}
.hero-badge{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:.45rem 1rem;
  font-family:var(--font-utility);
  font-size:.85rem;
  font-weight:700;
  color:#E7EEF7;
}
.hero-badge b{color:var(--orange-500); font-weight:800; margin-inline-end:.3rem;}

/* =========================================================
   Cards: services / values / sectors / team
   ========================================================= */
.icon-tile{
  width:60px; height:60px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color:var(--white);
  flex-shrink:0;
}
.icon-tile svg{width:28px; height:28px;}
.icon-tile.orange{background:linear-gradient(150deg, var(--orange-500), var(--orange-600));}

.service-card{
  background:var(--white);
  border:1px solid var(--fog-200);
  border-radius:var(--radius-md);
  padding:1.9rem;
  height:100%;
  box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--orange-100);
}
.service-card h3{font-size:1.15rem; margin-top:1.1rem; margin-bottom:.5rem;}
.service-card p{color:var(--ink-600); font-size:.96rem; margin-bottom:1rem;}
.service-card .card-link{
  font-weight:700;
  color:var(--orange-600);
  font-size:.92rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.service-card .card-link svg{width:16px; height:16px; transition:transform .2s;}
.service-card:hover .card-link svg{transform:translateX(-4px);}
[dir="rtl"] .service-card:hover .card-link svg{transform:translateX(4px);}

.value-item{display:flex; gap:1rem; align-items:flex-start;}
.value-item .icon-tile{width:50px; height:50px; border-radius:13px;}
.value-item h4{font-size:1.05rem; margin-bottom:.35rem;}
.value-item p{color:var(--ink-600); font-size:.95rem; margin-bottom:0;}

.sector-chip{
  display:flex; align-items:center; gap:.8rem;
  background:var(--white);
  border:1px solid var(--fog-200);
  border-radius:var(--radius-sm);
  padding:1rem 1.1rem;
  font-weight:700;
  color:var(--navy-800);
  height:100%;
  transition:.2s ease;
}
.sector-chip:hover{border-color:var(--orange-500); box-shadow:var(--shadow-card);}
.sector-chip svg{width:26px; height:26px; color:var(--orange-500); flex-shrink:0;}

.partner-badge{
  border:1px solid var(--fog-200);
  border-radius:var(--radius-sm);
  padding:1.1rem 1.4rem;
  display:flex; align-items:center; justify-content:center;
  min-height:86px;
  background:var(--white);
  filter:grayscale(1);
  opacity:.75;
  transition:.2s ease;
}
.partner-badge:hover{filter:none; opacity:1;}
.partner-badge .p-name{
  font-family:var(--font-utility);
  font-weight:800;
  font-size:1.1rem;
  color:var(--navy-800);
  letter-spacing:.02em;
}
.partner-badge .p-name span{color:var(--orange-500);}

/* =========================================================
   Process dial timeline
   ========================================================= */
.process-track{
  position:relative;
}
.process-track::before{
  content:"";
  position:absolute;
  top:34px; inset-inline:6%;
  height:2px;
  background:repeating-linear-gradient(to right, var(--fog-200) 0 10px, transparent 10px 18px);
  z-index:0;
}
@media (max-width:991px){.process-track::before{display:none;}}

.process-step{position:relative; z-index:1; text-align:center;}
.dial-num{
  width:68px; height:68px;
  margin-inline:auto;
  margin-bottom:1.1rem;
  position:relative;
}
.dial-num svg{width:100%; height:100%;}
.dial-num .dial-bg{fill:var(--white); stroke:var(--fog-200); stroke-width:2;}
.dial-num .dial-tick{stroke:var(--orange-500); stroke-width:2;}
.dial-num .dial-num-text{
  font-family:var(--font-utility);
  font-weight:800;
  font-size:1.3rem;
  fill:var(--navy-800);
}
.process-step h4{font-size:1.02rem; margin-bottom:.4rem;}
.process-step p{color:var(--ink-600); font-size:.9rem; max-width:210px; margin-inline:auto;}
.process-step.is-final .dial-bg{fill:var(--orange-500); stroke:var(--orange-500);}
.process-step.is-final .dial-num-text{fill:var(--white);}
.process-step.is-final .dial-tick{stroke:var(--white);}

/* =========================================================
   Team
   ========================================================= */
.team-card{
  background:var(--white);
  border:1px solid var(--fog-200);
  border-radius:var(--radius-md);
  overflow:hidden;
  height:100%;
  box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease;
}
.team-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card-hover);}
.team-photo{
  /* aspect-ratio:2/2; */
  background:linear-gradient(150deg, var(--navy-700), var(--navy-900));
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.team-photo img{
  width:100%;
  height: 500px;
  position: center;
  object-fit: cover;
}

.team-photo svg{width:42%; height:42%; color:rgba(255,255,255,.55);}
.team-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,27,48,.55), transparent 55%);
}
.team-body{padding:1.25rem 1.4rem 1.5rem;}
.team-name{font-family:var(--font-display); font-weight:800; font-size:1.08rem; color:var(--navy-900); margin-bottom:.15rem;}
.team-role{color:var(--orange-600); font-weight:700; font-size:.88rem; margin-bottom:.9rem;}
.team-social{display:flex; gap:.5rem;}
.team-social a{
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--fog-100);
  color:var(--navy-800);
  transition:.2s ease;
}
.team-social a:hover{background:var(--orange-500); color:var(--white);}
.team-social svg{width:16px; height:16px;}

/* =========================================================
   Page header (inner pages)
   ========================================================= */
.page-header{
  background:radial-gradient(900px 420px at 85% 0%, #163E6C 0%, var(--navy-900) 60%);
  color:var(--white);
  padding-block:3.4rem;
  position:relative;
  overflow:hidden;
}
.page-header .crumb{color:#9FB3CC; font-weight:600; font-size:.9rem;}
.page-header .crumb a:hover{color:var(--orange-500);}
.page-header h1{color:var(--white); margin-bottom:.4rem; font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);}
.page-header p{color:#C9D5E4; max-width:640px; margin-bottom:0;}
.page-header-ring{
  position:absolute; inset-inline-end:-60px; top:-60px;
  width:260px; height:260px;
  border:1.5px dashed rgba(255,255,255,.15);
  border-radius:50%;
}
.page-header-ring::after{
  content:"";
  position:absolute; inset:36px;
  border:1.5px solid rgba(243,144,30,.35);
  border-radius:50%;
}

/* =========================================================
   About / values / contact page
   ========================================================= */
.stat-strip{
  background:var(--navy-900);
  color:var(--white);
  border-radius:var(--radius-lg);
  padding:2.2rem 1.5rem;
}
.stat-strip .stat b{
  font-family:var(--font-utility);
  color:var(--orange-500);
}

.info-card{
  background:var(--white);
  border:1px solid var(--fog-200);
  border-radius:var(--radius-md);
  padding:1.6rem;
  box-shadow:var(--shadow-card);
}
.info-row{display:flex; gap:1rem; align-items:flex-start; padding-block:.85rem; border-bottom:1px solid var(--fog-200);}
.info-row:last-child{border-bottom:none;}
.info-row svg{width:22px; height:22px; color:var(--orange-500); flex-shrink:0; margin-top:.2rem;}
.info-row .label{font-size:.8rem; color:var(--ink-400); font-weight:700; margin-bottom:.15rem;}
.info-row .value{font-weight:700; color:var(--navy-900);}
.info-card .social i{
  background-color: var(--orange-600);
  color: #fff;
  font-size: 20px;
  padding:5px 8px;
  border-radius: 50%;
}
.map-plate{
  border-radius:var(--radius-md);
  min-height:220px;
  background:
    linear-gradient(rgba(8,27,48,.86), rgba(8,27,48,.86)),
    repeating-linear-gradient(45deg, #1c3f66 0 2px, transparent 2px 22px);
  color:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  text-align:center;
  padding:1.5rem;
}
.map-plate svg{width:34px; height:34px; color:var(--orange-500);}

.form-control, .form-select{
  border-radius:12px;
  border:1.5px solid var(--fog-200);
  padding:.8rem 1rem;
  font-family:var(--font-body);
}
.form-control:focus, .form-select:focus{
  border-color:var(--orange-500);
  box-shadow:0 0 0 .2rem rgba(243,144,30,.15);
}
.form-label{font-weight:700; color:var(--navy-800); font-size:.92rem;}
.form-note{font-size:.82rem; color:var(--ink-400);}

#contactForm .alert{border-radius:12px;}

/* =========================================================
   Services page
   ========================================================= */
.services-nav{
  position:sticky;
  top:110px;
}
.services-nav .list-group-item{
  border:none;
  border-radius:12px !important;
  margin-bottom:.35rem;
  font-weight:700;
  color:var(--navy-800);
  padding:.75rem 1rem;
  display:flex; align-items:center; gap:.6rem;
}
.services-nav .list-group-item svg{width:18px; height:18px; color:var(--ink-400); flex-shrink:0;}
.services-nav .list-group-item.active{
  background:var(--navy-900);
  color:var(--white);
}
.services-nav .list-group-item.active svg{color:var(--orange-500);}
.services-nav .list-group-item:not(.active):hover{background:var(--fog-100);}

.service-block{
  scroll-margin-top:110px;
  padding-block:2.4rem;
  border-bottom:1px solid var(--fog-200);
}
.service-block:last-child{border-bottom:none;}
.service-block-head{display:flex; gap:1.1rem; align-items:center; margin-bottom:1rem;}
.service-block ul.check-list{list-style:none; padding:0; margin:0;}
.service-block ul.check-list li{
  display:flex; gap:.6rem; align-items:flex-start;
  padding-block:.4rem;
  color:var(--ink-600);
}
.service-block ul.check-list li svg{width:18px; height:18px; color:var(--orange-500); flex-shrink:0; margin-top:.3rem;}
.iso-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--fog-100);
  border:1px solid var(--fog-200);
  border-radius:999px;
  padding:.4rem .9rem;
  font-size:.85rem;
  font-weight:700;
  color:var(--navy-800);
  margin:.2rem;
}
.iso-chip .ltr-nums{color:var(--orange-600);}

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{
  background:linear-gradient(120deg, var(--navy-800), var(--navy-900));
  border-radius:var(--radius-lg);
  padding:clamp(2rem, 1.6rem + 2vw, 3.4rem);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.cta-band .ring-deco{
  position:absolute; inset-inline-start:-40px; bottom:-60px;
  width:220px; height:220px;
  border:1.5px dashed rgba(255,255,255,.18);
  border-radius:50%;
}

/* =========================================================
   Footer
   ========================================================= */
.footer-qarma{
  background:var(--navy-900);
  color:#B9C7DA;
  padding-block:3.5rem 1.5rem;
}
.footer-qarma h5{color:var(--white); font-size:1.02rem; margin-bottom:1.1rem;}
.footer-qarma a{color:#B9C7DA; transition:.2s;}
.footer-qarma a:hover{color:var(--orange-500);}
.footer-qarma ul{list-style:none; padding:0; margin:0;}
.footer-qarma ul li{margin-bottom:.6rem;}
.footer-brand .brand-word{color:var(--white);}
.footer-brand p{color:#8CA0BB; font-size:.92rem; margin-top:.8rem;}
.footer-social{display:flex; gap:.6rem; margin-top:1.1rem;}
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{background:var(--orange-500); color:var(--white);}
.footer-social svg{width:17px; height:17px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:2.6rem;
  padding-top:1.4rem;
  font-size:.85rem;
  color:#7E93AF;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  justify-content:space-between;
}

/* =========================================================
   Reveal-on-scroll (progressive enhancement, JS toggles .is-visible)
   ========================================================= */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:none;}

/* Back to top */
.back-to-top{
  position:fixed;
  inset-inline-end:1.4rem;
  bottom:1.4rem;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--navy-900);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card-hover);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:.25s ease;
  z-index:1040;
  border:none;
}
.back-to-top.show{opacity:1; visibility:visible; transform:none;}
.back-to-top svg{width:20px; height:20px;}



/* =========================================================
   WHY US / COUNTERS STYLES
   ========================================================= */
.why-us-stats{
    background: url(../images/why.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

}


.text-orange {
  color: var(--orange-500, #f7801d) !important;
}

.bg-white-10 {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.bg-white-10:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--orange-500, #f7801d);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stat-icon svg {
  stroke: var(--orange-500, #f7801d);
}

.ltr-nums {
  direction: ltr;
  display: inline-block;
}




/* =========================================================
   PROGRAM / SERVICE CARD HOVER EFFECT
   ========================================================= */
.program-card {
  /* لضمان انسيابية الانتقال عند التمرير والدخول والخروج */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
              box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              border-color 0.4s ease !important;
  will-change: transform, box-shadow;
}

/* التأثير عند عمل Hover */
.program-card:hover {
  /* رفع الكارد للأعلى بمقدار 8 بكسل */
  transform: translateY(-8px); 
  
  /* إضافة ظل 부드러운 واسع يعطي عمق بصري ناعم */
  box-shadow: 0 18px 35px rgba(11, 42, 86, 0.12) !important;
}

/* تحسين شكل الصورة وإيقونة الخدمة أثناء الـ Hover (اختياري) */
.program-card .program-icon {
  transition: transform 0.3s ease;
}

.program-card:hover .program-icon {
  transform: scale(1.05);
}

/* تحسين زر التفاصيل عند الـ Hover على الكارد */
.program-card .btn-more-qarma {
  transition: all 0.3s ease;
}

.program-card:hover .btn-more-qarma {
  background-color: var(--orange-500, #f7801d) !important;
  color: #fff !important;
  border-color: var(--orange-500, #f7801d) !important;
}

.about-us{
  background: url(../images/who\ we\ are.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.contact{
  background: url(../images/contact.webp);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 200px;
}

.team{
  background: url(../images/team.webp);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 250px;
}


/* =========================================================
   Certifications slider — homepage
   ========================================================= */
.certs-slider{ position:relative; }
.certs-track-wrap{ overflow:hidden; }
.certs-track{
  display:flex;
  gap:1.25rem;
  will-change:transform;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  padding-bottom: 30px; padding-top: 12px;
}
.cert-slide{ flex:0 0 auto; width:78%; }
@media (min-width:576px){ .cert-slide{ width:calc(50% - .625rem); } }
@media (min-width:992px){ .cert-slide{ width:calc(25% - .9375rem); } }

.cert-card{
  display:block;
  background:var(--white);
  border:1px solid var(--fog-200);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:2rem 1.4rem;
  text-align:center;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cert-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--orange-100);
}
.cert-badge{
  width:80px; height:80px;
  border-radius:50%;
  margin:0 auto 1.1rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--fog-100);
  border:2px solid var(--fog-200);
  color:var(--navy-800);
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.05rem;
  line-height:1.15;
  transition:.25s ease;
}
.cert-card:hover .cert-badge{
  background:var(--orange-100);
  border-color:var(--orange-500);
  color:var(--orange-600);
}
.cert-card h3{ font-size:1.1rem; margin-bottom:.3rem; }
.cert-card p{ color:var(--ink-600); font-size:.88rem; margin-bottom:0; }

.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  background:var(--navy-900);
  color:var(--white);
  border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
  z-index:6;
  transition:background .2s ease;
}
.slider-arrow svg{ width:20px; height:20px; }
.slider-arrow:hover{ background:var(--orange-500); }
.slider-arrow:disabled{ opacity:.35; cursor:default; }
/* dir="rtl" على الـ html: inline-start = يمين، inline-end = يسار */
.slider-arrow-prev{ inset-inline-start:-14px; }
.slider-arrow-next{ inset-inline-end:-14px; }
@media (max-width:575.98px){
  .slider-arrow{ width:38px; height:38px; }
  .slider-arrow-prev{ inset-inline-start:2px; }
  .slider-arrow-next{ inset-inline-end:2px; }
}

.slider-dots{ display:flex; justify-content:center; gap:.4rem; margin-top:1.8rem; }
.slider-dots button{
  width:8px; height:8px; border-radius:50%; border:none;
  background:var(--fog-200); padding:0; transition:.2s ease;
}
.slider-dots button.active{ width:22px; border-radius:4px; background:var(--orange-500); }




/* =========================================================
   Certification page — new additions only
   ========================================================= */

/* شارة الاعتماد الدائرية (تُستخدم بالهيدر وبالقسم الختامي) */
.cert-mark{
  width:130px; height:130px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--fog-200);
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 auto;
}
.cert-mark .cert-mark-top{
  color:var(--orange-500); font-weight:800; font-size:.8rem; letter-spacing:.05em;
  font-family:var(--font-utility);
}
.cert-mark .cert-mark-num{
  color:var(--navy-900); font-weight:900; font-size:1.55rem;
  font-family:var(--font-display);
}

/* بلوك الفيديو التوضيحي */
.video-block{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow-card);
  background:linear-gradient(150deg, var(--navy-700), var(--navy-900));
}
.video-block::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px);
  background-size:20px 20px;
}
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%;
  background:var(--orange-500); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; z-index:2;
  animation:pulseRing 2.2s infinite;
}
.video-play svg{ width:26px; height:26px; }
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(247,128,29,.45); }
  70%{ box-shadow:0 0 0 22px rgba(247,128,29,0); }
  100%{ box-shadow:0 0 0 0 rgba(247,128,29,0); }
}
.video-label{
  position:absolute; bottom:1.2rem; inset-inline:1.2rem;
  color:var(--white); font-family:var(--font-display); font-weight:700; z-index:2;
}

/* مربعات الفوائد البسيطة (بدون أيقونات، بدون shadow ثقيل) */
.benefit-tile{
  background:var(--fog-100);
  border-radius:var(--radius-sm);
  padding:1.4rem 1.1rem;
  text-align:center;
  height:100%;
  font-weight:700;
  color:var(--navy-800);
  font-size:.92rem;
  display:flex; align-items:center; justify-content:center;
  transition:.2s ease;
}
.benefit-tile:hover{ background:var(--orange-100); color:var(--orange-600); }

/* بانر بخلفية صورة (لأقسام CTA الممتدة بعرض الشاشة) */
.cta-band-image{
  position:relative;
  background-image:
    linear-gradient(0deg, rgba(1,30,74,.85), rgba(1,30,74,.55)),
    url('../images/book-now.webp');
  background-size:cover;
  background-position:center;
  color:var(--white);
  background-attachment: fixed;
}
.cta-band-image h2, .cta-band-image h3{ color:var(--white); }

/* تفعيل check-list خارج نطاق .service-block */
.check-list li svg{
  width:18px; height:18px;
  color:var(--orange-500);
  flex-shrink:0;
  margin-top:.3rem;
}


/* =========================================================
   Certificate verification
   ========================================================= */
.cert-verify-table{ width:100%; border-collapse:collapse; margin-top:.5rem; }
.cert-verify-table td{
  padding:.6rem 0;
  border-bottom:1px solid var(--fog-200);
  vertical-align:top;
}
.cert-verify-table tr:last-child td{ border-bottom:none; }
.cert-verify-table td:first-child{
  color:var(--ink-400);
  font-weight:700;
  font-size:.85rem;
  width:42%;
}
.cert-verify-table td:last-child{
  font-weight:700;
  color:var(--navy-900);
}

.cert-status-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .9rem;
  border-radius:999px;
  font-weight:700;
  font-size:.8rem;
}
.cert-status-pill.active{ background:#E3F7EA; color:#1E8E4E; }
.cert-status-pill.revoked{ background:#FDEBEA; color:#C0392B; }

.cert-verify-alert{
  border-radius:var(--radius-sm);
  padding:.9rem 1.1rem;
  font-weight:700;
  text-align:center;
  margin-top:.5rem;
}
.cert-verify-alert.not-found{ background:#FDEBEA; color:#C0392B; }
.cert-verify-alert.loading{ background:var(--fog-100); color:var(--ink-600); }
.cert-verify-alert.hint{ background:var(--fog-100); color:var(--ink-600); }



/* Multi-line Text Truncation */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-content {
  line-height: 1.9;
  font-size: 1.05rem;
}



/* =========================================================
   FLOATING WHATSAPP BUTTON STYLES (RTL & LTR AUTO-SUPPORT)
   ========================================================= */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    
    /* عند اللغة العربية (RTL) سينزل في اليسار */
    /* عند اللغة الإنجليزية (LTR) سينزل في اليمين تلقائياً */
    inset-inline-start: 25px; 

    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #ffffff !important;
    border-radius: 50px;
    text-align: center;
    font-size: 32px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    color: #ffffff !important;
    transform: scale(1.1);
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.35);
}

/* تأثير النبض */
.whatsapp-float::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #25d366;
    opacity: 0.5;
    z-index: -1;
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* التوافق مع الشاشات الصغيرة */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 26px;
        bottom: 20px;
        inset-inline-start: 20px;
    }
}