/* Slider First Frontend */
.sf-slider{
  position:relative;
  overflow:hidden;
  border-radius:0;
  box-shadow:none;
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  direction: rtl;
  max-width: 100%;
  background-repeat:no-repeat;
}

.sf-bg-overlay{
  position:absolute; inset:0;
  pointer-events:none;
}

.sf-slider.sf-hover-overlay::after{
  content:"";
  position:absolute; inset:0;
  background: #000;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.sf-slider.sf-hover-overlay:hover::after{
  opacity: var(--sf-hover-overlay-opacity, .12);
}

.sf-track{
  position:relative;
  height:100%;
  z-index:2;
}

/* Slide effect: track is flex and moves */
.sf-effect-slide .sf-track{
  display:flex;
  width:100%;
  height:100%;
  transition: transform .85s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.sf-effect-slide .sf-slide{
  flex: 0 0 100%;
  height:100%;
}

/* Fade-like effects: slides are stacked */
.sf-effect-fade .sf-slide,
.sf-effect-zoom .sf-slide,
.sf-effect-zoom-fade .sf-slide{
  position:absolute; inset:0;
  opacity:0;
  transform: translateY(10px) scale(.98);
  transition: opacity .75s ease, transform .9s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.sf-effect-fade .sf-slide.is-active,
.sf-effect-zoom .sf-slide.is-active,
.sf-effect-zoom-fade .sf-slide.is-active{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.sf-effect-fade .sf-slide.is-out,
.sf-effect-zoom .sf-slide.is-out,
.sf-effect-zoom-fade .sf-slide.is-out{
  opacity:0;
  transform: translateY(-10px) scale(1.01);
}

/* Zoom variants */
.sf-effect-zoom .sf-slide.is-active{ transform: scale(1.02); }
.sf-effect-zoom-fade .sf-slide.is-active{ transform: scale(1.02); }

/* Layout inside each slide */
.sf-slide{ width:100%; height:100%; }
.sf-inner{
  position:relative;
  height:100%;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 26px;
  padding: clamp(18px, 3.2vw, 44px);
  align-items:center;
}

.sf-img-left .sf-media{ order:1; }
.sf-img-left .sf-text{ order:2; }
.sf-img-right .sf-media{ order:2; }
.sf-img-right .sf-text{ order:1; }

.sf-title{
  margin:0 0 10px;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight:800;
  color:#0f172a;
  line-height:1.25;
}
.sf-desc{
  margin:0;
  font-size: clamp(13px, 1.4vw, 18px);
  color:#334155;
  line-height:1.9;
  max-width: 52ch;
}

.sf-media{ display:flex; align-items:center; justify-content:center; }
.sf-img-wrap{
  position:relative;
  width: min(100%, 540px);
  height: min(100%, 360px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sf-img-layer img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter: drop-shadow(0 22px 40px rgba(2,6,23,.18));
}

/* Shine effect */
.sf-img-wrap.sf-shine::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.15) 35%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.15) 65%, transparent 100%);
  transform: translateX(-120%) rotate(12deg);
  animation: sfShine 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sfShine{
  0%{ transform: translateX(-140%) rotate(12deg); opacity:0; }
  18%{ opacity:1; }
  50%{ transform: translateX(120%) rotate(12deg); opacity:0.8; }
  100%{ transform: translateX(140%) rotate(12deg); opacity:0; }
}


/* Image motion layer: combines parallax + hover presets without breaking shine */
.sf-img-layer{
  width:100%;
  height:100%;
  display:block;
  --sf-hover-scale: 1;
  --sf-hover-rot: 0deg;
  --sf-hover-skewX: 0deg;
  --sf-hover-skewY: 0deg;
  --sf-hover-brightness: 1;
  --sf-hover-saturate: 1;
  --sf-hover-contrast: 1;
  --sf-hover-blur: 0px;
  --sf-hover-shadow: none;
  transform: translate3d(var(--sf-px,0px), var(--sf-py,0px), 0)
             scale(var(--sf-hover-scale))
             rotate(var(--sf-hover-rot))
             skew(var(--sf-hover-skewX), var(--sf-hover-skewY));
  filter: brightness(var(--sf-hover-brightness))
          saturate(var(--sf-hover-saturate))
          contrast(var(--sf-hover-contrast))
          blur(var(--sf-hover-blur));
  box-shadow: var(--sf-hover-shadow);
  transition: transform var(--sf-img-hover-dur,.35s) ease,
              filter var(--sf-img-hover-dur,.35s) ease,
              box-shadow var(--sf-img-hover-dur,.35s) ease;
  will-change: transform;
}

/* Idle animations (15+) apply to wrapper */
.sf-img-idle-float{ animation: sfImgFloat var(--sf-img-idle-dur,6s) ease-in-out infinite; }
.sf-img-idle-float2{ animation: sfImgFloat2 var(--sf-img-idle-dur,7s) ease-in-out infinite; }
.sf-img-idle-bob{ animation: sfImgBob var(--sf-img-idle-dur,5.5s) ease-in-out infinite; }
.sf-img-idle-breath{ animation: sfImgBreath var(--sf-img-idle-dur,6.5s) ease-in-out infinite; }
.sf-img-idle-pulse{ animation: sfImgPulse var(--sf-img-idle-dur,4.8s) ease-in-out infinite; }
.sf-img-idle-zoom{ animation: sfImgZoom var(--sf-img-idle-dur,7.5s) ease-in-out infinite; }
.sf-img-idle-sway{ animation: sfImgSway var(--sf-img-idle-dur,7s) ease-in-out infinite; }
.sf-img-idle-tilt{ animation: sfImgTilt var(--sf-img-idle-dur,6.5s) ease-in-out infinite; }
.sf-img-idle-rotate{ animation: sfImgRotate var(--sf-img-idle-dur,10s) linear infinite; }
.sf-img-idle-wobble{ animation: sfImgWobble var(--sf-img-idle-dur,6.2s) ease-in-out infinite; }
.sf-img-idle-drift{ animation: sfImgDrift var(--sf-img-idle-dur,9s) ease-in-out infinite; }
.sf-img-idle-bounce{ animation: sfImgBounce var(--sf-img-idle-dur,5.8s) ease-in-out infinite; }
.sf-img-idle-jelly{ animation: sfImgJelly var(--sf-img-idle-dur,6.2s) ease-in-out infinite; }
.sf-img-idle-flip{ animation: sfImgFlip var(--sf-img-idle-dur,8s) ease-in-out infinite; transform-style: preserve-3d; }
.sf-img-idle-glide{ animation: sfImgGlide var(--sf-img-idle-dur,8.5s) ease-in-out infinite; }
.sf-img-idle-spin{ animation: sfImgSpin var(--sf-img-idle-dur,12s) linear infinite; }
.sf-img-idle-blurpop{ animation: sfImgBlurPop var(--sf-img-idle-dur,7.2s) ease-in-out infinite; }

@keyframes sfImgFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes sfImgFloat2{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-8px,-10px); } }
@keyframes sfImgBob{ 0%,100%{ transform: translateY(0);} 30%{ transform: translateY(-6px);} 60%{ transform: translateY(4px);} }
@keyframes sfImgBreath{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.03);} }
@keyframes sfImgPulse{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.06);} }
@keyframes sfImgZoom{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05) translateY(-4px);} }
@keyframes sfImgSway{ 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(1.8deg);} }
@keyframes sfImgTilt{ 0%,100%{ transform: rotate(-0.6deg);} 50%{ transform: rotate(1.6deg);} }
@keyframes sfImgRotate{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }
@keyframes sfImgWobble{ 0%,100%{ transform: rotate(0deg);} 25%{ transform: rotate(1.6deg);} 75%{ transform: rotate(-1.6deg);} }
@keyframes sfImgDrift{ 0%,100%{ transform: translate(0,0) rotate(0deg);} 50%{ transform: translate(10px,-6px) rotate(1deg);} }
@keyframes sfImgBounce{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
@keyframes sfImgJelly{ 0%,100%{ transform: scale(1);} 30%{ transform: scale(1.06,0.96);} 60%{ transform: scale(0.98,1.05);} }
@keyframes sfImgFlip{ 0%,100%{ transform: rotateY(0deg);} 50%{ transform: rotateY(12deg);} }
@keyframes sfImgGlide{ 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-10px);} }
@keyframes sfImgSpin{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }
@keyframes sfImgBlurPop{ 0%,100%{ filter: blur(0);} 50%{ filter: blur(1.5px);} }

/* Hover presets (15+) - set vars on wrapper hover */
.sf-img-hover-zoom:hover .sf-img-layer{ --sf-hover-scale: 1.08; }
.sf-img-hover-zoom-rot:hover .sf-img-layer{ --sf-hover-scale: 1.08; --sf-hover-rot: 2deg; }
.sf-img-hover-lift:hover .sf-img-layer{ --sf-hover-scale: 1.05; }
.sf-img-hover-tilt:hover .sf-img-layer{ --sf-hover-rot: -2deg; }
.sf-img-hover-tilt-strong:hover .sf-img-layer{ --sf-hover-rot: -4deg; --sf-hover-skewX: -1.6deg; }
.sf-img-hover-swing:hover .sf-img-layer{ animation: sfHoverSwing .7s ease-in-out both; }
.sf-img-hover-shake:hover .sf-img-layer{ animation: sfHoverShake .55s ease-in-out both; }
.sf-img-hover-wobble:hover .sf-img-layer{ animation: sfHoverWobble .75s ease-in-out both; }
.sf-img-hover-flip:hover .sf-img-layer{ animation: sfHoverFlip .8s ease-in-out both; transform-style: preserve-3d; }
.sf-img-hover-glow:hover .sf-img-layer{ --sf-hover-shadow: 0 22px 60px rgba(16,185,129,.35); }
.sf-img-hover-shadow:hover .sf-img-layer{ --sf-hover-shadow: 0 22px 60px rgba(2,6,23,.22); }
.sf-img-hover-blur:hover .sf-img-layer{ --sf-hover-blur: 1.3px; --sf-hover-scale: 1.03; }
.sf-img-hover-bright:hover .sf-img-layer{ --sf-hover-brightness: 1.12; --sf-hover-scale: 1.03; }
.sf-img-hover-saturate:hover .sf-img-layer{ --sf-hover-saturate: 1.25; --sf-hover-scale: 1.03; }
.sf-img-hover-grayscale:hover .sf-img-layer{ filter: grayscale(1) brightness(1.05); }
.sf-img-hover-sepia:hover .sf-img-layer{ filter: sepia(1) saturate(1.1); }
.sf-img-hover-focus:hover .sf-img-layer{ animation: sfHoverFocus .55s ease both; }

@keyframes sfHoverSwing{
  0%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotate(0deg) scale(1.02); }
  50%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotate(3deg) scale(1.05); }
  100%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotate(-2deg) scale(1.04); }
}
@keyframes sfHoverShake{
  0%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) translateX(0) scale(1.03); }
  25%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) translateX(-4px) rotate(-1deg) scale(1.03); }
  50%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) translateX(4px) rotate(1deg) scale(1.03); }
  75%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) translateX(-2px) rotate(-.6deg) scale(1.03); }
  100%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) translateX(0) scale(1.03); }
}
@keyframes sfHoverWobble{
  0%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotate(0deg) scale(1.03); }
  33%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotate(2deg) scale(1.05); }
  66%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotate(-2deg) scale(1.05); }
  100%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotate(0deg) scale(1.04); }
}
@keyframes sfHoverFlip{
  0%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotateY(0deg) scale(1.03); }
  100%{ transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) rotateY(14deg) scale(1.05); }
}
@keyframes sfHoverFocus{
  0%{ filter: blur(2px) brightness(1.08); transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) scale(1.03); opacity:.95; }
  100%{ filter: blur(0px) brightness(1.08); transform: translate3d(var(--sf-px,0px), var(--sf-py,0px),0) scale(1.06); opacity:1; }
}
/* Actions */
.sf-actions{
  position:absolute;
  top: var(--sf-actions-top, auto);
  right: var(--sf-actions-right, 26px);
  bottom: var(--sf-actions-bottom, 22px);
  left: var(--sf-actions-left, auto);
  z-index:3;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}
.sf-btn{
  --sf-btn-color: #ea580c;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  color:#fff;
  text-decoration:none;
  background: var(--sf-btn-color);
  box-shadow:none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  font-weight:700;
}
.sf-btn:hover{
  transform: translateY(-2px);
  box-shadow:none;
  filter: brightness(1.02);
}
.sf-ico{ display:inline-flex; color:#fff; }
.sf-ico svg{ width: 18px; height: 18px; }

.sf-label{ white-space:nowrap; }

/* Responsive */
@media (max-width: 768px){
  .sf-inner{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  /* Mobile: comfortable horizontal spacing for text so it doesn't touch edges */
  .sf-col.sf-text{
    padding-inline: 10px;
    box-sizing: border-box;
  }
  .sf-desc{
    padding-inline: 10px;
    box-sizing: border-box;
  }
  .sf-actions{
    right: 14px;
    bottom: 14px;
  }
  .sf-img-wrap{ height: 220px; }
  .sf-desc{ max-width: 100%; }
}

/* List chips: slightly smaller on mobile for better balance */
@media (max-width: 768px){
  .sf-list li{
    padding: 7px 10px;
    border-radius: 12px;
    gap: 6px;
  }
  .sf-li-ico{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }
  .sf-li-ico svg{ width:16px; height:16px; }
  .sf-li-text{ font-size: 13px; }
}

@media (max-width: 480px){
  .sf-list li{ padding: 6px 9px; }
  .sf-li-text{ font-size: 12px; }
}


/* Fullscreen */
.sf-slider.sf-fullscreen{
  width:100% !important;
  height:100vh !important;
}

/* List items */
.sf-list{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--sf-list-cols, 3), max-content);
  gap: var(--sf-li-gap-y, 10px) var(--sf-li-gap-x, 14px);
  justify-content: var(--sf-list-justify, center);
  justify-items: var(--sf-list-items, center);
  align-items: center;
}

@media (max-width: 720px){
  .sf-slider .sf-list{ --sf-list-cols: 2; }
}
@media (max-width: 480px){
  .sf-slider .sf-list{ --sf-list-cols: 1; }
}

.sf-list.is-vertical{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.sf-list li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  top: var(--sf-li-off-top, 0px);
  right: var(--sf-li-off-right, 0px);
  bottom: var(--sf-li-off-bottom, 0px);
  left: var(--sf-li-off-left, 0px);
  background: var(--sf-li-bg, rgba(255,255,255,.55));
  color: var(--sf-li-text-color, inherit);
  border: var(--sf-li-border-w, 1px) solid var(--sf-li-border-color, rgba(15,23,42,.06));
  padding: var(--sf-li-pad-y, 8px) var(--sf-li-pad-x, 12px);
  border-radius: var(--sf-li-radius, 14px);
}
.sf-list.is-vertical li{ width: fit-content; }
.sf-li-ico{
  width: var(--sf-li-ico-size, 18px);
  height: var(--sf-li-ico-size, 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--sf-li-ico-size, 18px);
  color: var(--sf-li-ico-color, currentColor);
  background: var(--sf-li-ico-bg, transparent);
}
.sf-li-ico svg{ width:18px; height:18px; }
.sf-li-text{ font-size: 15px; line-height: 1.3; }


.sf-list.icon-circle .sf-li-ico{
  border-radius: 999px;
}
.sf-list.icon-outline .sf-li-ico{
  border-radius: 999px;
  border: 1px solid var(--sf-li-ico-color, currentColor);
  background: transparent;
}
.sf-list.icon-none .sf-li-ico{
  display: none;
}
.sf-list.icon-none li{ gap: 0; }




/* Media column alignment (used for mobile image alignment) */
.sf-col.sf-media{ display:flex; justify-content:center; }