:root{
  --pf-brand:#0B6B2B;
  --pf-brand-2:#1C8A3F;
  --pf-text:#0D0F12;
  --pf-muted:#5D6B67;
  --pf-card:rgba(255,255,255,.80);

  --pf-overlay:rgba(234,246,234,.92);
  --pf-overlay2:rgba(234,246,234,.60);
  --pf-overlay-o: 1;

  --pf-shadow:none;
  --pf-radius:28px;

  --pf-min-h:560px;
  --pf-gap:22px;
  --pf-blob:460px;
  --pf-pad-y:46px;
  --pf-pad-x:44px;

  --pf-font: "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, Arial;

  --pf-title-size: clamp(28px, 3.6vw, 54px);
  --pf-desc-size: 17px;

  --pf-person-y:6px;
  --pf-person-h: 105%;
  --pf-person-w: 0%;

  --pf-pill-gap: 12px;

  --pf-anim-bg:1;
  --pf-blob-anim:1;
  --pf-blob-speed:9s;

  --pf-blob-bg1: rgba(11,107,43,.25);
  --pf-blob-bg2: rgba(11,107,43,.55);

  --pf-back-enable:1;
  --pf-back-1: rgba(11,107,43,.16);
  --pf-back-2: rgba(11,107,43,.10);
  --pf-back-s1: 120%;
  --pf-back-s2: 150%;
  --pf-back-blur: 0px;

  --pf-content-pad-r: 0px;
  --pf-content-pad-l: 0px;

  --pf-shape-radius:24px;
}

.pf-hero-wrap.pf-fullwidth{
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  font-family: var(--pf-font);
}
.pf-hero-wrap{ font-family: var(--pf-font); }

.pf-hero-swiper{
    box-shadow:none;
width:100%;
  overflow:hidden;
  box-shadow:var(--pf-shadow);
  background:#f2fbf2;
  min-height: var(--pf-min-h);
  border-radius: var(--pf-radius);
}
.pf-hero-wrap.pf-no-radius .pf-hero-swiper{ border-radius: 0; }

.pf-slide{ position:relative; display:flex; align-items:stretch; }
.pf-slide-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.08);
  filter:saturate(1.05);
}
.pf-slide-bg::after{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(120deg, rgba(11,107,43,.10), rgba(255,255,255,0));
  animation: pfFloatGlow 10s ease-in-out infinite;
  pointer-events:none;
  opacity: calc(var(--pf-anim-bg) * 1);
}
@keyframes pfFloatGlow{
  0%{ transform: translate3d(-2%,-2%,0) rotate(0deg) }
  50%{ transform: translate3d(2%,2%,0) rotate(2deg) }
  100%{ transform: translate3d(-2%,-2%,0) rotate(0deg) }
}

.pf-slide-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--pf-overlay) 40%, rgba(234,246,234,.75) 65%, var(--pf-overlay2) 100%);
  pointer-events:none;
  opacity: var(--pf-overlay-o);
}

.pf-slide-inner{
  position:relative;
  width:100%;
  display:grid;
  grid-template-areas: "media content";
  grid-template-columns: minmax(280px, calc(var(--pf-blob) + 60px)) 1fr;
  gap: var(--pf-gap);
  align-items:center;
  padding: var(--pf-pad-y) var(--pf-pad-x);
  min-height: var(--pf-min-h);
}
.pf-slide-inner.pf-media-right{
  grid-template-areas: "content media";
  grid-template-columns: 1fr minmax(280px, calc(var(--pf-blob) + 60px));
}

.pf-portrait-area{
  grid-area: media;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px;
  position:relative;
}
.pf-content-area{
  grid-area: content;
  padding:10px 0;
  padding-right: var(--pf-content-pad-r);
  padding-left: var(--pf-content-pad-l);
  direction: rtl;
  text-align: right;
}

.pf-back-circles{
  position:absolute;
  inset: 0;
  display:block;
  pointer-events:none;
  opacity: calc(var(--pf-back-enable) * 1);
  filter: blur(var(--pf-back-blur));
}
.pf-back{
  position:absolute;
  border-radius: 999px;
  background: var(--pf-back-1);
  width: var(--pf-back-s1);
  height: var(--pf-back-s1);
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  animation: pfBackFloat1 10s ease-in-out infinite;
}
.pf-back-2{
  background: var(--pf-back-2);
  width: var(--pf-back-s2);
  height: var(--pf-back-s2);
  animation: pfBackFloat2 13s ease-in-out infinite;
  mix-blend-mode: multiply;
}
@keyframes pfBackFloat1{
  0%{ transform: translate(-58%,-58%) }
  50%{ transform: translate(-42%,-48%) }
  100%{ transform: translate(-58%,-58%) }
}
@keyframes pfBackFloat2{
  0%{ transform: translate(-42%,-42%) }
  50%{ transform: translate(-58%,-52%) }
  100%{ transform: translate(-42%,-42%) }
}

.pf-blob{
  width: var(--pf-blob);
  height: var(--pf-blob);
  position:relative;
  overflow:hidden;
  background: radial-gradient(circle at 30% 30%, var(--pf-blob-bg1), var(--pf-blob-bg2));
  box-shadow:0 30px 80px rgba(11,107,43,.20);
}

.pf-shape-organic{
  border-radius:55% 45% 42% 58% / 52% 40% 60% 48%;
  animation: pfBlobMove var(--pf-blob-speed) ease-in-out infinite;
}
.pf-hero-wrap[style*="--pf-blob-anim:0"] .pf-shape-organic{ animation:none !important; }
.pf-shape-circle{ border-radius:50%; animation:none; }
.pf-shape-square{ border-radius:0; animation:none; }
.pf-shape-rounded{ border-radius: var(--pf-shape-radius); animation:none; }

@keyframes pfBlobMove{
  0%{ border-radius:55% 45% 42% 58% / 52% 40% 60% 48%; transform:translateY(0) }
  50%{ border-radius:45% 55% 58% 42% / 45% 55% 45% 55%; transform:translateY(-6px) }
  100%{ border-radius:55% 45% 42% 58% / 52% 40% 60% 48%; transform:translateY(0) }
}

.pf-layer{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; }
.pf-layer img{ max-width:120%; max-height:120%; object-fit:contain; }
.pf-underlay{ z-index:1; opacity:.95; }
.pf-person{ z-index:2; align-items:flex-end; }
.pf-person img{
  height: var(--pf-person-h);
  width: auto;
  filter:drop-shadow(0 25px 35px rgba(0,0,0,.18));
  transform: translateY(var(--pf-person-y));
}
.pf-hero-wrap[style*="--pf-person-w:0%"] .pf-person img{ width:auto; }
.pf-hero-wrap:not([style*="--pf-person-w:0%"]) .pf-person img{ width: var(--pf-person-w); height:auto; }
.pf-overlayimg{ z-index:3; pointer-events:none; }

.pf-float{
  position:absolute;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
  display:grid;
  place-items:center;
  z-index:4;
  color: var(--pf-brand);
}
.pf-float i, .pf-float svg{ color: var(--pf-brand); fill: currentColor; width: 1em; height: 1em; }

.pf-kicker{
  font-weight:700; color:var(--pf-muted);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom:10px;
}
.pf-dot{ width:8px; height:8px; border-radius:50%; background:var(--pf-brand); display:inline-block; }
.pf-title{
  margin:0 0 14px 0;
  font-size: var(--pf-title-size);
  line-height:1.15;
  font-weight:900;
  color:var(--pf-text);
}
.pf-desc{
  margin:0 0 22px 0;
  color:#3f4b48;
  font-size: var(--pf-desc-size);
  line-height:1.9;
  max-width:680px;
}

.pf-icon-row{ display:flex; gap: var(--pf-pill-gap); flex-wrap:wrap; margin-bottom:22px; }
.pf-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  background: var(--pf-card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  color:#1b2623;
  font-weight:700;
  font-size:14px;
  backdrop-filter: blur(8px);
}
.pf-pill i, .pf-pill svg{ color:var(--pf-brand); fill: currentColor; width:18px; height:18px; }

.pf-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.pf-btn{
  border:0;
  padding:14px 18px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  user-select:none;
}
.pf-btn:active{ transform: translateY(1px); }

.pf-btn-primary{
  background:var(--pf-brand);
  color:#fff !important;
  box-shadow:0 16px 35px rgba(11,107,43,.25);
}
.pf-btn-primary:hover{ background:var(--pf-brand-2); }

.pf-btn-ghost{
  background:rgba(255,255,255,.70);
  color:var(--pf-brand) !important;
  border:1px solid rgba(11,107,43,.20);
}
.pf-btn-ghost:hover{ background:rgba(255,255,255,.92); }

.pf-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  background: rgba(255,255,255,.75);
  border-radius:999px;
  box-shadow:0 10px 25px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  z-index:5;
  cursor:pointer;
}
.pf-next{ inset-inline-start:16px; }
.pf-prev{ inset-inline-end:16px; }

.pf-nav::after{
  content:"";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:18px; font-weight:900;
  color:var(--pf-brand);
}
.pf-next::after{ content:"›"; }
.pf-prev::after{ content:"‹"; }

.pf-pagination{
  position:absolute;
  bottom:14px !important;
  left:0; right:0;
  text-align:center;
  z-index:6;
}
.pf-pagination .swiper-pagination-bullet{ background: rgba(11,107,43,.35); opacity:1; }
.pf-pagination .swiper-pagination-bullet-active{ background:var(--pf-brand); }

@media (max-width:980px){
  .pf-slide-inner{
    grid-template-areas:"media" "content";
    grid-template-columns:1fr;
    padding:18px 14px 26px;
    gap:18px;
    min-height: auto;
  }
  .pf-slide-inner.pf-media-right{ grid-template-areas:"media" "content"; grid-template-columns:1fr; }
  /* Mobile polish: smaller circle, centered content, cleaner CTA area */
  .pf-hero-swiper{ min-height:auto; }
  /* Slightly smaller media shape on mobile */
  .pf-blob{ width:min(250px, var(--pf-blob)); height:min(250px, var(--pf-blob)); }
  .pf-person img{ height:110%; }

  .pf-content-area{
    /* Arabic text looks much cleaner right-aligned on small screens */
    text-align:right;
    padding-inline: 6px;
  }
  .pf-kicker{ justify-content:flex-start; }
  .pf-desc{ margin-bottom:18px; }
  .pf-desc{ max-width:none; }
  .pf-icon-row{ justify-content:flex-start; margin-bottom:16px; }
  .pf-actions{ justify-content:flex-start; margin-top:2px; }
  .pf-btn{ justify-content:center; }

  .pf-nav{ width:38px; height:38px; }
  .pf-pagination{ bottom:10px !important; }
  .pf-slide-overlay{
    background: linear-gradient(180deg, var(--pf-overlay) 35%, rgba(234,246,234,.78) 75%, var(--pf-overlay2) 100%);
  }
}
@media (max-width:520px){
  .pf-title{ font-size: clamp(24px, 7vw, 34px); }
  .pf-desc{ font-size:15px; line-height:1.85; }
  .pf-pill{ padding:9px 12px; font-size:13px; }
  /* CTAs as clean stacked buttons on phones */
  .pf-actions{ gap:10px; flex-direction:column; align-items:stretch; }
  .pf-btn{ padding:13px 16px; }
  .pf-btn{ width:100%; }
  .pf-nav{ display:none; }
}

@media (max-width:420px){
  .pf-blob{ width:220px; height:220px; }
  .pf-btn{ width:100%; }
}