/* GENERATED from asas-site.css by _library/tools/rtl_flip.py for the Arabic pages. Do not edit: edit the original and run build_ar.py. */
/* ============================================================
   ASAS site overrides (loaded after mellis.css + mellis-responsive.css)
   5 Oct 2026
   ============================================================ */
:root{ --asas-gold:#c8a350; }

/* ── 1. Main menu perfectly centred (desktop) ───────────────── */
@media (min-width:1200px){
  .main-menu__wrapper-inner,
  .main-menu-two__wrapper-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
  }
  .main-menu__left,.main-menu-two__left{justify-self:start}
  .main-menu__main-menu-box,.main-menu-two__main-menu-box{justify-self:center}
  .main-menu__right,.main-menu-two__right{justify-self:end}
}

/* ── 2. Projects dropdown: wide, 2 columns, centred under "Projects" ── */
@media (min-width:992px){
  .main-menu .main-menu__list > li.dropdown--projects > ul,
  .stricky-header .main-menu__list > li.dropdown--projects > ul{
    display:grid;
    grid-template-columns:repeat(2, minmax(290px,1fr));
    min-width:640px;
    right:50%;
    margin-right:-320px;
    padding:10px 0;
  }
  .main-menu .main-menu__list > li.dropdown--projects > ul > li + li,
  .stricky-header .main-menu__list > li.dropdown--projects > ul > li + li{margin-top:0}
  .main-menu .main-menu__list > li.dropdown--projects > ul > li > a,
  .stricky-header .main-menu__list > li.dropdown--projects > ul > li > a{
    font-size:16px; line-height:24px; padding:10px 24px; white-space:nowrap;
  }
  .main-menu .main-menu__list > li.dropdown--projects > ul > li:first-child,
  .stricky-header .main-menu__list > li.dropdown--projects > ul > li:first-child{
    grid-column:1 / -1; border-bottom:1px solid #eef0f4; margin-bottom:4px;
  }
  .main-menu .main-menu__list > li.dropdown--projects > ul > li:first-child > a,
  .stricky-header .main-menu__list > li.dropdown--projects > ul > li:first-child > a{font-weight:700}
}

/* ── 3. Mobile menu: expanded row in gold (not blue) ──────────── */
.mobile-nav__content .main-menu__list li a.expanded{
  color:var(--asas-gold) !important;
  box-shadow:inset 3px 0 0 var(--asas-gold);
  padding-right:12px;
}
.mobile-nav__content .main-menu__list li > a > button.expanded{
  background-color:var(--asas-gold) !important;
  color:#27252a !important;
}
.mobile-nav__content .main-menu__list li.dropdown > a{cursor:pointer}

/* ── 4. Mobile hero height + compact slide text ─────────────── */
@media (max-width:767px){
  /* homepage slider */
  .main-slider-two .swiper-slide{height:68vh;height:68svh;min-height:480px}
  .main-slider-two .container{
    height:100%; display:flex; flex-direction:column; justify-content:flex-end;
    padding-top:96px; padding-bottom:44px;
  }
  .main-slider-two__sub-title{font-size:13px;line-height:18px;margin:0 0 6px}
  .main-slider-two__title{font-size:32px;line-height:38px;margin:4px 0 8px}
  .main-slider-two__content img,
  .main-slider-two__btn-box img{height:60px}
  .main-slider-two__btn-box{margin-top:12px}
  .main-slider-two__btn{padding:12px 28px}
  .main-slider-two .hs-arrow{top:34%}

  /* project page heroes */
  .main-slider-three .swiper-slide{height:62vh;height:62svh;min-height:420px}
  .main-slider-three .container{
    height:100%; display:flex; flex-direction:column; justify-content:center;
    padding-top:100px; padding-bottom:40px;
  }
  .main-slider-three__title{margin-top:14px;margin-bottom:12px}
}

/* ── 5. Homepage hero: stronger slow zoom on desktop (fills the 6 s slide) ── */
@media (min-width:992px){
  .main-slider-two .image-layer-two{
    transition:transform 7500ms cubic-bezier(.25,.1,.25,1), opacity 1500ms ease-in;
  }
  .main-slider-two .swiper-slide-active .image-layer-two{transform:scale(1.22)}
}

/* ── 6. Project pages, phones: client logo + project details centred ── */
@media (max-width:767px){
  .opening-hour__inner{align-items:center;text-align:center}
  .opening-hour__left,.opening-hour__right{width:100%;display:flex;justify-content:center}
  .opening-hour__left{margin-bottom:24px}
  .opening-hour__left .icon{display:block;top:0;text-align:center}
  .opening-hour__left .icon img{max-width:min(260px,80vw);max-height:160px;width:auto;height:auto;margin:0 auto;display:block}
  .opening-hour__right ul.opening-hour{margin:0 auto;text-align:center;padding:0}
  .opening-hour__right ul.opening-hour p{display:flex;justify-content:center;align-items:center;gap:8px}
}

/* ── 7. Scroll hint (certificates page): gentle upward bounce on arrival ── */
@keyframes asas-hint-bounce{
  0%{transform:translateY(0)}
  22%{transform:translateY(-48px)}
  42%{transform:translateY(0)}
  60%{transform:translateY(-20px)}
  76%{transform:translateY(0)}
  88%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}
.asas-hint-bounce{animation:asas-hint-bounce 1.7s cubic-bezier(.33,0,.25,1) 1}
@media (prefers-reduced-motion:reduce){.asas-hint-bounce{animation:none}}

/* Project pages: lift the summary box twice as far over the parallax band and leave a
   white strip between it and the before/after section (all project pages) */
.three-points--lifted{margin-top:-120px;padding-bottom:60px}

/* Projects page: scope of work line under each card's location (from the Projects Table, 15 Oct 2026) */
.kp-card__location:has(+ .asas-card-scope){margin-bottom:2px}
.asas-card-scope{font-size:12.5px;color:#243a76;font-weight:600;letter-spacing:.2px;margin:2px 0 14px;line-height:1.4}
.res-card .asas-card-scope{margin-bottom:0}

/* Scope of work line under the location in the homepage hero slides and project page heroes (15 Oct 2026) */
.asas-hero-scope{font-size:15px;line-height:22px;letter-spacing:.14em;margin:12px 0 0;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.main-slider-two__sub-title.asas-hero-scope{margin:4px 0 14px}
.asas-hero-scope i{color:#c8a350;margin-left:4px}
@media (max-width:767px){
  .asas-hero-scope{font-size:12px;line-height:16px;letter-spacing:.1em;margin-top:8px}
  .main-slider-two__sub-title.asas-hero-scope{margin:2px 0 8px}
}

/* About: ASAS Values (from the company profile, 15 Oct 2026) */
.asas-values{padding:100px 0 110px;background:#f7f5f0}
.asas-values .section-title__title{color:#243a76}
.asas-values .section-title{margin-bottom:46px}
.asas-values__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0}
.asas-values__item{background:#fff;border:1px solid #ece6da;border-radius:14px;padding:34px 26px 30px;text-align:center;box-shadow:0 8px 24px rgba(26,22,18,.05);transition:transform .25s,box-shadow .25s}
.asas-values__item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(26,22,18,.09)}
.asas-values__item i{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:#243a76;color:#c8a350;font-size:24px;margin-bottom:18px}
.asas-values__item h3{font-size:20px;margin:0 0 10px;color:#1a1612}
.asas-values__item p{margin:0;font-size:15px;line-height:1.6;color:#5d5850}
@media (max-width:991px){.asas-values__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.asas-values{padding:64px 0 70px}.asas-values__list{grid-template-columns:1fr;gap:14px}.asas-values__item{padding:24px 20px}}

/* Leaders: short bio under each title */
.asas-leader-bio{font-size:14.5px;line-height:1.6;color:#5d5850;margin:12px 0 0}

/* ── Phones (1 Nov 2026): show the whole 16:9 image, full width, no cropping ──
   Hero (home + project pages): image box 16:9 on top, text on navy below it.
   Parallax band: static 16:9 box. Before/after: 16:9 stage. */
@media (max-width:767px){
  .main-slider-two .swiper-slide,
  .main-slider-three .swiper-slide{height:auto;min-height:0;background-color:var(--asas-navy,#243a76);display:flex;flex-direction:column}
  .main-slider-two .image-layer-two,
  .main-slider-three .image-layer-three{
    position:relative;top:auto;left:auto;bottom:auto;right:auto;
    width:100%;height:auto;aspect-ratio:16/9;flex:none;
    background-size:cover;background-position:center;
    transform:none !important;
  }
  .main-slider-two .image-layer-two:before,
  .main-slider-three .image-layer-three:before{display:none}
  .main-slider-two .image-layer-two{margin-top:100px}           /* header sits over the top 100px */
  .main-slider-two .container,
  .main-slider-three .container{height:auto;flex:1 1 auto;justify-content:flex-start;padding-top:22px;padding-bottom:36px}
  .main-slider-two .hs-arrow{top:calc(100px + 28.125vw)}        /* centre of the image */

  .spa-center-two{height:auto;padding:0;margin-top:0;aspect-ratio:16/9}
  .three-points--lifted{margin-top:0}
  .opening-hour{margin-top:-30px;margin-bottom:-30px}                      /* details card also overlaps the parallax image */

  .asas-sr-group .asas-sr--framed{--sr-box:56.25vw;--sr-top:max(84px, calc(50svh - 28.125vw))}  /* pinned in mid-screen */
  .asas-sr-group .asas-sr__label{font-size:9px;padding:4px 8px;letter-spacing:.14em}
  .asas-sr-group .asas-sr .asas-sr__label--before{top:10px;right:10px}
  .asas-sr-group .asas-sr .asas-sr__label--after{bottom:10px;right:10px}
  /* caption under the image, "Scroll to reveal" above it (1 Nov 2026) */
  .asas-sr-group .asas-sr--framed{margin-top:48px;margin-bottom:150px}
  .asas-sr-group .asas-sr--framed .asas-sr__stage{overflow:visible}
  .asas-sr-group .asas-sr .asas-sr__caption,
  .asas-sr-group .asas-sr--framed .asas-sr__caption{top:calc(100% + 16px);bottom:auto;right:16px;left:16px;max-width:none;text-align:right}
  .asas-sr-group .asas-sr__eyebrow{display:block;margin:0 0 4px;font-size:10px;color:#c8a350}
  .asas-sr-group .asas-sr .asas-sr__title{color:#243a76;font-size:22px;line-height:1.25}
  .asas-sr-group .asas-sr__place{font-size:13px;margin:4px 0 0;color:#5b6475}
  .asas-sr-group .asas-sr .asas-sr__cue{top:auto;bottom:calc(100% + 10px);right:0;left:0;transform:none;flex-direction:row;justify-content:center;gap:6px;color:#243a76;font-size:12px}
  .asas-sr-group .asas-sr .asas-sr__cue svg{width:16px;height:16px}
}

/* Hero "Discover more" → #before-after (first before/after pair): land where the reveal starts (1 Nov 2026) */
#before-after{scroll-margin-top:112px}
@media (max-width:767px){#before-after{scroll-margin-top:max(84px, calc(50svh - 28.125vw))}}

/* Project details card: slightly rounded corners, all screens (2 Nov 2026) */
.opening-hour__inner{border-radius:4px}

/* Project hero on phones (2 Nov 2026): name block first, then the 16:9 image, then the button.
   36 px above the name and between the name block and the image (= the old image→name gap);
   button 30 px under the image; 30 px between button and details card (card overlap 30 px stays). */
@media (max-width:767px){
  .main-slider-three .swiper-slide{padding:36px 0 60px}
  .main-slider-three .container,
  .main-slider-three .container > .row,
  .main-slider-three .container > .row > [class*="col-"],
  .main-slider-three__content{display:contents}
  .main-slider-three .main-slider-three__title{order:1;margin:0 15px 12px}
  .main-slider-three .main-slider-three__sub-title{order:2;margin-right:15px;margin-left:15px}
  .main-slider-three .main-slider-three__sub-title:last-of-type{margin-bottom:0}
  .main-slider-three__content > br{display:none}
  .main-slider-three .image-layer-three{order:3;margin-top:36px}
  .main-slider-three .main-slider-three__btn-box{order:4;margin:30px 15px 0;text-align:center}
}

/* Homepage hero on phones (2 Nov 2026): slide text drops in from under the image, not over it */
@media (max-width:767px){
  .main-slider-two .swiper-slide > .container{overflow:hidden}
}

/* Desktop menu 1200–1439 px (2 Nov 2026): the language item (عربي / English) needs room, so the gap between items shrinks */
@media (min-width:1200px) and (max-width:1439px){
  .main-menu .main-menu__list>li+li,
  .stricky-header .main-menu__list>li+li{margin-right:34px}
  .main-menu-two__cart-box a{white-space:nowrap}
}

/* Homepage header (dark/navy background, 2 Nov 2026): menu button white; white headers on other pages keep it navy */
.main-menu-two .mobile-nav__toggler,
.main-menu-two .mobile-nav__toggler:hover{color:#fff}