/* =========================================================
   RUSHD — ABOUT US V2 / NAVY GLASS + KNOWLEDGE WEB
   Scope: /pages/About-us
========================================================= */

body:has(a[href="/pages/About-us"][aria-current="page"]){
  --rushd-navy:#0E1F3D;
  --rushd-navy-deep:#081327;
  --rushd-red:#E43036;
  --rushd-cream:#F7F4EE;
  --rushd-white:#FFFFFF;
  --rushd-text:#F8FAFC;
  --rushd-muted:rgba(248,250,252,.72);
  --rushd-line:rgba(255,255,255,.10);
}

/* =========================
   PAGE CANVAS
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.relative.py-16.bg-white.flex-1{
  position:relative!important;
  padding:72px 18px 110px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 12% 18%,rgba(228,48,54,.13),transparent 24%),
    radial-gradient(circle at 88% 82%,rgba(14,31,61,.18),transparent 30%),
    linear-gradient(135deg,#F7F4EE 0%,#FFFFFF 48%,#F7F4EE 100%)!important;
}

/* Knowledge Web / geometric field */
body:has(a[href="/pages/About-us"][aria-current="page"])
.relative.py-16.bg-white.flex-1::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.55;
  background:
    radial-gradient(circle at 14% 18%,rgba(228,48,54,.14) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 22%,rgba(14,31,61,.14) 0 2px,transparent 3px),
    radial-gradient(circle at 28% 74%,rgba(14,31,61,.10) 0 2px,transparent 3px),
    linear-gradient(32deg,transparent 48.8%,rgba(14,31,61,.07) 49.2%,rgba(14,31,61,.07) 49.8%,transparent 50.2%) 0 0/150px 150px,
    linear-gradient(-32deg,transparent 48.8%,rgba(228,48,54,.06) 49.2%,rgba(228,48,54,.06) 49.8%,transparent 50.2%) 0 0/150px 150px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.5) 65%,transparent);
}

/* subtle top-right web arc */
body:has(a[href="/pages/About-us"][aria-current="page"])
.relative.py-16.bg-white.flex-1::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-110px;
  width:430px;
  height:430px;
  border-radius:50%;
  pointer-events:none;
  opacity:.16;
  background:
    repeating-radial-gradient(circle at center,transparent 0 26px,rgba(14,31,61,.22) 27px 28px,transparent 29px 52px),
    conic-gradient(from 0deg,rgba(14,31,61,.22) 0 1deg,transparent 1deg 29deg,rgba(14,31,61,.22) 29deg 30deg,transparent 30deg 59deg,rgba(14,31,61,.22) 59deg 60deg,transparent 60deg 89deg,rgba(14,31,61,.22) 89deg 90deg,transparent 90deg 119deg,rgba(14,31,61,.22) 119deg 120deg,transparent 120deg 149deg,rgba(14,31,61,.22) 149deg 150deg,transparent 150deg 179deg,rgba(14,31,61,.22) 179deg 180deg,transparent 180deg 209deg,rgba(14,31,61,.22) 209deg 210deg,transparent 210deg 239deg,rgba(14,31,61,.22) 239deg 240deg,transparent 240deg 269deg,rgba(14,31,61,.22) 269deg 270deg,transparent 270deg 299deg,rgba(14,31,61,.22) 299deg 300deg,transparent 300deg 329deg,rgba(14,31,61,.22) 329deg 330deg,transparent 330deg);
}

/* =========================
   REMOVE DEFAULT TITLE
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.text-lg.max-w-prose.mx-auto{
  display:none!important;
}

/* =========================
   CONTENT WRAPPER
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.content_container.page_content{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:0!important;
  color:inherit!important;
}

/* =========================
   MAIN GLASS PANEL
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor{
  position:relative!important;
  width:100%!important;
  padding:clamp(56px,6vw,92px) clamp(30px,6vw,86px)!important;
  overflow:hidden!important;
  direction:rtl!important;
  text-align:right!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:32px!important;
  background:
    linear-gradient(145deg,rgba(14,31,61,.90),rgba(8,19,39,.82))!important;
  box-shadow:
    0 36px 100px rgba(8,19,39,.28),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.025)!important;
  backdrop-filter:blur(28px) saturate(1.22)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.22)!important;
  isolation:isolate!important;
}

/* inner glow + web detail */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 16%,rgba(228,48,54,.18),transparent 24%),
    radial-gradient(circle at 84% 78%,rgba(255,255,255,.06),transparent 28%),
    repeating-radial-gradient(circle at 86% 18%,transparent 0 38px,rgba(255,255,255,.035) 39px 40px,transparent 41px 76px);
}

/* centered logo watermark */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:min(44vw,500px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background-image:url("https://files.easy-orders.net/1787323227466440695.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.07;
  filter:grayscale(1) brightness(2.5) contrast(.85);
  pointer-events:none;
}

/* =========================
   MAIN TITLE
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h2:first-child{
  position:relative!important;
  width:fit-content!important;
  margin:0 0 clamp(36px,4vw,56px) auto!important;
  padding:0 22px 18px 0!important;
  color:#fff!important;
  font-size:clamp(42px,5vw,72px)!important;
  font-weight:800!important;
  line-height:1.06!important;
  letter-spacing:-.055em!important;
  text-shadow:0 12px 40px rgba(0,0,0,.18)!important;
}

body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h2:first-child::before{
  content:"";
  position:absolute;
  right:0;
  top:8%;
  width:8px;
  height:84%;
  border-radius:999px;
  background:var(--rushd-red);
  box-shadow:0 0 24px rgba(228,48,54,.38);
}

body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h2:first-child::after{
  content:"RUSHD — KNOWLEDGE WEB";
  position:absolute;
  right:22px;
  bottom:-6px;
  color:rgba(255,255,255,.48);
  font-size:8px;
  font-weight:800;
  letter-spacing:.28em;
  direction:ltr;
}

/* =========================
   BODY COPY
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > p{
  position:relative!important;
  max-width:1020px!important;
  margin:0 0 22px auto!important;
  color:var(--rushd-text)!important;
  font-size:clamp(15px,1.3vw,19px)!important;
  font-weight:500!important;
  line-height:2.15!important;
  letter-spacing:0!important;
}

/* =========================
   FEATURE BLOCK
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:first-of-type{
  position:relative!important;
  margin:clamp(44px,5vw,66px) 0 16px!important;
  padding:24px 28px 24px 72px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:20px!important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.08),rgba(255,255,255,.035))!important;
  color:#fff!important;
  font-size:clamp(22px,2.4vw,31px)!important;
  font-weight:800!important;
  line-height:1.5!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.08)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}

body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:first-of-type::before{
  content:"";
  position:absolute;
  left:22px;
  top:50%;
  width:34px;
  height:34px;
  transform:translateY(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,var(--rushd-red) 0 24%,transparent 25%),
    conic-gradient(from 0deg,var(--rushd-red),transparent 24%,var(--rushd-red) 42%,transparent 63%,var(--rushd-red));
  box-shadow:0 0 0 8px rgba(228,48,54,.10),0 0 24px rgba(228,48,54,.22);
}

/* supporting text below feature */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:first-of-type + p{
  color:var(--rushd-muted)!important;
}

/* =========================
   SECTION TITLES
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:not(:first-of-type){
  position:relative!important;
  width:fit-content!important;
  margin:clamp(52px,6vw,78px) 0 26px!important;
  padding:0 20px 14px 0!important;
  color:#fff!important;
  font-size:clamp(27px,3vw,40px)!important;
  font-weight:800!important;
  line-height:1.2!important;
}

body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:not(:first-of-type)::before{
  content:"";
  position:absolute;
  right:0;
  top:4px;
  width:7px;
  height:34px;
  border-radius:999px;
  background:var(--rushd-red);
}

body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:not(:first-of-type)::after{
  content:"";
  position:absolute;
  right:20px;
  bottom:0;
  width:72px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--rushd-red),rgba(255,255,255,.32));
}

/* =========================
   STRONG
========================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor strong{
  color:#fff!important;
  font-weight:800!important;
}

/* Vision/Mission glass cards */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:nth-of-type(2) + p,
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:nth-of-type(2) + p + p{
  padding:20px 22px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.055)!important;
  color:var(--rushd-text)!important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    inset 0 1px rgba(255,255,255,.06)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}

/* Values */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor > h3:last-of-type + p{
  padding:22px 24px!important;
  border:1px solid rgba(228,48,54,.18)!important;
  border-radius:17px!important;
  background:
    linear-gradient(110deg,rgba(228,48,54,.11),rgba(255,255,255,.04))!important;
  color:#fff!important;
  font-weight:700!important;
}

/* =========================
   CORNER ACCENTS
========================= */
@media(min-width:992px){
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content::after{
    content:"";
    position:absolute;
    z-index:5;
    pointer-events:none;
    width:92px;
    height:92px;
    left:-12px;
    bottom:-12px;
    border-left:4px solid rgba(14,31,61,.92);
    border-bottom:4px solid rgba(14,31,61,.92);
    border-radius:0 0 0 24px;
  }
}

/* =========================
   TABLET
========================= */
@media(max-width:991px){
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .relative.py-16.bg-white.flex-1{
    padding:44px 14px 76px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor{
    padding:48px 28px 56px!important;
    border-radius:24px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor::after{
    width:64vw;
    opacity:.055;
  }
}

/* =========================
   MOBILE
========================= */
@media(max-width:600px){
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .relative.py-16.bg-white.flex-1{
    padding:28px 10px 58px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .relative.px-4.sm\:px-6.h-full{
    padding-left:0!important;
    padding-right:0!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor{
    padding:40px 20px 46px!important;
    border-radius:20px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor::after{
    width:86vw;
    opacity:.045;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h2:first-child{
    font-size:38px!important;
    padding-right:18px!important;
    margin-bottom:34px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > p{
    font-size:14px!important;
    line-height:2!important;
    margin-bottom:18px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:first-of-type{
    padding:20px 18px!important;
    border-radius:16px!important;
    font-size:20px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:first-of-type::before{
    display:none;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:not(:first-of-type){
    margin-top:44px!important;
    font-size:26px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:nth-of-type(2) + p,
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:nth-of-type(2) + p + p,
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:last-of-type + p{
    padding:17px!important;
    border-radius:14px!important;
  }
}


/* =========================================================
   RUSHD — HANGING CHARACTER BACKGROUND ENGRAVING
   Low-opacity decorative element behind the About card
========================================================= */

/* Use the page-content wrapper as the positioning context */
body:has(a[href="/pages/About-us"][aria-current="page"])
.content_container.page_content{
  overflow:visible!important;
}

/* Hanging figure, visually engraved into the background */
body:has(a[href="/pages/About-us"][aria-current="page"])
.content_container.page_content::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-118px;
  left:-72px;

  width:clamp(255px,20vw,345px);
  aspect-ratio:450/715;

  background-image:
    url("https://pub-27a29e6a42454b55b59455426e8f833f.r2.dev/pngegg.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:contain;

  opacity:.075;

  filter:
    grayscale(1)
    sepia(.18)
    hue-rotate(165deg)
    saturate(.7)
    brightness(.78)
    contrast(.92);

  mix-blend-mode:multiply;

  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;

  transform:
    rotate(-2deg)
    translateZ(0);

  transform-origin:top center;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.92) 66%,
      rgba(0,0,0,.56) 84%,
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.92) 66%,
      rgba(0,0,0,.56) 84%,
      transparent 100%
    );
}

/* A very soft web-line hanging cue above the figure */
body:has(a[href="/pages/About-us"][aria-current="page"])
.relative.py-16.bg-white.flex-1 > .relative.px-4.sm\:px-6.h-full::before{
  content:"";
  position:absolute;
  z-index:1;

  left:clamp(98px,10.2vw,190px);
  top:-72px;

  width:1.5px;
  height:145px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(14,31,61,.16) 20%,
      rgba(14,31,61,.10) 78%,
      transparent
    );

  box-shadow:
    0 0 10px rgba(14,31,61,.045);

  pointer-events:none;
}

/* Keep the card in front of the decorative figure */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor{
  z-index:2!important;
}

/* =========================================================
   MOBILE / TABLET CHARACTER SCALE
========================================================= */

@media(max-width:991px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content::before{
    top:-82px;
    left:-52px;
    width:clamp(205px,28vw,270px);
    opacity:.06;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .relative.py-16.bg-white.flex-1 > .relative.px-4.sm\:px-6.h-full::before{
    left:74px;
    top:-46px;
    height:105px;
    opacity:.7;
  }
}

@media(max-width:600px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content::before{
    top:-48px;
    left:-38px;

    width:172px;

    opacity:.045;

    filter:
      grayscale(1)
      sepia(.12)
      hue-rotate(165deg)
      saturate(.55)
      brightness(.78)
      contrast(.9);
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .relative.py-16.bg-white.flex-1 > .relative.px-4.sm\:px-6.h-full::before{
    left:44px;
    top:-30px;
    height:72px;
    opacity:.5;
  }
}

/* =========================================================
   FIX V3 — CHARACTER MUST BE VISIBLE INSIDE THE NAVY GLASS
========================================================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor{
  background-image:
    linear-gradient(145deg,rgba(14,31,61,.88),rgba(8,19,39,.82)),
    url("https://pub-27a29e6a42454b55b59455426e8f833f.r2.dev/pngegg.png") !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:center center,left -18px top -72px !important;
  background-size:cover,clamp(250px,21vw,360px) auto !important;
  background-blend-mode:normal,soft-light !important;
}

/* keep the hero-like engraved character readable but subtle */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor::before{
  background:
    radial-gradient(circle at 16% 16%,rgba(228,48,54,.15),transparent 24%),
    radial-gradient(circle at 84% 78%,rgba(255,255,255,.05),transparent 28%),
    repeating-radial-gradient(circle at 86% 18%,transparent 0 38px,rgba(255,255,255,.035) 39px 40px,transparent 41px 76px) !important;
}

/* disable the old hidden outside-card character pseudo */
body:has(a[href="/pages/About-us"][aria-current="page"])
.content_container.page_content::before{
  content:none !important;
  display:none !important;
}

@media(max-width:991px){
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor{
    background-position:center center,left -28px top -52px !important;
    background-size:cover,230px auto !important;
  }
}

@media(max-width:600px){
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor{
    background-position:center center,left -42px top -28px !important;
    background-size:cover,170px auto !important;
    background-blend-mode:normal,soft-light !important;
  }
}


/* =========================================================
   RUSHD — SECOND CHARACTER / RIGHT EDGE PEEK
   Keeps the existing hanging character.
   This character sits BEHIND the navy card and peeks out
   from the card's RIGHT edge.
========================================================= */

body:has(a[href="/pages/About-us"][aria-current="page"])
.content_container.page_content{
  position:relative!important;
  overflow:visible!important;
}

/* second character */
body:has(a[href="/pages/About-us"][aria-current="page"])
.content_container.page_content::after{
  content:""!important;

  position:absolute!important;
  z-index:1!important;

  /*
    SOURCE IMAGE: 1211 × 1299
    The vertical grip / finger line is around x ≈ 295px,
    i.e. ~24.4% from the left edge.
    So the card edge must cut the artwork at that exact visual axis.
  */
  top:clamp(54px,5.4vw,92px)!important;
  right:clamp(-276px,-15.8vw,-193px)!important;

  width:clamp(255px,22vw,365px)!important;
  height:auto!important;
  aspect-ratio:1211 / 1299!important;

  background-image:
    url("https://pub-7889520750c84b89bce6881040c66d3a.r2.dev/menu-frame.webp")!important;

  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;

  border:0!important;
  border-radius:0!important;

  opacity:.94!important;

  filter:
    drop-shadow(0 22px 30px rgba(8,19,39,.20))
    drop-shadow(0 6px 12px rgba(228,48,54,.08))!important;

  transform:
    rotate(-0.35deg)
    translateZ(0)!important;

  transform-origin:center center!important;

  pointer-events:none!important;
  user-select:none!important;

  /* no old decorative-corner styling */
  left:auto!important;
  bottom:auto!important;
}

/* card stays in front, which hides the character's inner half */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor{
  position:relative!important;
  z-index:2!important;
}


/* Tablet */
@media(max-width:991px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content::after{
    top:58px!important;
    right:-204px!important;
    width:270px!important;
    opacity:.92!important;
  }
}


/* Mobile — tiny character peeking from behind the TOP edge */
@media(max-width:600px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content::after{
    content:""!important;

    position:absolute!important;
    z-index:1!important;

    /* keep character upright and let only the upper part peek out */
    top:-67px!important;
    right:8px!important;
    left:auto!important;
    bottom:auto!important;

    width:130px!important;
    height:auto!important;
    aspect-ratio:1211 / 1299!important;

    background-image:
      url("https://pub-7889520750c84b89bce6881040c66d3a.r2.dev/menu-frame.webp")!important;

    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:contain!important;

    transform:none!important;
    transform-origin:center center!important;

    opacity:1!important;

    filter:
      drop-shadow(0 8px 14px rgba(8,19,39,.22))!important;

    pointer-events:none!important;
    user-select:none!important;
  }

  /* card stays in front, hiding the lower part of the character */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor{
    position:relative!important;
    z-index:2!important;
  }
}


/* =========================================================
   RIGHT-EDGE GRIP CONTACT
   Small shadow on the card edge makes the fingers read as physically
   wrapped around the panel instead of simply floating beside it.
========================================================= */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor{
  overflow:hidden!important;
}

body:has(a[href="/pages/About-us"][aria-current="page"])
.content_container.page_content{
  isolation:isolate!important;
}

/* tiny depth shadow along the exact right edge behind the hands */
body:has(a[href="/pages/About-us"][aria-current="page"])
.page_content .ql-editor{
  box-shadow:
    0 36px 100px rgba(8,19,39,.28),
    8px 0 18px rgba(8,19,39,.10),
    inset -1px 0 rgba(255,255,255,.06),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.025)!important;
}


/* =========================================================
   MOBILE FINAL ONLY
   - Hide the peeking child on phones only
   - Shorten the About card by showing only the intro copy
   - Leave breathing room before the footer
   Desktop / tablet remain unchanged
========================================================= */
@media(max-width:600px){

  /* Hide ONLY the second peeking child on phone */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content::after{
    content:none!important;
    display:none!important;
    background-image:none!important;
  }

  /* More compact page spacing + visible gap before footer */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .relative.py-16.bg-white.flex-1{
    padding:22px 10px 38px!important;
  }

  /* Shorter card */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor{
    padding:30px 18px 30px!important;
    border-radius:20px!important;
  }

  /* Compact title */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h2:first-child{
    font-size:34px!important;
    margin-bottom:26px!important;
    padding-bottom:14px!important;
  }

  /* Compact intro copy */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > p{
    font-size:13px!important;
    line-height:1.85!important;
    margin-bottom:14px!important;
  }

  /* MOBILE COPY SHORTENING:
     Keep only the first two intro paragraphs.
     Hide the rest of the long sections on phone only. */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3,
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3 ~ p{
    display:none!important;
  }

  /* Small clean gap under the card before footer */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content{
    margin-bottom:0!important;
  }
}


/* =========================================================
   MOBILE ONLY — RUSHD HERO LIFTING THE CARD FROM BELOW
   Source artwork: 1319 × 1192
   Keep the character upright. Hands sit near the top edge
   of the artwork, so the image is positioned just below the
   card with a small negative overlap.
========================================================= */
@media(max-width:600px){

  /* Allow the character to extend below the card */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content{
    position:relative!important;
    overflow:visible!important;
    isolation:isolate!important;
  }

  /* New mobile character */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content::after{
    content:""!important;
    display:block!important;

    position:absolute!important;
    z-index:1!important;

    /* Centered under the card */
    left:50%!important;
    right:auto!important;
    top:100%!important;
    bottom:auto!important;

    /* Small overlap so the palms visually touch the card */
    margin-top:-26px!important;

    /* Studied from 1319 × 1192 source ratio */
    width:188px!important;
    height:auto!important;
    aspect-ratio:1319 / 1192!important;

    background-image:
      url("https://pub-7889520750c84b89bce6881040c66d3a.r2.dev/ChatGPT%20Image%2027%20%D8%A3%D8%BA%D8%B3%D8%B7%D8%B3%202026%D8%8C%2010_32_13%20%D9%85.webp")!important;

    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:contain!important;

    transform:translateX(-50%)!important;
    transform-origin:center top!important;

    opacity:1!important;

    filter:
      drop-shadow(0 10px 18px rgba(8,19,39,.22))
      drop-shadow(0 3px 8px rgba(228,48,54,.10))!important;

    pointer-events:none!important;
    user-select:none!important;
  }

  /* Keep the navy card in front of the torso,
     while the hands visually meet its lower edge */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor{
    position:relative!important;
    z-index:2!important;
  }

  /* Reserve enough room for the character before the footer */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .relative.py-16.bg-white.flex-1{
    padding-bottom:190px!important;
  }
}


/* =========================================================
   MOBILE HERO FIT V2 — FULL IMAGE ENDS AT THE FOOTER
   Source: 1319 × 1192  =>  height = 0.9037 × rendered width
   The palms sit close to the upper part of the artwork, so we keep
   a ~26px overlap with the card. The page bottom space is then
   calculated from the rendered image height so the artwork is NOT cut.
========================================================= */
@media(max-width:600px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .content_container.page_content::after{
    /* Bigger: nearly the full mobile card width */
    width:clamp(260px,92vw,320px)!important;
    height:auto!important;
    aspect-ratio:1319 / 1192!important;

    left:50%!important;
    right:auto!important;
    top:100%!important;
    bottom:auto!important;

    /* Hands meet the underside of the card */
    margin-top:-26px!important;

    transform:translateX(-50%)!important;
    transform-origin:center top!important;

    background-position:center top!important;
    background-size:100% 100%!important;
  }

  /*
    92vw × (1192/1319) = ~83.15vw image height.
    Subtract the 26px overlap.
    This reserves exactly the visible image height below the card,
    so the LAST pixel of the character reaches the footer.
  */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .relative.py-16.bg-white.flex-1{
    padding-bottom:clamp(210px,calc(83.15vw - 24px),266px)!important;
    overflow:hidden!important;
  }
}


/* =========================================================
   FEATURE BLOCK — LIGHTNING CAR ART
   Source image measured: 2048 × 1216
   Visible artwork bbox: x 90–1961 / y 66–1163
   => only ~4–5% transparent margin around the car.
   Place it on the LEFT side of:
   "كتب تعليمية مبتكرة، وسائل تعلم تفاعلية"
========================================================= */

@media(min-width:601px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:first-of-type{
    position:relative!important;
    overflow:visible!important;

    /* reserve a clean visual column for the car */
    padding-left:clamp(220px,24vw,330px)!important;
    min-height:150px!important;

    display:flex!important;
    align-items:center!important;
  }

  /* remove the old small circular ornament from this block */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:first-of-type::before{
    display:none!important;
  }

  /* the car */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:first-of-type::after{
    content:""!important;
    position:absolute!important;
    z-index:3!important;

    left:clamp(-18px,-1vw,-6px)!important;
    bottom:-10px!important;

    width:clamp(205px,23vw,315px)!important;
    aspect-ratio:2048 / 1216!important;

    background-image:
      url("https://pub-7889520750c84b89bce6881040c66d3a.r2.dev/br2.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:contain!important;

    pointer-events:none!important;
    user-select:none!important;

    filter:
      drop-shadow(0 18px 24px rgba(0,0,0,.22))
      drop-shadow(0 5px 10px rgba(228,48,54,.10))!important;

    transform:rotate(-1.2deg) translateZ(0)!important;
    transform-origin:center bottom!important;
  }
}

/* tablet: keep it balanced without stealing text width */
@media(min-width:601px) and (max-width:991px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:first-of-type{
    padding-left:190px!important;
    min-height:128px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:first-of-type::after{
    left:-8px!important;
    bottom:-4px!important;
    width:190px!important;
  }
}

/* Mobile stays exactly as your current compact version */
@media(max-width:600px){
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3:first-of-type::after{
    content:none!important;
    display:none!important;
  }
}


/* =========================================================
   MOBILE ONLY — SECOND INTRO PARAGRAPH AS FEATURE CARD
   + LIGHTNING CAR ABOVE IT
   Target paragraph:
   "نحن لا نقدم كتبًا فقط..."
========================================================= */
@media(max-width:600px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > p:nth-of-type(2){
    position:relative!important;

    /* reserve space for the car above the text */
    padding:76px 16px 16px!important;
    margin:56px 0 10px!important;

    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:18px!important;

    background:
      linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;

    box-shadow:
      0 16px 34px rgba(0,0,0,.14),
      inset 0 1px rgba(255,255,255,.07)!important;

    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;

    color:#fff!important;
    overflow:visible!important;
  }

  /* Lightning car sitting above the paragraph card */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > p:nth-of-type(2)::before{
    content:""!important;

    position:absolute!important;
    z-index:3!important;

    left:50%!important;
    top:-62px!important;

    width:178px!important;
    aspect-ratio:2048 / 1216!important;

    background-image:
      url("https://pub-7889520750c84b89bce6881040c66d3a.r2.dev/br2.webp")!important;

    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:contain!important;

    transform:translateX(-50%) rotate(-1deg)!important;
    transform-origin:center bottom!important;

    filter:
      drop-shadow(0 12px 18px rgba(0,0,0,.22))
      drop-shadow(0 3px 7px rgba(228,48,54,.10))!important;

    pointer-events:none!important;
    user-select:none!important;
  }

  /* subtle red anchor line under the car */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > p:nth-of-type(2)::after{
    content:""!important;
    position:absolute!important;
    top:9px!important;
    left:50%!important;

    width:54px!important;
    height:3px!important;

    transform:translateX(-50%)!important;
    border-radius:99px!important;

    background:linear-gradient(
      90deg,
      transparent,
      #E43036 24%,
      #E43036 76%,
      transparent
    )!important;

    box-shadow:0 0 14px rgba(228,48,54,.28)!important;
  }
}

/* =========================================================
   MOBILE FULL CONTENT — MATCH DESKTOP CONTENT VISIBILITY
   Show all About Us headings and paragraphs on phones.
========================================================= */
@media(max-width:600px){

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3,
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3 ~ p{
    display:block!important;
  }

  /* Keep section spacing readable on mobile */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3{
    margin-top:38px!important;
  }

  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor > h3 + p{
    margin-bottom:16px!important;
  }

  /* Ensure the full card can grow naturally with all text visible */
  body:has(a[href="/pages/About-us"][aria-current="page"])
  .page_content .ql-editor{
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
  }
}