/* HF Slider - drop-in replacement for Slider Revolution hero (alias slider-1-1) */

.hf-slider{position:relative;width:100%;overflow:hidden;direction:rtl;height:var(--hf-h,900px)}
.hf-slider,.hf-slider *{box-sizing:border-box}
.hf-slides{position:absolute;inset:0}
.hf-slide{position:absolute;inset:0;visibility:hidden;z-index:1}
.hf-slide.is-active{visibility:visible;z-index:2}
.hf-slide.is-leaving{visibility:visible;z-index:3;pointer-events:none}
.hf-grid{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:var(--hf-gw,1440px);direction:ltr}
.hf-layer{position:absolute;margin:0;font-family:'IBM Plex Sans Arabic',sans-serif;direction:rtl}

.hf-headline{font-weight:700;text-align:right;z-index:5}
.hf-sub{color:#666;font-weight:500;text-align:right;z-index:6;line-height:1.5}
.hf-btn{display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-weight:700;background-color:#74808c;border:1px solid #74808c;border-radius:25px;text-decoration:none;white-space:nowrap;z-index:7;transition:background-color .3s,border-color .3s}
.hf-btn:hover,.hf-btn:focus{background-color:#2b2b2b;border-color:#2b2b2b;color:#fff}
.hf-imgwrap{z-index:8;overflow:hidden}
.hf-img{display:block;width:100%;height:100%;object-fit:contain}

/* DESKTOP (grid 1440 x 900) */
.hf-bp-d .hf-s1 .hf-headline{left:calc(var(--sf)*878px);width:calc(var(--sf)*543px);top:50%;transform:translateY(calc(-50% + var(--sf)*-55px));font-size:calc(var(--sf)*40px);line-height:calc(var(--sf)*60px)}
.hf-bp-d .hf-s1 .hf-sub{left:calc(var(--sf)*1030px);top:50%;transform:translateY(calc(-50% + var(--sf)*30px));font-size:calc(var(--sf)*20px)}
.hf-bp-d .hf-s1 .hf-btn{left:calc(var(--sf)*1224px);top:50%;transform:translateY(calc(-50% + var(--sf)*96px));width:calc(var(--sf)*200px);height:calc(var(--sf)*48px);font-size:calc(var(--sf)*16px);line-height:calc(var(--sf)*26px);padding:calc(var(--sf)*10px) calc(var(--sf)*30px)}
.hf-bp-d .hf-s1 .hf-imgwrap{right:calc(var(--sf)*616px);top:50%;transform:translateY(calc(-50% + var(--sf)*46px));width:calc(var(--sf)*810px);height:calc(var(--sf)*587px)}
.hf-bp-d .hf-s2 .hf-headline{left:calc(var(--sf)*921px);width:calc(var(--sf)*496px);top:50%;transform:translateY(calc(-50% + var(--sf)*-100px));font-size:calc(var(--sf)*40px);line-height:calc(var(--sf)*60px)}
.hf-bp-d .hf-s2 .hf-sub{left:calc(var(--sf)*935px);width:calc(var(--sf)*483px);top:50%;transform:translateY(calc(-50% + var(--sf)*12px));font-size:calc(var(--sf)*20px)}
.hf-bp-d .hf-s2 .hf-btn{left:calc(var(--sf)*1269px);top:50%;transform:translateY(calc(-50% + var(--sf)*101px));font-size:calc(var(--sf)*16px);line-height:calc(var(--sf)*26px);padding:calc(var(--sf)*10px) calc(var(--sf)*30px)}
.hf-bp-d .hf-s2 .hf-imgwrap{right:calc(var(--sf)*602px);top:50%;transform:translateY(calc(-50% + var(--sf)*34px));width:calc(var(--sf)*810px);height:calc(var(--sf)*587px)}

/* NOTEBOOK (grid 1024 x 650) - text moves to the left side */
.hf-bp-n .hf-s1 .hf-headline{left:calc(var(--sf)*11px);width:calc(var(--sf)*386px);top:50%;transform:translateY(calc(-50% + var(--sf)*-39px));font-size:calc(var(--sf)*50px);line-height:calc(var(--sf)*42px)}
.hf-bp-n .hf-s1 .hf-sub{left:calc(var(--sf)*15px);top:50%;transform:translateY(calc(-50% + var(--sf)*21px));font-size:calc(var(--sf)*16px)}
.hf-bp-n .hf-s1 .hf-btn{left:calc(var(--sf)*15px);top:50%;transform:translateY(calc(-50% + var(--sf)*68px));width:calc(var(--sf)*142px);height:calc(var(--sf)*34px);font-size:calc(var(--sf)*14px);line-height:calc(var(--sf)*20px);padding:calc(var(--sf)*7px) calc(var(--sf)*21px)}
.hf-bp-n .hf-s1 .hf-imgwrap{right:calc(var(--sf)*15px);top:50%;transform:translateY(calc(-50% + var(--sf)*32px));width:calc(var(--sf)*536px);height:calc(var(--sf)*389px)}
.hf-bp-n .hf-s2 .hf-headline{left:calc(var(--sf)*11px);width:calc(var(--sf)*352px);top:50%;transform:translateY(calc(-50% + var(--sf)*-71px));font-size:calc(var(--sf)*50px);line-height:calc(var(--sf)*42px)}
.hf-bp-n .hf-s2 .hf-sub{left:calc(var(--sf)*15px);width:calc(var(--sf)*343px);top:50%;transform:translateY(calc(-50% + var(--sf)*8px));font-size:calc(var(--sf)*16px)}
.hf-bp-n .hf-s2 .hf-btn{left:calc(var(--sf)*15px);top:50%;transform:translateY(calc(-50% + var(--sf)*71px));font-size:calc(var(--sf)*14px);line-height:calc(var(--sf)*20px);padding:calc(var(--sf)*7px) calc(var(--sf)*21px)}
.hf-bp-n .hf-s2 .hf-imgwrap{right:calc(var(--sf)*15px);top:50%;transform:translateY(calc(-50% + var(--sf)*24px));width:calc(var(--sf)*536px);height:calc(var(--sf)*389px)}

/* TABLET (grid 778 x 450) */
.hf-bp-t .hf-sub{display:none}
.hf-bp-t .hf-s1 .hf-headline{left:calc(var(--sf)*15px);width:calc(var(--sf)*293px);top:50%;transform:translateY(calc(-50% + var(--sf)*-40px));font-size:calc(var(--sf)*40px);line-height:calc(var(--sf)*44px)}
.hf-bp-t .hf-s1 .hf-btn{left:calc(var(--sf)*15px);top:50%;transform:translateY(calc(-50% + var(--sf)*40px));width:calc(var(--sf)*107px);height:calc(var(--sf)*25px);font-size:calc(var(--sf)*14px);line-height:calc(var(--sf)*22px);padding:calc(var(--sf)*5px) calc(var(--sf)*16px)}
.hf-bp-t .hf-s1 .hf-imgwrap{right:calc(var(--sf)*15px);top:50%;transform:translateY(-50%);width:calc(var(--sf)*380px);height:calc(var(--sf)*276px)}
.hf-bp-t .hf-s2 .hf-headline{left:calc(var(--sf)*15px);width:calc(var(--sf)*267px);top:50%;transform:translateY(calc(-50% + var(--sf)*-40px));font-size:calc(var(--sf)*40px);line-height:calc(var(--sf)*44px)}
.hf-bp-t .hf-s2 .hf-btn{left:calc(var(--sf)*15px);top:50%;transform:translateY(calc(-50% + var(--sf)*40px));font-size:calc(var(--sf)*14px);line-height:calc(var(--sf)*22px);padding:calc(var(--sf)*5px) calc(var(--sf)*16px)}
.hf-bp-t .hf-s2 .hf-imgwrap{right:calc(var(--sf)*15px);top:50%;transform:translateY(-50%);width:calc(var(--sf)*380px);height:calc(var(--sf)*276px)}

/* MOBILE (grid 480 x 600) - stacked, centered */
.hf-bp-m .hf-sub{display:none}
.hf-bp-m .hf-headline{left:50%;text-align:center}
.hf-bp-m .hf-s1 .hf-headline{transform:translateX(-50%);top:calc(var(--sf)*40px);width:calc(var(--sf)*333px);font-size:calc(var(--sf)*22px);line-height:calc(var(--sf)*46px)}
.hf-bp-m .hf-s2 .hf-headline{transform:translateX(-50%);top:calc(var(--sf)*40px);width:calc(var(--sf)*364px);font-size:calc(var(--sf)*24px);line-height:calc(var(--sf)*46px)}
.hf-bp-m .hf-s1 .hf-btn{left:50%;top:50%;transform:translate(-50%,calc(-50% + var(--sf)*-123px));width:calc(var(--sf)*230px);height:calc(var(--sf)*40px);font-size:calc(var(--sf)*15px);line-height:calc(var(--sf)*17px);padding:calc(var(--sf)*12px) calc(var(--sf)*48px)}
.hf-bp-m .hf-s2 .hf-btn{left:50%;top:calc(var(--sf)*160px);transform:translateX(-50%);font-size:calc(var(--sf)*15px);line-height:calc(var(--sf)*26px);padding:calc(var(--sf)*6px) calc(var(--sf)*25px)}
.hf-bp-m .hf-imgwrap{left:50%;right:auto}
.hf-bp-m .hf-s1 .hf-imgwrap,.hf-bp-m .hf-s2 .hf-imgwrap{top:50%;transform:translate(-50%,calc(-50% + var(--sf)*95px));width:calc(var(--sf)*420px);height:calc(var(--sf)*305px)}

/* Arrows */
.hf-arrow{position:absolute;top:50%;transform:translateY(-50%);width:70px;height:70px;border-radius:50%;background:#fff;color:#2b2b2b;border:0;cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:opacity .3s,background-color .3s;pointer-events:none}
.hf-slider:hover .hf-arrow{opacity:1;pointer-events:auto}
.hf-arrow:hover{background:#f0c429}
.hf-arrow-left{left:30px}
.hf-arrow-right{right:30px}
.hf-bp-m .hf-arrow,.hf-bp-t .hf-arrow{display:none}

/* Bullets */
.hf-bullets{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:20}
.hf-bullet{width:12px;height:12px;border-radius:50%;background:#999;border:3px solid rgba(255,255,255,.9);padding:0;cursor:pointer;transition:background-color .3s,border-color .3s}
.hf-bullet:hover,.hf-bullet.is-active{background:#fff;border-color:#000}

/* Animations */
.hf-slide .hf-headline,.hf-slide .hf-sub,.hf-slide .hf-btn,.hf-slide .hf-imgwrap{opacity:0}
.hf-slide.is-in .hf-headline{animation:hfSlideFromLeft 1s cubic-bezier(.23,1,.32,1) 0s forwards}
.hf-slide.is-in .hf-sub{animation:hfSlideFromLeft 1s cubic-bezier(.23,1,.32,1) .27s forwards}
.hf-slide.is-in .hf-btn{animation:hfPopIn 1s cubic-bezier(.34,1.56,.64,1) .5s forwards}
.hf-slide.is-in .hf-imgwrap{animation:hfMaskFromRight 1s cubic-bezier(.215,.61,.355,1) 0s forwards}
.hf-slide.is-leaving .hf-layer{opacity:1;animation:hfLayerOut .7s ease forwards}

@keyframes hfSlideFromLeft{from{opacity:0;margin-left:calc(var(--sf)*-50px)}to{opacity:1;margin-left:0}}
@keyframes hfPopIn{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes hfMaskFromRight{from{opacity:1;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes hfLayerOut{to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hf-slide.is-in .hf-layer{animation-duration:.01s;animation-delay:0s}
}