:root{--arabids-orange:#A4865D;--arabids-orange-dark:#A4865D;--arabids-ink:#143328;--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 #EFE6D8;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:#A4865D;color:#fff;font-weight:600;border:1px solid #A4865D}
.newsletter-message{font-size:14px;margin-top:12px;color:#A4865D;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:#FBF9F5;color:#A4865D;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:#A4865D;color:#fff;border-color:#A4865D}
.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(20,51,40,.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,#420B07 0%,#E4D5BF 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:#FBF9F5;transform:translateY(-1px)}
.arabids-header-language button.active{border-color:rgba(66,11,7,.42);background:#FBF9F5}
.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,#420B07 0%,#E4D5BF 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,#420B07 0%,#E4D5BF 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%,#FBF9F5 42%,#FBF9F5 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%,#FBF9F5 42%,#FBF9F5 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%,#FBF9F5 42%,#FBF9F5 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%,#FBF9F5 54%,#FBF9F5 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%,#FBF9F5 54%,#FBF9F5 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%,#FBF9F5 54%,#FBF9F5 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%,#FBF9F5 54%,#FBF9F5 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:#FBF9F5;border-color:#E4D5BF;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:#A4865D!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:#A4865D;
  transform:translateX(50%);
  opacity:.72;
}
footer .footer-login-link:hover{color:#420B07!important}
footer .sosial a{
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid #FBF9F5;
  background:#fff;
  box-shadow:0 5px 16px rgba(66,11,7,.08);
}
footer .sosial a img{width:31px;height:31px}
footer .sosial a:hover{
  background:#FBF9F5;
  border-color:#E4D5BF;
  box-shadow:0 8px 20px rgba(66,11,7,.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 #A4865D!important;
    border-radius:8px;
    background:#A4865D;
    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:#A4865D;
    border-color:#A4865D!important;
    color:#fff!important;
  }
}


/* v1.2.25 — keep Account and Delete Account adjacent on the home footer. */
footer .arabids-footer-main .footer-nav{flex-wrap:nowrap!important;white-space:nowrap}
footer .arabids-footer-main .footer-delete-link{color:#4d4d4d;font-weight:300}
footer .arabids-footer-main .footer-delete-link:hover{color:#420B07!important}
@media(max-width:560px){
  footer .arabids-footer-main .bottom-nav{overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none}
  footer .arabids-footer-main .bottom-nav::-webkit-scrollbar{display:none}
  footer .arabids-footer-main .footer-nav{justify-content:flex-start!important;min-width:max-content}
  footer .arabids-footer-main .footer-nav li + li::before{margin-inline:9px}
  footer .arabids-footer-main .footer-nav li a{font-size:14px!important}
}


/* v1.2.26 — homepage footer Account + Delete Account are one atomic inline item. */
footer .arabids-footer-main .footer-nav > li.footer-account-actions{display:inline-flex!important;align-items:center!important;gap:10px!important;white-space:nowrap!important;flex:0 0 auto!important}
footer .arabids-footer-main .footer-nav > li.footer-account-actions::before{content:"|";display:inline-block;margin-inline:14px;color:#c8cbd0;font-weight:300}
footer .arabids-footer-main .footer-account-actions .footer-account-separator{display:inline-block!important;color:#c8cbd0;font-weight:300;margin:0 2px}
footer .arabids-footer-main .footer-account-actions .footer-delete-link{color:#4d4d4d!important}
@media(max-width:560px){footer .arabids-footer-main .footer-nav > li.footer-account-actions::before{margin-inline:9px}footer .arabids-footer-main .footer-nav > li.footer-account-actions{gap:8px!important}}


/* v1.2.30 — public homepage footer links visible for all visitors. */
footer .footer-nav li + li::before{
  content:"•";
  font-size:12px;
  font-weight:700;
  color:#c8cbd0;
}
footer .arabids-footer-main .footer-delete-link{
  color:#4D4D4D!important;
  font-weight:500!important;
}
footer .arabids-footer-main .footer-delete-link:hover{
  color:#420B07!important;
}
@media(max-width:560px){
  footer .arabids-footer-main .footer-nav li + li::before{margin-inline:9px}
}


/* v1.2.31 — FINAL public homepage footer + image-safe release. */
footer .arabids-footer-main .bottom-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
}
footer .arabids-footer-main ul.footer-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}
footer .arabids-footer-main ul.footer-nav > li{
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
}
footer .arabids-footer-main ul.footer-nav > li + li::before{
  content:"•"!important;
  display:inline-block!important;
  margin:0 14px!important;
  color:#EFE6D8!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
}
footer .arabids-footer-main ul.footer-nav > li > a{
  display:inline-flex!important;
  align-items:center!important;
  color:#4D4D4D!important;
  font-weight:500!important;
  text-decoration:none!important;
}
footer .arabids-footer-main ul.footer-nav > li > a.footer-login-link{
  color:#A4865D!important;
  font-weight:700!important;
}
footer .arabids-footer-main ul.footer-nav > li > a.footer-delete-link{
  color:#4D4D4D!important;
  font-weight:600!important;
}
footer .arabids-footer-main ul.footer-nav > li > a:hover{
  color:#A4865D!important;
}
footer .arabids-footer-main .footer-account-separator{display:none!important}
@media(max-width:720px){
  footer .arabids-footer-main .bottom-nav{
    justify-content:flex-start!important;
    overflow-x:auto!important;
    padding:4px 0 8px!important;
    scrollbar-width:none!important;
  }
  footer .arabids-footer-main .bottom-nav::-webkit-scrollbar{display:none!important}
  footer .arabids-footer-main ul.footer-nav{justify-content:flex-start!important;min-width:max-content!important}
  footer .arabids-footer-main ul.footer-nav > li + li::before{margin:0 9px!important}
  footer .arabids-footer-main ul.footer-nav > li > a{font-size:14px!important}
}

/* v1.2.70 — visible Support tab in both homepage desktop and mobile navigation. */
header .navbar-nav > li.arabids-header-support-item { display:block; visibility:visible; }
header .navbar-nav > li.arabids-header-support-item > a { white-space:nowrap; }
/* 1.2.73 — keep the fixed homepage navigation above preview/swiper layers. */
@media (min-width: 992px){body.home #page > header,body.home .arabids-elementor-source header{z-index:9999!important;pointer-events:auto!important}}
body.home header .navbar-nav a{pointer-events:auto}


/* v1.2.79 — scroll through the four application screens on desktop without
   the old wheel trap that blocked navigation. Mobile keeps its sticky stage. */
@media(min-width:992px){
  .how_it_works_section{
    position:relative!important;
    height:370vh!important;
    height:370svh!important;
    min-height:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .how_it_works_section .container-flex{
    position:sticky!important;
    top:var(--arabids-preview-header,78px)!important;
    height:calc(100vh - var(--arabids-preview-header,78px))!important;
    height:calc(100svh - var(--arabids-preview-header,78px))!important;
    min-height:0!important;
    padding:8px 0!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }
  .how_it_works_section .container-flex > h2.title{
    flex:none;
    margin:4px 0 16px!important;
  }
  .how_it_works_section .flex.desktop{
    min-height:0!important;
    max-height:calc(100% - 70px)!important;
  }
  .how_it_works_section .how-it-works-swiper-2{
    width:min(24vw,285px)!important;
    height:auto!important;
    aspect-ratio:295/604!important;
  }
}
@media(max-width:991px){
  .how_it_works_section > .mobile{
    touch-action:pan-y!important;
  }
}

/* v1.2.80 — direct image gestures remain available on the phone preview.
   Vertical native page scrolling is not blocked. */
.how_it_works_section .how-it-works-swiper-2,
.how_it_works_section .how-it-works-swiper-2-mobile {touch-action:pan-y; cursor:grab;}
.how_it_works_section .how-it-works-swiper-2:active,
.how_it_works_section .how-it-works-swiper-2-mobile:active {cursor:grabbing;}


/* ARABIDS 1.2.83 — keep the ENTIRE app-phone frame visible while its four
   slides are pinned. Size by available VIEWPORT HEIGHT, not viewport width.
   295/604 is the exact original device aspect ratio; inner slides and frame
   scale together (no cropping, no changed artwork). */
@media (min-width:992px) {
  .how_it_works_section .flex.desktop .how-it-works-swiper-2 {
    --arabids-phone-fit: calc((100dvh - var(--arabids-preview-header,82px) - 130px) * 0.48841);
    box-sizing:border-box!important;
    flex:0 0 auto!important;
    width:min(297px, var(--arabids-phone-fit))!important;
    min-width:0!important;
    height:auto!important;
    max-height:calc(100dvh - var(--arabids-preview-header,82px) - 130px)!important;
    aspect-ratio:295 / 604!important;
    align-self:center!important;
    margin-inline:auto!important;
  }
  .how_it_works_section .flex.desktop .how-it-works-swiper-2 .swiper-wrapper,
  .how_it_works_section .flex.desktop .how-it-works-swiper-2 .swiper-slide,
  .how_it_works_section .flex.desktop .how-it-works-swiper-2 .how-it-works-mockup {
    height:100%!important;
  }
  .how_it_works_section .flex.desktop .how-it-works-swiper-2 .swiper-slide > img.attachment-full {
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}
/* Narrow / landscape mobile: the phone and the copy always fit below the
   fixed header inside the sticky screen. Never force a minimum phone height. */
@media (max-width:991px) {
  .how_it_works_section .how-it-works-swiper-2-mobile {
    max-height:calc(100dvh - var(--arabids-mobile-header-bottom,68px) - 138px)!important;
    width:auto!important;
    max-width:min(252px,70vw)!important;
    aspect-ratio:295 / 604!important;
  }
}

/* Match the descriptive slide's height to the phone. Otherwise its original
   600px height keeps the entire flex row oversized and vertically offsets the
   smaller phone below the bottom of a short desktop viewport. */
@media (min-width:992px) {
  .how_it_works_section .flex.desktop > .how-it-works-swiper {
    height:min(600px,calc(100dvh - var(--arabids-preview-header,82px) - 130px))!important;
    max-height:calc(100dvh - var(--arabids-preview-header,82px) - 130px)!important;
    min-height:0!important;
  }
}

/* 1.2.84: safe full-frame viewport fit for pinned app showcase.
   Header/admin-toolbar heights are deducted and extra safety space retained.
   A runtime width correction also handles unusual WordPress toolbar/zoom sizes. */
@media (min-width:992px) {
 .how_it_works_section .flex.desktop .how-it-works-swiper-2 {
   width:min(295px, max(140px, calc((100dvh - var(--arabids-preview-header,82px) - 215px) * 0.48841)), var(--arabids-phone-live-width, 295px))!important;
   height:auto!important;
   max-height:none!important;
   aspect-ratio:295/604!important;
 }
}
@media (max-width:991px) {
 .how_it_works_section .how-it-works-swiper-2-mobile {
   height:min(58svh, 440px, max(160px, calc(100dvh - var(--arabids-mobile-header-bottom,68px) - 165px)))!important;
   width:auto!important;
   aspect-ratio:295/604!important;
   max-width:min(74vw, 270px)!important;
   max-height:var(--arabids-mobile-fit-height, 100svh)!important;
 }
}


/* 1.2.85: restore the app frame to a near-natural size while keeping the full
   device visible. The sticky stage starts from the top instead of vertical
   centering, which frees real space for a larger phone. */
@media(min-width:992px){
  .how_it_works_section .container-flex{
    justify-content:flex-start!important;
    padding:10px 0 8px!important;
  }
  .how_it_works_section .container-flex > h2.title{
    margin:0 0 12px!important;
  }
  .how_it_works_section .flex.desktop{
    align-items:center!important;
    max-height:calc(100% - 52px)!important;
    gap:68px!important;
  }
  .how_it_works_section .flex.desktop .how-it-works-swiper-2{
    width:min(295px, max(235px, calc((100dvh - var(--arabids-preview-header,82px) - 145px) * 0.48841)), var(--arabids-phone-live-width, 295px))!important;
    min-width:235px!important;
    max-width:295px!important;
    aspect-ratio:295/604!important;
    height:auto!important;
    max-height:none!important;
  }
  .how_it_works_section .flex.desktop > .how-it-works-swiper{
    height:min(600px,calc(100dvh - var(--arabids-preview-header,82px) - 145px))!important;
    max-height:calc(100dvh - var(--arabids-preview-header,82px) - 145px)!important;
  }
}
@media(max-width:991px){
  .how_it_works_section .container-flex > h2.title{margin-bottom:10px!important}
  .how_it_works_section .how-it-works-swiper-2-mobile{
    height:min(66svh, 520px, max(235px, calc(100dvh - var(--arabids-mobile-header-bottom,68px) - 135px)))!important;
    max-width:min(82vw, 295px)!important;
  }
}