:root{--arabids-orange:#FF7A3D;--arabids-orange-dark:#FF6823;--arabids-ink:#062338;--arabids-bg:#FAFBFF}
html{scroll-behavior:smooth}
body,body.rtl{font-family:"Tajawal","Manrope",Arial,sans-serif;direction:rtl;text-align:right;background:#FAFBFF}
h1,h2,h3,h4,h5,h6,.content,.button,input,textarea,select{font-family:"Tajawal","Manrope",Arial,sans-serif}
h1,h2,h3,h4,h5,h6{text-transform:none}
header .site-logo img,footer .logo img{width:214px;max-width:214px;height:auto}
@media(max-width:1250px){header .site-logo img{max-width:170px}}
@media(max-width:991px){header .site-logo img{max-width:180px}}
header .navbar-nav>li>a{text-transform:none;font-size:15px;font-weight:600}
header .navbar-nav>li.active>a::after{opacity:1}
.hero{padding-top:41px}
.hero h1{font-weight:300;letter-spacing:-1px}
.hero .subtitle{font-weight:300}
.hero .download_app a{display:block}
.hero .download_app img{width:168px}
.subscribe_section .newsletter-form{display:flex;justify-content:center;gap:8px;max-width:482px;margin:auto}
.subscribe_section .newsletter-form input[type=email]{height:50px;flex:1;background:#fff;border:1px solid #D9E3EA;border-radius:12px;padding:0 18px;color:#212121;min-width:0}
.subscribe_section .newsletter-form button{height:50px;padding:0 32px;border-radius:12px;background:#FF7A3D;color:#fff;font-weight:600;border:1px solid #FF7A3D}
.newsletter-message{font-size:14px;margin-top:12px;color:#FF6823;min-height:24px}
.core_benefits_section .flex .item{text-align:right}
.core_benefits_section .flex .item .title{padding-left:0;padding-right:6px}
.core_benefits_section .flex .item .image img{width:64px;height:64px}
/* Inside-app section: keep original source geometry and fix clipping/RTL */
.how_it_works_section .container-flex{position:relative;z-index:2}
.how_it_works_section .how-it-works-swiper{direction:rtl}
.how_it_works_section .how-it-works-swiper-2{direction:ltr}
.how_it_works_section .how-it-works-slide-content{text-align:right;direction:rtl}
.how_it_works_section .how-it-works-swiper-2 .swiper-slide>img,.how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide>img{object-fit:cover;object-position:top}
.how_it_works_section .how-it-works-mockup{pointer-events:none}
.how_it_works_section .swiper-pagination-2{z-index:5}
.what_is_section .item,.who_its_for_section .item,.faq_section .item{text-align:right}
.what_is_section .item .image img{width:80px;height:80px}
.who_its_for_section .item .image img{width:40px;height:40px}
footer .top,footer .bottom{direction:rtl}
footer .top-logo{gap:20px}
footer .sosial a{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#FFE4D8;color:#FF7A3D;font-weight:700}
footer .footer-nav{align-items:center}
.lang-switcher{display:flex;gap:8px;direction:ltr}
.lang-switcher__link{width:34px;height:34px;border:1px solid #F2F2F2;border-radius:8px;display:grid;place-items:center;font-size:12px}
.lang-switcher__link.active{background:#FF7A3D;color:#fff;border-color:#FF7A3D}
.mobile{display:none}
@media(max-width:991px){
  .desktop{display:none!important}.mobile{display:block}
  header .navbar-collapse{display:none;height:calc(100vh - 68px)!important;top:68px;padding:40px 20px;background:#F6F9FC}
  header .navbar-collapse.show{display:block}
  header .navbar-nav{height:auto;align-items:center}
  .hero .download_app{justify-content:center;flex-wrap:wrap}
  .hero .left{text-align:center}
  .how_it_works_section{padding-top:72px;padding-bottom:72px;min-height:auto;height:auto}
  .how_it_works_section .mobile{display:grid;grid-template-columns:1fr;gap:24px;max-width:560px;margin:auto;padding:0 16px}
  .how_it_works_section .how-it-works-swiper-mobile{width:100%;height:auto;order:2}
  .how_it_works_section .how-it-works-swiper-2-mobile{width:320px;max-width:90vw;height:630px;order:1;margin:auto;position:relative}
  .how_it_works_section .how-it-works-mockup{position:absolute;inset:0;z-index:3}
  .how_it_works_section .how-it-works-swiper-2-mobile .swiper-wrapper{height:100%}
  .how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide{padding:17px 29px 20px;overflow:hidden}
  .how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide>img{width:100%;height:100%;border-radius:36px}
  .how_it_works_section .how-it-works-swiper-mobile .swiper-slide{height:auto}
  .how_it_works_section .how-it-works-swiper-mobile .how-it-works-slide-content{margin:auto}
  .how_it_works_section .container-circle-wrap{display:none}
  .subscribe_section .newsletter-form{flex-direction:column}
  .subscribe_section .newsletter-form button{width:100%}
}
@media(max-width:560px){header .site-logo img{max-width:155px}.hero h1{font-size:38px}.hero .subtitle{font-size:18px}.padding-72{padding:52px 0}.how_it_works_section .how-it-works-swiper-2-mobile{width:285px;height:570px}.how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide{padding:16px 26px 18px}}

/* Source app-section geometry corrections */
@media(min-width:992px){
.how_it_works_section .flex.desktop{direction:rtl;justify-content:center;gap:86px}
.how_it_works_section .how-it-works-swiper{margin:0 0 0 auto!important;direction:rtl}
.how_it_works_section .how-it-works-swiper-2{margin:0 auto 0 0;height:643px;flex:0 0 297px}
.how_it_works_section .how-it-works-swiper-2 .swiper-wrapper{height:100%}
.how_it_works_section .how-it-works-swiper-2 .swiper-slide{height:100%}
.how_it_works_section .how-it-works-swiper-2 .swiper-slide img.attachment-full{display:block;box-sizing:border-box;object-fit:cover;object-position:top;width:100%;height:100%;padding:11px 13px 17px 15px;border-radius:53px}
.how_it_works_section .how-it-works-mockup,.how_it_works_section .how-it-works-mockup img.bg{position:absolute;inset:0;width:100%;height:100%;z-index:3}
.how_it_works_section .how-it-works-mockup img.bg{object-fit:fill}
.how_it_works_section .swiper-pagination-2{left:-52px;right:auto;top:50%;transform:translateY(-50%);display:flex;flex-direction:column}
}

/* v1.2 — complete mobile header/hero correction and Elementor canvas compatibility */
body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}
body.elementor-page .elementor-widget-arabids_homepage>.elementor-widget-container{overflow:visible}
body.elementor-page .elementor-section-wrap,body.elementor-page .elementor-location-single{width:100%}

@media(max-width:991px){
  html,body{overflow-x:hidden}
  header{padding:9px 0;min-height:68px;box-shadow:0 7px 24px rgba(6,35,56,.05)}
  header .container{padding-inline:18px}
  header .navbar-head{min-height:50px;align-items:center}
  header .site-logo{display:flex;align-items:center;line-height:0}
  header .site-logo img,header .site-logo svg{display:block;width:auto!important;max-width:148px!important;max-height:50px;height:auto!important}
  header .navbar-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border-radius:12px}
  header .navbar-collapse{top:68px;height:calc(100dvh - 68px)!important;padding:28px 20px 32px;overflow-y:auto}
  header .navbar-nav{gap:12px;justify-content:flex-start;height:auto}
  header .navbar-nav>li>a{display:block;padding:12px 16px;font-size:16px}
  #content.site-content{padding-top:68px}
  .hero{padding:34px 0 46px}
  .hero .container{padding-inline:20px;overflow:visible}
  .hero .flex{max-width:560px;gap:26px}
  .hero .left{order:1;padding:0!important;width:100%;text-align:center}
  .hero .right{order:2;width:100%;display:block}
  .hero h1,.hero .title{font-size:clamp(34px,10vw,46px)!important;line-height:1.25!important;letter-spacing:-.7px;margin:0 auto 14px!important;max-width:360px}
  .hero .subtitle{font-size:17px!important;line-height:1.85!important;margin:0 auto 24px!important;max-width:360px;color:#4d4d4d}
  .hero .download_app{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-inline:auto}
  .hero .download_app a{display:flex;align-items:center;justify-content:center}
  .hero .download_app img{display:block;width:145px!important;max-width:42vw;height:auto}
  .hero .image{justify-content:center!important;position:relative;z-index:2}
  .hero .image img{width:min(92vw,380px)!important;max-width:380px!important;margin:0 auto;display:block}
  .hero .circle-overlay{z-index:0;opacity:.62;width:470px;height:470px;right:50%;margin-right:-235px;bottom:-115px}
  .padding-72{padding:52px 0}
  h2.title{line-height:1.35}
  footer .top-logo,footer .button-wrap,footer .bottom{width:100%}
  footer .top-logo{justify-content:center}
  footer .button-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
  footer .bottom{flex-direction:column;gap:18px}
}
@media(max-width:390px){
  header .site-logo img,header .site-logo svg{max-width:132px!important}
  .hero{padding-top:28px}
  .hero h1,.hero .title{font-size:34px!important;max-width:320px}
  .hero .subtitle{font-size:16px!important;max-width:320px}
  .hero .download_app{gap:10px}
  .hero .download_app img{width:136px!important;max-width:43vw}
  .hero .image img{width:min(94vw,340px)!important}
}


/* v1.2.1 — restore the exact source hero geometry inside Elementor.
   The source uses two 50% columns. Elementor's previous default gap made
   50% + 50% + gap exceed the row width, so the phone image wrapped below. */
.arabids-elementor-source,
.elementor-widget-arabids_homepage,
.elementor-widget-arabids_homepage > .elementor-widget-container{
  width:100%;
  max-width:none;
}
body.elementor-page .arabids-elementor-root-section,
body.elementor-page .arabids-elementor-root-section > .elementor-container,
body.elementor-page .arabids-elementor-root-section .elementor-column,
body.elementor-page .arabids-elementor-root-section .elementor-widget-wrap{
  width:100%;
  max-width:none;
}
body.elementor-page .arabids-elementor-root-section,
body.elementor-page .arabids-elementor-root-section .elementor-widget-wrap,
body.elementor-page .elementor-widget-arabids_homepage{
  margin:0!important;
  padding:0!important;
}

@media (min-width:992px){
  .arabids-elementor-source .hero .flex{
    flex-wrap:nowrap!important;
    gap:0!important;
  }
  .arabids-elementor-source .hero .left,
  .arabids-elementor-source .hero .right{
    width:50%!important;
    max-width:50%!important;
    flex:0 0 50%!important;
  }
  .arabids-elementor-source.rtl .hero .left{
    padding-right:0!important;
    padding-left:55px!important;
  }
  .arabids-elementor-source .hero .right{
    display:block!important;
  }
  .arabids-elementor-source .hero .image{
    justify-content:left!important;
  }
}

/* Keep comfortable separation below the fixed header and a clean one-column
   mobile hero while retaining the source ordering and proportions. */
@media (max-width:991px){
  .arabids-elementor-source .hero .flex{
    flex-wrap:nowrap!important;
    flex-direction:column!important;
    gap:26px!important;
  }
  .arabids-elementor-source .hero .left,
  .arabids-elementor-source .hero .right{
    width:100%!important;
    max-width:100%!important;
    flex:0 0 auto!important;
  }
  .arabids-elementor-source .hero .left{
    padding:0!important;
  }
  .arabids-elementor-source .hero .right{
    display:block!important;
  }
  .arabids-elementor-source .hero h1,
  .arabids-elementor-source .hero .title{
    margin-top:0!important;
  }
}


/* v1.2.2 — show the complete phones artwork inside the first screen.
   The image keeps its original proportions and is reduced only when the
   available browser height is smaller than the natural 663px artwork. */
.arabids-elementor-source .hero,
.arabids-elementor-source .hero .container,
.arabids-elementor-source .hero .right,
.arabids-elementor-source .hero .image{
  overflow:visible!important;
}
.arabids-elementor-source .hero .image{
  align-items:center!important;
  min-width:0;
}
.arabids-elementor-source .hero .image img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:min(735px,calc(100svh - 108px))!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  transform:none!important;
}
@media (min-width:992px){
  .arabids-elementor-source .hero .flex{
    min-height:calc(100svh - 88px);
    align-items:center!important;
  }
  .arabids-elementor-source .hero .right{
    align-self:stretch;
    display:flex!important;
    align-items:center;
  }
  .arabids-elementor-source .hero .right .image{
    width:100%;
    height:100%;
  }
}
@media (max-width:991px){
  .arabids-elementor-source .hero .image img{
    width:min(92vw,380px)!important;
    max-height:none!important;
    margin:0 auto!important;
  }
}
@media (max-width:560px){
  .arabids-elementor-source .hero .image img{
    width:min(94vw,345px)!important;
  }
}


/* v1.2.3 — clearer hero artwork and a calmer mobile halo.
   The phones move slightly down on desktop without cropping, while the
   mobile orange halo is closer to the restrained desktop appearance. */
@media (min-width:992px){
  .hero .image img{
    position:relative;
    top:28px;
  }
  .arabids-elementor-source .hero .image img{
    top:28px!important;
  }
}
@media (max-width:991px){
  .hero .circle-overlay,
  .arabids-elementor-source .hero .circle-overlay{
    width:380px!important;
    height:380px!important;
    right:50%!important;
    margin-right:0!important;
    transform:translateX(50%);
    bottom:-90px!important;
    opacity:.28!important;
  }
}
@media (max-width:420px){
  .hero .circle-overlay,
  .arabids-elementor-source .hero .circle-overlay{
    width:340px!important;
    height:340px!important;
    bottom:-82px!important;
  }
}


/* v1.2.4 — desktop-only halo behind the hero copy on the non-Elementor fallback. */
@media(min-width:992px){
  body:not(.elementor-page) .hero .left{position:relative;isolation:isolate}
  body:not(.elementor-page) .hero .left::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:610px;
    height:610px;
    border-radius:50%;
    right:50%;
    top:50%;
    opacity:.14;
    pointer-events:none;
    background:linear-gradient(0deg,#ff5e00 0%,#ffb795 47.6%,#fafbff 100%);
    transform:translate(44%,-48%);
  }
}


/* v1.2.5 — the same bilingual flag control used on account pages, now beside Auctions. */
header .navbar-nav > li.arabids-header-language-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:7px;
}
.arabids-header-language{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  direction:ltr;
  white-space:nowrap;
}
.arabids-header-language button{
  appearance:none;
  -webkit-appearance:none;
  width:31px;
  height:31px;
  min-width:31px;
  padding:0;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.arabids-header-language button:hover{background:#fff0e8;transform:translateY(-1px)}
.arabids-header-language button.active{border-color:rgba(255,122,61,.42);background:#fff4ee}
.arabids-header-language .language-flag{
  display:block;
  width:21px;
  height:14px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.20);
  pointer-events:none;
}
@media(max-width:991px){
  header .navbar-nav > li.arabids-header-language-item{padding:8px 16px 2px}
  .arabids-header-language button{width:36px;height:36px;min-width:36px}
  .arabids-header-language .language-flag{width:25px;height:17px}
}


/* v1.2.6 — centre the soft halo on the actual hero copy, not the whole
   column, and repeat the same visual language behind the Inside App copy. */
.arabids-hero-copy{
  position:relative;
  isolation:isolate;
}
.arabids-hero-copy > :not(.arabids-hero-text-halo){
  position:relative;
  z-index:2;
}
.arabids-hero-text-halo{
  --arabids-halo-x:0px;
  --arabids-halo-y:0px;
  display:block;
  position:absolute;
  z-index:0;
  width:540px;
  height:540px;
  right:50%;
  top:50%;
  border-radius:50%;
  pointer-events:none;
  opacity:.12;
  background:linear-gradient(0deg,#ff5e00 0%,#ffb795 47.6%,#fafbff 100%);
  transform:translate(calc(50% + var(--arabids-halo-x)),calc(-50% + var(--arabids-halo-y)));
}

/* Disable the older whole-column fallback halo now that the copy has its
   own accurately centred halo element. */
@media(min-width:992px){
  body:not(.elementor-page) .hero .left::before{display:none!important}
}

.how_it_works_section .how-it-works-slide-content{
  position:relative;
  isolation:isolate;
}
.how_it_works_section .how-it-works-slide-content::before{
  --arabids-app-halo-x:0px;
  --arabids-app-halo-y:0px;
  content:"";
  position:absolute;
  z-index:0;
  width:420px;
  height:420px;
  right:50%;
  top:50%;
  border-radius:50%;
  pointer-events:none;
  opacity:.12;
  background:linear-gradient(0deg,#ff5e00 0%,#ffb795 47.6%,#fafbff 100%);
  transform:translate(calc(50% + var(--arabids-app-halo-x)),calc(-50% + var(--arabids-app-halo-y)));
}
.how_it_works_section .how-it-works-slide-content > *{
  position:relative;
  z-index:1;
}
@media(max-width:991px){
  .arabids-hero-text-halo{display:none!important}
  .how_it_works_section .how-it-works-slide-content::before{
    width:300px;
    height:300px;
    opacity:.09;
  }
}


/* v1.2.7 — large pale Mazadat-style halo for the non-Elementor fallback. */
@media(min-width:992px){
  body:not(.elementor-page) .arabids-hero-text-halo{
    width:min(55vw,780px)!important;
    height:min(55vw,780px)!important;
    opacity:1!important;
    background:linear-gradient(180deg,#FAFBFF 0%,#FCF5F3 42%,#FBEDEA 100%)!important;
    transform:translate(calc(50% + var(--arabids-halo-x,0px)),calc(-50% + 112px + var(--arabids-halo-y,0px)))!important;
  }
  body:not(.elementor-page) .how_it_works_section .how-it-works-slide-content::before{
    width:min(54vw,760px)!important;
    height:min(54vw,760px)!important;
    opacity:1!important;
    background:linear-gradient(180deg,#FAFBFF 0%,#FCF5F3 42%,#FBEDEA 100%)!important;
    transform:translate(calc(50% + var(--arabids-app-halo-x,0px)),calc(-50% + 72px + var(--arabids-app-halo-y,0px)))!important;
  }
}
@media(max-width:991px){
  body:not(.elementor-page) .how_it_works_section .how-it-works-slide-content::before{
    width:min(88vw,390px)!important;
    height:min(88vw,390px)!important;
    opacity:1!important;
    background:linear-gradient(180deg,#FAFBFF 0%,#FCF5F3 42%,#FBEDEA 100%)!important;
    transform:translate(calc(50% + var(--arabids-app-halo-x,0px)),calc(-50% + 28px + var(--arabids-app-halo-y,0px)))!important;
  }
}


/* v1.2.8 / 1.0.9 — newsletter removed and the following section re-spaced. */
.subscribe_section,
#subscribe.subscribe_section{
  display:none!important;
}
.hero + .core_benefits_section,
.arabids-elementor-source .hero + .core_benefits_section{
  padding-top:clamp(72px,6vw,104px)!important;
}
@media(max-width:991px){
  .hero + .core_benefits_section,
  .arabids-elementor-source .hero + .core_benefits_section{
    padding-top:58px!important;
  }
}
@media(max-width:560px){
  .hero + .core_benefits_section,
  .arabids-elementor-source .hero + .core_benefits_section{
    padding-top:46px!important;
  }
}


/* Complete LTR layout when English is selected. */
@media(min-width:992px){
  html[dir="ltr"] .hero .left,
  .arabids-elementor-source.ltr .hero .left{
    padding-left:0!important;
    padding-right:55px!important;
  }
  html[dir="ltr"] .hero .image,
  .arabids-elementor-source.ltr .hero .image{
    justify-content:right!important;
  }
  html[dir="ltr"] .how_it_works_section .flex.desktop,
  .arabids-elementor-source.ltr .how_it_works_section .flex.desktop{
    direction:ltr!important;
  }
}
html[dir="ltr"] .hero .left,
html[dir="ltr"] .core_benefits_section,
html[dir="ltr"] .how_it_works_section,
html[dir="ltr"] .what_is_section,
html[dir="ltr"] .who_its_for_section,
html[dir="ltr"] .faq_section,
.arabids-elementor-source.ltr .hero .left,
.arabids-elementor-source.ltr .core_benefits_section,
.arabids-elementor-source.ltr .how_it_works_section,
.arabids-elementor-source.ltr .what_is_section,
.arabids-elementor-source.ltr .who_its_for_section,
.arabids-elementor-source.ltr .faq_section{
  text-align:left;
}


/* v1.2.9 — restore the application-store badges and add a calm visual gap
   before the three-step section so it does not sit directly under the hero
   halo. These rules also apply to the non-Elementor source fallback. */
.hero .download_app{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:24px;
  margin-top:8px!important;
  position:relative;
  z-index:4;
  visibility:visible!important;
  opacity:1!important;
}
.hero .download_app a{
  display:flex!important;
  align-items:center;
  justify-content:center;
  visibility:visible!important;
  opacity:1!important;
}
.hero .download_app img{
  display:block!important;
  width:168px;
  max-width:100%;
  height:auto!important;
}
.hero + .core_benefits_section{
  padding-top:clamp(124px,9vw,168px)!important;
}
.core_benefits_section h2.title{
  margin-bottom:44px!important;
}
@media(max-width:991px){
  .hero .download_app{gap:12px;margin-top:6px!important}
  .hero + .core_benefits_section{padding-top:96px!important}
  .core_benefits_section h2.title{margin-bottom:38px!important}
}
@media(max-width:560px){
  .hero .download_app{gap:10px;margin-top:4px!important}
  .hero + .core_benefits_section{padding-top:72px!important}
  .core_benefits_section h2.title{margin-bottom:30px!important}
}

/* v1.2.10 — complete phone frame, full app screenshots and calmer halos.
   The old decorative circle below “Inside the app” is removed because it
   overlapped the text halo and created two unwanted peach shapes on desktop. */
.how_it_works_section .container-circle-wrap{
  display:none!important;
}

/* Keep the complete phone mockup at its native proportion and show every
   pixel of each application screenshot inside it. */
.how_it_works_section .how-it-works-swiper-2,
.how_it_works_section .how-it-works-swiper-2-mobile{
  aspect-ratio:295 / 604;
  height:auto!important;
  background:#fff;
}
.how_it_works_section .how-it-works-swiper-2 .swiper-wrapper,
.how_it_works_section .how-it-works-swiper-2-mobile .swiper-wrapper,
.how_it_works_section .how-it-works-swiper-2 .swiper-slide,
.how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide{
  height:100%!important;
}
.how_it_works_section .how-it-works-swiper-2 .swiper-slide,
.how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide{
  padding:0!important;
  background:#fff;
}
.how_it_works_section .how-it-works-swiper-2 .swiper-slide > img.attachment-full,
.how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide > img.attachment-full{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  padding:7px 8px 9px!important;
  object-fit:contain!important;
  object-position:center top!important;
  border-radius:51px!important;
  background:#fff;
}
.how_it_works_section .how-it-works-mockup,
.how_it_works_section .how-it-works-mockup img.bg{
  width:100%!important;
  height:100%!important;
}
.how_it_works_section .how-it-works-mockup img.bg{
  object-fit:fill!important;
}

/* Reduce the orange decorative pattern on desktop without changing the
   clean circular shape used above the hero copy. */
@media(min-width:992px){
  .hero .circle-overlay{
    width:680px!important;
    height:680px!important;
    opacity:.12!important;
    bottom:-31%!important;
  }
  body:not(.elementor-page) .arabids-hero-text-halo{
    width:min(48vw,650px)!important;
    height:min(48vw,650px)!important;
    opacity:.72!important;
    background:linear-gradient(180deg,#FAFBFF 0%,#FDF9F7 54%,#FCEFEA 100%)!important;
  }
  body:not(.elementor-page) .how_it_works_section .how-it-works-slide-content::before{
    width:min(46vw,620px)!important;
    height:min(46vw,620px)!important;
    opacity:.68!important;
    background:linear-gradient(180deg,#FAFBFF 0%,#FDF9F7 54%,#FCEFEA 100%)!important;
    transform:translate(calc(50% + var(--arabids-app-halo-x,0px)),calc(-50% + 58px + var(--arabids-app-halo-y,0px)))!important;
  }
}

@media(max-width:991px){
  .how_it_works_section .how-it-works-swiper-2-mobile{
    width:clamp(224px,64vw,252px)!important;
    max-width:252px!important;
    height:auto!important;
    aspect-ratio:295 / 604;
    margin:0 auto!important;
    border-radius:48px!important;
  }
  .how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide > img.attachment-full{
    padding:6px 7px 8px!important;
    border-radius:46px!important;
  }
  .hero .circle-overlay{
    width:320px!important;
    height:320px!important;
    bottom:-72px!important;
    opacity:.16!important;
  }
  body:not(.elementor-page) .how_it_works_section .how-it-works-slide-content::before{
    width:min(78vw,300px)!important;
    height:min(78vw,300px)!important;
    opacity:.62!important;
    background:linear-gradient(180deg,#FAFBFF 0%,#FDF9F7 54%,#FCEFEA 100%)!important;
    transform:translate(calc(50% + var(--arabids-app-halo-x,0px)),calc(-50% + 20px + var(--arabids-app-halo-y,0px)))!important;
  }
}
@media(max-width:420px){
  .hero .circle-overlay{
    width:290px!important;
    height:290px!important;
    bottom:-66px!important;
  }
}

/* v1.2.10 desktop section height correction */
@media(min-width:992px){
  .how_it_works_section{
    height:auto!important;
    min-height:0!important;
    padding-top:72px!important;
    padding-bottom:72px!important;
  }
  .how_it_works_section .container-flex{
    height:auto!important;
    padding-top:0!important;
  }
  .how_it_works_section .flex.desktop{
    min-height:608px;
  }
}

/* v1.2.10 single desktop app halo */
@media(min-width:992px){
  .how_it_works_section .flex.desktop{
    position:relative!important;
    isolation:isolate;
  }
  .how_it_works_section .flex.desktop::before{
    content:"";
    position:absolute;
    z-index:0;
    width:min(46vw,620px);
    height:min(46vw,620px);
    right:25%;
    top:50%;
    border-radius:50%;
    pointer-events:none;
    opacity:.68;
    background:linear-gradient(180deg,#FAFBFF 0%,#FDF9F7 54%,#FCEFEA 100%);
    transform:translate(50%,-50%);
  }
  .how_it_works_section .how-it-works-slide-content::before{
    display:none!important;
  }
  .how_it_works_section .how-it-works-swiper,
  .how_it_works_section .how-it-works-swiper-2,
  .how_it_works_section .swiper-pagination-2{
    position:relative;
    z-index:1;
  }
  html[dir="ltr"] .how_it_works_section .flex.desktop::before,
  .ltr .how_it_works_section .flex.desktop::before{
    right:auto;
    left:25%;
    transform:translate(-50%,-50%);
  }
}

/* v1.2.10 mobile app flow correction */
@media(max-width:991px){
  .how_it_works_section{
    padding-top:28px!important;
    padding-bottom:48px!important;
  }
  .how_it_works_section .container-flex{
    height:auto!important;
    min-height:0!important;
    padding-top:0!important;
    justify-content:flex-start!important;
  }
  .how_it_works_section h2.title{
    margin-bottom:18px!important;
  }
}

/* v1.2.11 — footer social/app badges refresh */
footer .button-wrap{display:flex;align-items:center;justify-content:flex-end;gap:14px}
footer .sosial{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
footer .sosial a{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:transparent;
  border:1px solid transparent;
  padding:0;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
footer .sosial a:hover{background:#FFF1EA;border-color:#FFD7C4;transform:translateY(-1px)}
footer .sosial a img{display:block;width:24px;height:24px}
footer .footer-store-links{display:flex;align-items:center;justify-content:flex-start;gap:10px;direction:ltr;flex-wrap:wrap}
footer .footer-store-link{display:flex;align-items:center;justify-content:center}
footer .footer-store-link img{display:block;width:168px;max-width:100%;height:auto}
@media(max-width:991px){
  footer .button-wrap{justify-content:center}
  footer .bottom{align-items:center}
  footer .footer-store-links{justify-content:center;width:100%}
  footer .footer-store-link img{width:150px}
}
@media(max-width:560px){
  footer .sosial{justify-content:center;gap:12px}
  footer .footer-store-link img{width:min(44vw,148px)}
}

/* v1.2.12 — fixed mobile navigation and scroll-driven sticky app preview */
@media(max-width:991px){
  /* Keep the complete mobile header visible while the page scrolls. */
  body .arabids-elementor-source,
  body .elementor-widget-arabids_homepage,
  body .elementor-widget-arabids_homepage > .elementor-widget-container{
    transform:none!important;
    filter:none!important;
    perspective:none!important;
    overflow:visible!important;
  }
  body header,
  body .arabids-elementor-source header{
    position:fixed!important;
    inset-inline:0!important;
    top:0!important;
    width:100%!important;
    z-index:99999!important;
    transform:translateZ(0);
    backface-visibility:hidden;
    will-change:transform;
  }
  body.admin-bar header,
  body.admin-bar .arabids-elementor-source header{top:32px!important}

  /* Give the app section enough scroll runway, then pin its mobile stage
     below the fixed navigation while the four screens change with scrolling. */
  .how_it_works_section{
    position:relative!important;
    overflow:visible!important;
    height:360vh!important;
    height:360svh!important;
    min-height:0!important;
    padding-top:28px!important;
    padding-bottom:0!important;
    isolation:isolate;
  }
  .how_it_works_section .container-flex{
    position:relative!important;
    z-index:3!important;
    height:auto!important;
    min-height:0!important;
    padding-top:0!important;
    justify-content:flex-start!important;
  }
  .how_it_works_section > .mobile{
    position:sticky!important;
    position:-webkit-sticky!important;
    top:var(--arabids-mobile-header-bottom,68px)!important;
    z-index:2!important;
    display:grid!important;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    align-content:center;
    justify-items:center;
    gap:12px!important;
    width:100%!important;
    max-width:560px!important;
    height:calc(100vh - var(--arabids-mobile-header-bottom,68px))!important;
    height:calc(100svh - var(--arabids-mobile-header-bottom,68px))!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:10px 16px 14px!important;
    box-sizing:border-box;
    overflow:visible!important;
  }
  .how_it_works_section .how-it-works-swiper-2-mobile{
    order:1!important;
    width:auto!important;
    max-width:none!important;
    height:min(61vh,470px)!important;
    height:min(61svh,470px)!important;
    aspect-ratio:295 / 604!important;
    margin:0 auto!important;
    border-radius:44px!important;
    align-self:end;
  }
  .how_it_works_section .how-it-works-swiper-2-mobile .swiper-slide > img.attachment-full{
    padding:6px 7px 8px!important;
    border-radius:42px!important;
  }
  .how_it_works_section .how-it-works-swiper-mobile{
    order:2!important;
    width:100%!important;
    max-width:500px!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    align-self:start;
  }
  .how_it_works_section .how-it-works-swiper-mobile .swiper-slide{
    height:auto!important;
  }
  .how_it_works_section .how-it-works-swiper-mobile .how-it-works-slide-content{
    width:100%!important;
    max-width:500px!important;
    padding:14px 16px!important;
    margin:0 auto!important;
  }
  .how_it_works_section .how-it-works-swiper-mobile .how-it-works-title{
    font-size:20px!important;
    line-height:1.35!important;
    margin-bottom:6px!important;
  }
  .how_it_works_section .how-it-works-swiper-mobile .how-it-works-subtitle{
    font-size:15px!important;
    line-height:1.6!important;
  }
  .how_it_works_section .how-it-works-swiper-2-mobile .swiper-pagination{
    bottom:4px!important;
  }
}
@media(max-width:782px){
  body.admin-bar header,
  body.admin-bar .arabids-elementor-source header{top:46px!important}
}
@media(max-width:420px){
  .how_it_works_section > .mobile{padding-inline:12px!important;gap:10px!important}
  .how_it_works_section .how-it-works-swiper-2-mobile{
    height:min(59vh,420px)!important;
    height:min(59svh,420px)!important;
  }
  .how_it_works_section .how-it-works-swiper-mobile .how-it-works-slide-content{padding:12px 14px!important}
  .how_it_works_section .how-it-works-swiper-mobile .how-it-works-title{font-size:18px!important}
  .how_it_works_section .how-it-works-swiper-mobile .how-it-works-subtitle{font-size:14px!important}
}
@media(max-width:991px) and (orientation:landscape){
  .how_it_works_section{height:390svh!important}
  .how_it_works_section > .mobile{
    grid-template-columns:auto minmax(260px,1fr);
    grid-template-rows:1fr;
    align-items:center;
    justify-content:center;
    gap:20px!important;
    max-width:900px!important;
    padding:8px 24px!important;
  }
  .how_it_works_section .how-it-works-swiper-2-mobile{
    grid-column:1;
    height:min(76svh,300px)!important;
    align-self:center;
  }
  .how_it_works_section .how-it-works-swiper-mobile{
    grid-column:2;
    align-self:center;
  }
}

/* Sticky needs every non-scrolling ancestor to keep vertical overflow visible. */
@media(max-width:991px){
  html{overflow-x:clip!important;overflow-y:auto!important}
  body{overflow-x:clip!important;overflow-y:visible!important}
  #page,.site-content,.main-page-wrap,.arabids-elementor-source{
    overflow-x:clip!important;
    overflow-y:visible!important;
  }
}

/* v1.2.13 / Elementor 1.0.14 — polished desktop footer layout */
footer .footer-nav > span{display:none!important}
footer .footer-nav li{display:flex;align-items:center;white-space:nowrap}
footer .footer-nav li + li::before{
  content:"|";
  display:inline-block;
  margin:0 14px;
  color:#c8cbd0;
  font-size:16px;
  font-weight:300;
  line-height:1;
}
footer .footer-login-link{
  color:#ff7a3d!important;
  font-weight:500!important;
  position:relative;
}
footer .footer-login-link::after{
  content:"";
  position:absolute;
  right:50%;
  bottom:-7px;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#ff7a3d;
  transform:translateX(50%);
  opacity:.72;
}
footer .footer-login-link:hover{color:#e9500d!important}
footer .sosial a{
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid #ffe0d0;
  background:#fff;
  box-shadow:0 5px 16px rgba(255,122,61,.08);
}
footer .sosial a img{width:31px;height:31px}
footer .sosial a:hover{
  background:#fff4ee;
  border-color:#ffc4a8;
  box-shadow:0 8px 20px rgba(255,122,61,.13);
}

@media(min-width:992px){
  footer{padding-top:44px}
  footer .top.arabids-footer-main{
    display:grid!important;
    grid-template-columns:minmax(260px,1fr) minmax(390px,1.25fr) minmax(260px,1fr);
    grid-template-areas:"social nav logo";
    align-items:center;
    gap:34px;
    width:100%;
    margin-bottom:24px;
    direction:ltr!important;
  }
  footer .arabids-footer-main .top-logo{
    grid-area:logo;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:auto!important;
    direction:rtl;
  }
  footer .arabids-footer-main .top-logo .logo{
    display:flex;
    align-items:center;
    line-height:0;
  }
  footer .arabids-footer-main .top-logo img,
  footer .arabids-footer-main .top-logo svg{
    width:205px!important;
    max-width:205px!important;
    height:auto!important;
  }
  footer .arabids-footer-main .bottom-nav{
    grid-area:nav;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    direction:rtl;
    transform:translateX(-18px);
  }
  footer .arabids-footer-main .footer-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:0;
    margin:0;
  }
  footer .arabids-footer-main .footer-nav li a{
    font-size:17px;
    line-height:30px;
    font-weight:300;
  }
  footer .arabids-footer-main .sosial{
    grid-area:social;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:13px;
    width:auto;
    direction:ltr;
  }
  footer .bottom.arabids-footer-app-row{
    display:flex!important;
    align-items:center;
    justify-content:flex-start!important;
    width:100%;
    padding-top:22px;
    border-top:1px solid #f0f1f3;
    direction:ltr!important;
  }
  footer .arabids-footer-app-row .footer-store-links{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin:0;
  }
  footer .arabids-footer-app-row .footer-store-link img{
    width:170px;
  }
  footer .copyright{margin-top:16px}
}

@media(max-width:991px){
  footer .top.arabids-footer-main{
    display:flex!important;
    flex-direction:column;
    align-items:center;
    gap:22px;
  }
  footer .arabids-footer-main .top-logo,
  footer .arabids-footer-main .bottom-nav,
  footer .arabids-footer-main .sosial{width:100%;justify-content:center}
  footer .arabids-footer-main .top-logo{order:1}
  footer .arabids-footer-main .bottom-nav{order:2}
  footer .arabids-footer-main .sosial{order:3}
  footer .arabids-footer-main .footer-nav{justify-content:center;gap:0}
  footer .arabids-footer-main .footer-nav li a{font-size:16px}
  footer .bottom.arabids-footer-app-row{
    display:flex!important;
    justify-content:center!important;
    width:100%;
    padding-top:20px;
    border-top:1px solid #f0f1f3;
  }
  footer .arabids-footer-app-row .footer-store-links{justify-content:center}
}

/* v1.2.14 — Mazadat-inspired clean social icons and aligned desktop footer */
footer .footer-downloads-social{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}
footer .footer-downloads-social .sosial{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  direction:ltr;
}
footer .footer-downloads-social .sosial a{
  width:36px!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
footer .footer-downloads-social .sosial a:hover{
  opacity:.72;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transform:translateY(-1px)!important;
}
footer .footer-downloads-social .sosial a img{
  display:block;
  width:32px!important;
  height:32px!important;
  object-fit:contain;
}
footer .footer-downloads-social .footer-store-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  direction:ltr;
  margin:0;
}
footer .footer-downloads-social .footer-store-link{
  display:flex;
  align-items:center;
  justify-content:center;
}
footer .footer-downloads-social .footer-store-link img{
  display:block;
  width:168px;
  max-width:100%;
  height:auto;
}

@media(min-width:992px){
  footer{padding-top:42px}
  footer>.container,
  .arabids-elementor-source footer>.container{
    max-width:1278px!important;
    padding-inline:15px!important;
  }
  footer .top.arabids-footer-main{
    display:grid!important;
    grid-template-columns:minmax(360px,.95fr) minmax(390px,1.15fr) minmax(280px,.9fr)!important;
    grid-template-areas:"apps nav logo"!important;
    align-items:center!important;
    column-gap:34px!important;
    width:100%!important;
    margin:0 0 30px!important;
    direction:ltr!important;
  }
  footer .arabids-footer-main .top-logo{
    grid-area:logo!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    margin:0!important;
    transform:translateX(12px);
    direction:rtl;
  }
  footer .arabids-footer-main .top-logo .logo{
    display:flex!important;
    align-items:center!important;
    line-height:0!important;
  }
  footer .arabids-footer-main .top-logo img,
  footer .arabids-footer-main .top-logo svg{
    width:214px!important;
    max-width:214px!important;
    height:auto!important;
  }
  footer .arabids-footer-main .bottom-nav{
    grid-area:nav!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    margin:0!important;
    transform:translateX(-8px)!important;
    direction:rtl!important;
  }
  footer .arabids-footer-main .footer-downloads-social{
    grid-area:apps!important;
    justify-self:start!important;
    width:356px;
    max-width:100%;
  }
  footer .copyright{
    margin-top:0!important;
    padding-top:17px;
    border-top:1px solid #f0f1f3;
  }
}

@media(max-width:991px){
  footer .top.arabids-footer-main{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:22px!important;
  }
  footer .arabids-footer-main .top-logo{order:1!important;transform:none!important}
  footer .arabids-footer-main .bottom-nav{order:2!important;transform:none!important}
  footer .arabids-footer-main .footer-downloads-social{order:3!important;width:100%}
  footer .footer-downloads-social .sosial{gap:16px}
  footer .footer-downloads-social .sosial a{width:34px!important;height:34px!important}
  footer .footer-downloads-social .sosial a img{width:30px!important;height:30px!important}
  footer .footer-downloads-social .footer-store-links{width:100%;flex-wrap:wrap}
  footer .footer-downloads-social .footer-store-link img{width:150px}
  footer .copyright{padding-top:16px;border-top:1px solid #f0f1f3}
}
@media(max-width:560px){
  footer .footer-downloads-social .footer-store-link img{width:min(44vw,148px)}
}

/* v1.2.14 desktop footer flex correction */
footer .footer-downloads-social .sosial,
footer .footer-downloads-social .footer-store-links{flex-wrap:nowrap!important}
@media(min-width:992px){
  footer .top.arabids-footer-main{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:34px!important;
    direction:ltr!important;
  }
  footer .arabids-footer-main .footer-downloads-social{
    order:1!important;
    flex:0 0 356px!important;
    width:356px!important;
  }
  footer .arabids-footer-main .bottom-nav{
    order:2!important;
    flex:1 1 auto!important;
    min-width:390px!important;
  }
  footer .arabids-footer-main .top-logo{
    order:3!important;
    flex:0 0 280px!important;
    width:280px!important;
  }
}


/* v1.2.15 — crisp official social marks, matching Mazadat's clean icon row */
footer .footer-downloads-social .sosial{gap:24px!important}
footer .footer-downloads-social .sosial a{width:36px!important;height:36px!important;overflow:visible!important}
footer .footer-downloads-social .sosial a img{width:28px!important;height:28px!important;display:block!important;object-fit:contain!important}
footer .footer-downloads-social .sosial a[aria-label="Facebook"] img{width:17px!important;height:29px!important}
footer .footer-downloads-social .sosial a[aria-label="Instagram"] img{width:28px!important;height:28px!important}
footer .footer-downloads-social .sosial a[aria-label="LinkedIn"] img{width:27px!important;height:28px!important}
footer .footer-downloads-social .sosial a[aria-label="Snapchat"] img{width:30px!important;height:30px!important}
footer .footer-downloads-social .sosial a:hover{opacity:.68!important}
footer .copyright{unicode-bidi:plaintext}
@media(max-width:991px){footer .footer-downloads-social .sosial{gap:21px!important}}

/* v1.2.16 — mobile footer order and refined spacing */
footer .footer-downloads-social{
  row-gap:18px!important;
}
footer .footer-downloads-social .sosial{
  order:1!important;
  margin:0!important;
}
footer .footer-downloads-social .footer-store-links{
  order:2!important;
  margin:0!important;
}
@media(min-width:992px){
  footer .footer-downloads-social{gap:17px!important}
}
@media(max-width:991px){
  footer .footer-downloads-social{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:16px!important;
  }
  footer .footer-downloads-social .sosial{
    width:100%!important;
    justify-content:center!important;
    margin:0!important;
  }
  footer .footer-downloads-social .footer-store-links{
    width:100%!important;
    justify-content:center!important;
    gap:10px!important;
    margin:0!important;
  }
}
@media(max-width:420px){
  footer .footer-downloads-social{gap:14px!important}
  footer .footer-downloads-social .footer-store-links{gap:8px!important}
  footer .footer-downloads-social .footer-store-link img{width:min(43vw,146px)!important}
}

/* v1.2.19 — compact, simple account-registration tab with extra spacing below language flags on mobile only. */
header .navbar-nav > li.arabids-mobile-register-item{
  display:none;
}
@media(max-width:991px){
  header .navbar-nav > li.arabids-mobile-register-item{
    display:block;
    width:100%;
    margin:20px 0 0;
    padding:0 16px 12px;
    text-align:center;
  }
  header .navbar-nav > li.arabids-mobile-register-item > a.arabids-mobile-register-link{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:138px;
    min-height:38px;
    padding:8px 20px!important;
    border:1px solid #ff6b2c!important;
    border-radius:8px;
    background:#ff6b2c;
    color:#fff!important;
    font-family:"Tajawal","Manrope",Arial,sans-serif;
    font-size:14px;
    font-weight:600;
    line-height:1.35;
    text-decoration:none!important;
    box-shadow:none;
    transition:background-color .18s ease,border-color .18s ease;
  }
  header .navbar-nav > li.arabids-mobile-register-item > a.arabids-mobile-register-link::before,
  header .navbar-nav > li.arabids-mobile-register-item > a.arabids-mobile-register-link::after{
    display:none!important;
    content:none!important;
  }
  header .navbar-nav > li.arabids-mobile-register-item > a.arabids-mobile-register-link:hover,
  header .navbar-nav > li.arabids-mobile-register-item > a.arabids-mobile-register-link:focus-visible{
    background:#f35f22;
    border-color:#f35f22!important;
    color:#fff!important;
  }
}