/* Overrides on top of the Webflow export. Loaded after rights-hdg-stg.webflow.css. */

/* ---------- Desktop navbar ---------- */
.navbar-wrapper {
  height: 64px;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-wrapper .div-block {
  /* leave room at the left end for the language switcher */
  padding-left: 72px;
}

.navbar-wrapper .links-div {
  gap: 2rem;
}

.navbar-wrapper .link,
.navbar-wrapper .link:lang(ar),
.navbar-wrapper .link.w--current,
.navbar-wrapper .link.w--current:lang(ar) {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 400;
  white-space: nowrap;
  transition: color .2s ease;
}

.navbar-wrapper .logo-rights {
  width: 110px;
}

/* Arabic hero slogan (typed by js/typewriter.js) */
.slogan-text.is-ar {
  font-family: Beiruti, Arial, sans-serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1.5;
  letter-spacing: 0;
}

@media screen and (max-width: 991px) {
  .slogan-text.is-ar {
    font-size: 28px;
  }
}

@media screen and (max-width: 479px) {
  .slogan-text.is-ar {
    font-size: 24px;
  }
}

/* ---------- Language switcher ---------- */
.local-div,
.local-div:lang(ar-sa),
.local-div:lang(en-us),
.local-div.is-special {
  inset: 0 auto auto 2.5%;
  width: auto;
  height: 64px;
  justify-content: center;
}

.local-div .image-26 {
  display: none;
}

.local-link {
  border: 1px solid var(--color);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .04em;
  transition: background-color .2s ease, color .2s ease;
}

.local-link:hover {
  background-color: var(--color);
  color: var(--c1);
}

@media screen and (max-width: 1100px) {
  .navbar-wrapper .links-div {
    gap: 1.25rem;
  }
  .navbar-wrapper .link,
  .navbar-wrapper .link:lang(ar) {
    font-size: 1rem;
  }
}

/* English (LTR): the switcher sits at the other end of the bar */
[dir="ltr"] .navbar-wrapper .div-block {
  padding-left: 0;
  padding-right: 72px;
}

[dir="ltr"] .local-div,
[dir="ltr"] .local-div:lang(en-us),
[dir="ltr"] .local-div.is-special {
  inset: 0 2.5% auto auto;
}

/* ---------- Mobile (desktop navbar hidden below 992px) ---------- */
@media screen and (max-width: 991px) {
  /* fixed bar height instead of %-of-width padding, so the icon stays put */
  .nav-23wrap {
    height: 60px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* sits just after the hamburger (bar has 4% side padding, icon is 28px) */
  .local-div,
  .local-div:lang(ar-sa),
  .local-div:lang(en-us),
  .local-div.is-special {
    inset: 0 auto auto calc(4% + 40px);
    width: auto;
    height: 60px;
  }

  .local-link {
    padding: 3px 10px;
    font-size: 12px;
  }

  /* LTR: hamburger is on the right, so the switcher sits just left of it */
  [dir="ltr"] .local-div,
  [dir="ltr"] .local-div:lang(en-us),
  [dir="ltr"] .local-div.is-special {
    inset: 0 calc(4% + 40px) auto auto;
  }
}

/* ---------- Seal loader (js/loader.js, homepage only) ---------- */
html {
  background-color: #051332;
}

#rl-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, #0d2e4c 0%, #051332 75%);
  transition: opacity .8s ease, visibility .8s ease;
}

#rl-loader.rl-out {
  opacity: 0;
  visibility: hidden;
}

/* ---------- star-scale loader (homepage + services page): the hero's golden scale, drawn star by star, then the logo ---------- */
#rl-loader .ld { width: min(62vw, 280px); display: grid; justify-items: center; gap: 18px; transition: transform .8s ease; }
#rl-loader.rl-out .ld { transform: scale(1.08); }
.ld svg { width: 100%; overflow: visible; }
.ld-lines line { stroke: var(--gold, #d4af37); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ld-draw .45s calc(.35s + var(--i) * .09s) ease-out forwards; }
.ld-stars g { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ld-pop .4s calc(.15s + var(--i) * .08s) cubic-bezier(.2, .8, .3, 1.4) forwards; }
.ld-stars .star { fill: #d4af37; }
.ld-stars .halo { fill: rgba(212, 175, 55, .18); }
.ld img { width: 62%; opacity: 0; transform: translateY(6px); animation: ld-logo .7s 1.75s ease-out forwards; }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes ld-logo { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ld-lines line, .ld-stars g, .ld img { animation-duration: .01ms; animation-delay: 0s; } }


/* ---------- Hero slogan typewriter (js/typewriter.js) ---------- */
/* each line: an invisible full copy holds the final size/position, the
   typed text sits on top of it starting from the line's start edge */
.tw-line {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.tw-ghost {
  color: transparent; /* still read by screen readers */
}

.tw-live {
  position: absolute;
  inset: 0;
  text-align: start;
}

/* ---------- Homepage hero: scales photo + WebGL base lights (js/hero-lights.js) ---------- */
/* .hero-scene keeps the photo's aspect ratio so the shader's coordinates
   match the image at any screen size. */
.background-texture.is-style2.is-home,
.background-texture.is-style2.is-home:lang(en-us) {
  opacity: 1;
  background: var(--c1);
  overflow: hidden;
}

.hero-scene {
  position: absolute;
  left: 50%;
  top: 60%;
  width: max(100vw, 100vh * 1.784); /* 2000 / 1121 */
  aspect-ratio: 2000 / 1121;
  transform: translate(-50%, -60%);
}

.hero-scene__img,
.hero-scene__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-scene__img {
  opacity: .5;
}

.hero-scene__gl {
  opacity: 0;
  transition: opacity .4s ease;
}

.hero-scene.is-gl .hero-scene__gl {
  opacity: 1;
}

.hero-scene.is-gl .hero-scene__img {
  visibility: hidden;
}

.hero-backdrop {
  display: none;
}

/* Phone/tablet: readable scale in the middle, blurred copy filling the full height */
@media screen and (max-width: 991px) {
  .hero-backdrop {
    display: block;
    position: absolute;
    inset: -40px;
    background: url('../images/digital-scales-justice-dark-background-concept-justice-law-p-800.webp') 50% 70% / cover no-repeat;
    filter: blur(22px) saturate(1.2);
    opacity: .45;
  }

  .hero-scene {
    top: 58%;
    width: 175vw;
    transform: translate(-50%, -50%);
    -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
    mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
  }

  .hero-scene__img {
    opacity: .7;
  }
}

/* ---------- Phones: slogan above RIGHTS ---------- */
/* Centred between the navbar (60px) and the top of the scale photo.
   The photo's top edge is 58vh - half its height (175vw / 1.784 / 2 = 49.05vw);
   see .hero-scene in the ≤991px block above. */
@media screen and (max-width: 767px) {
  .slogan_div {
    inset: 60px 0 auto 0;
    height: max(90px, calc(58vh - 49.05vw - 60px));
    align-items: center;
  }

  .slogan-text {
    margin-bottom: 0;
  }
}

/* ---------- Chat: tappable answers (js/chat.js) ---------- */
#rights-chat-messages .rc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}

#rights-chat-messages .rc-option {
  padding: 7px 14px;
  border: 1px solid #c9a84c;
  border-radius: 999px;
  background: #fff;
  color: #1a1a2e;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

#rights-chat-messages .rc-option:hover,
#rights-chat-messages .rc-option:focus-visible {
  background: #c9a84c;
  color: #1a1a2e;
  outline: none;
}

#rights-chat-messages .rc-dashboard {
  display: inline-block;
  align-self: flex-start;
  margin: 4px 0 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #c9a84c;
  color: #1a1a2e;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
#rights-chat-messages .rc-dashboard:hover { background: #d8bb64; }

/* ---------- Homepage: sections on hold ---------- */
/* Hidden (not deleted) until the client decides: main legal offers, fixed packages, footer.
   To bring them back, remove the rl-on-hold class from them in index.html and delete the
   height rule below. */
.rl-on-hold {
  display: none !important;
}

/* With nothing after it, end the page exactly where the circle has filled the screen with
   the slider (the circle animation's "full" point is at 140% of the screen height). */
.sticky-circle_wrap {
  height: 240vh;
}

/* ---------- Phone side menu (js/site-menu.js), same look as the client dashboard ---------- */
.has-site-menu .nav-23wrap .mobile-nav-icon,
.has-site-menu .hamburger-menu-section {
  display: none !important;
}

.site-menu-btn {
  display: grid;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 9px 7px;
  border: 1px solid rgba(201, 168, 76, .6);
  border-radius: 10px;
  background: rgba(5, 19, 50, .35);
  cursor: pointer;
}
.site-menu-btn span { display: block; height: 2px; border-radius: 2px; background: #c9a84c; }

.sm-backdrop[hidden], .sm-panel[hidden] { display: none !important; }
.sm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(5, 19, 50, .5);
}
.sm-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 100002;
  width: min(300px, 84vw);
  padding: max(20px, env(safe-area-inset-top)) 16px 24px;
  overflow-y: auto;
  background: #051332;
  color: #fff;
  font-family: Beiruti, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  animation: sm-in .22s ease;
}
.sm-panel[dir="rtl"] { --sm-from: -100%; }   /* opens on the side of the menu button: left in Arabic */
.sm-panel[dir="ltr"] { --sm-from: 100%; font-family: Inter, Arial, sans-serif; } /* right in English */
@keyframes sm-in { from { transform: translateX(var(--sm-from, 100%)); } to { transform: none; } }
.sm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sm-head img { height: 20px; width: auto; }
.sm-close { border: 0; background: transparent; color: #c9a84c; font-size: 28px; line-height: 1; cursor: pointer; }
.sm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
}
.sm-panel[dir="ltr"] .sm-item { font-size: 15px; }
.sm-item:hover, .sm-item:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.sm-item.is-current { color: #c9a84c; }
.sm-ico { flex: none; width: 30px; text-align: center; color: #c9a84c; white-space: nowrap; }
.sm-sep { height: 1px; margin: 8px 0; background: rgba(255, 255, 255, .12); }

/* ---------- About page (من نحن) ---------- */
.about {
  --ab-navy: #051332;
  --ab-navy-2: #0d2e4c;
  --ab-blue: #164a72;
  --ab-gold: #c9a84c;
  --ab-text: #e8eef6;
  --ab-muted: #a9b8cc;
  display: block;
  background: linear-gradient(180deg, var(--ab-navy) 0%, #071a3d 100%);
  color: var(--ab-text);
  font-family: Beiruti, Arial, sans-serif;
  overflow: hidden;
}
html[lang="en-US"] .about { font-family: Inter, Arial, sans-serif; }
.ab-wrap { width: min(1120px, 100% - 48px); margin: 0 auto; }
.about p { margin: 0 0 14px; font-size: 18px; line-height: 1.75; color: var(--ab-text); }
html[lang="en-US"] .about p { font-size: 16px; line-height: 1.7; }

/* intro */
.ab-hero { position: relative; padding: 140px 0 72px; }
.ab-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 85% 30%, rgba(22, 74, 114, .55), transparent 70%);
  pointer-events: none;
}
.ab-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.ab-title { margin: 0; font-size: clamp(40px, 6vw, 64px); line-height: 1.1; font-weight: 700; color: #fff; }
.ab-rule { display: block; width: 72px; height: 3px; margin: 22px 0 26px; border-radius: 3px; background: var(--ab-gold); }
.about .ab-lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.8; color: #f2f5fa; }
.ab-hero-media { position: relative; }
.ab-hero-media img {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(201, 168, 76, .25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

/* sections */
.ab-section { padding: 72px 0; }
.ab-alt { background: rgba(13, 46, 76, .45); border-block: 1px solid rgba(255, 255, 255, .06); }
.ab-h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.ab-h2::after { content: ''; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--ab-gold); }
.about .ab-intro { max-width: 860px; margin-bottom: 30px; font-size: clamp(18px, 1.5vw, 21px); color: var(--ab-muted); }

/* who we are */
.ab-two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.ab-quote { position: relative; border-radius: 24px; overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; }
.ab-quote img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-quote::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 19, 50, .05) 0%, rgba(5, 19, 50, .55) 45%, rgba(5, 19, 50, .96) 80%); }
.ab-quote-text {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 28px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
  border-inline-start: 4px solid var(--ab-gold);
}

/* cards */
.ab-grid { display: grid; gap: 20px; }
.ab-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ab-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ab-card {
  position: relative;
  padding: 26px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 74, 114, .35), rgba(13, 46, 76, .35));
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .25s ease, transform .25s ease;
}
.ab-card:hover { border-color: rgba(201, 168, 76, .45); transform: translateY(-3px); }
.ab-card p:last-child { margin-bottom: 0; }
.about .ab-card p { font-size: 16.5px; color: var(--ab-muted); }
html[lang="en-US"] .about .ab-card p { font-size: 15px; }
.ab-card-title { margin: 0 0 10px; font-size: 21px; font-weight: 600; color: #fff; line-height: 1.35; }
html[lang="en-US"] .ab-card-title { font-size: 18px; text-transform: capitalize; }
.ab-wide { margin-bottom: 20px; }
.about .ab-wide p { color: var(--ab-text); font-size: 17.5px; }
.ab-values .ab-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } /* 7th value spans the row */
.ab-num { margin-bottom: 14px; font-size: 30px; line-height: 1; font-weight: 700; color: var(--ab-gold); opacity: .9; font-family: Inter, Arial, sans-serif; }

/* closing button */
.ab-cta { display: flex; justify-content: center; margin-top: 44px; }
.ab-btn {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  background: var(--ab-gold);
  color: var(--ab-navy);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.ab-btn:hover { background: #dcbd63; transform: translateY(-2px); }

@media (max-width: 991px) {
  .ab-hero { padding: 110px 0 48px; }
  .ab-hero-grid, .ab-two { grid-template-columns: 1fr; gap: 32px; }
  .ab-hero-media img { height: 300px; }
  .ab-quote { min-height: 320px; }
  .ab-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .ab-values .ab-card:last-child:nth-child(3n + 1) { grid-column: auto; }
  .ab-values .ab-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  .ab-section { padding: 52px 0; }
}
@media (max-width: 600px) {
  .ab-wrap { width: calc(100% - 32px); }
  .ab-grid-3, .ab-grid-2 { grid-template-columns: 1fr; }
  .about p { font-size: 17px; }
  .ab-hero-media img { height: 240px; }
}

/* About: platform illustration (replaces the stock photos) */
.ab-visual { position: relative; height: 460px; display: grid; place-items: center; }
.ab-visual::before {
  content: '';
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 74, 114, .65), transparent 70%);
  filter: blur(10px);
}
.ab-phone {
  position: relative;
  width: 230px;
  height: 430px;
  padding: 14px 14px 16px;
  border-radius: 34px;
  background: linear-gradient(180deg, #0d2e4c, #071a3d);
  border: 1px solid rgba(201, 168, 76, .45);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 0 0 6px rgba(255, 255, 255, .03);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: ab-float 6s ease-in-out infinite;
}
.ab-phone-top { display: flex; justify-content: center; padding: 6px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ab-phone-top img { height: 13px; width: auto; }
.ab-chat { display: flex; flex-direction: column; gap: 8px; }
.ab-b { display: block; height: 14px; border-radius: 8px; }
.ab-bot { background: rgba(255, 255, 255, .16); }
.ab-me { background: #c9a84c; margin-inline-start: auto; }
.ab-w70 { width: 70%; } .ab-w60 { width: 60%; } .ab-w55 { width: 55%; } .ab-w45 { width: 45%; }
.ab-pills { display: flex; gap: 6px; }
.ab-pills i { display: block; height: 18px; flex: 1; border-radius: 999px; border: 1px solid rgba(201, 168, 76, .7); }
.ab-check { margin-top: auto; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 10px; }
.ab-row { display: flex; align-items: center; gap: 8px; }
.ab-row span { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); }
.ab-row.ab-ok span { background: #2fa36b; border-color: #2fa36b; }
.ab-row i { display: block; height: 9px; width: 75%; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.ab-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ab-bar b { display: block; height: 100%; width: 66%; border-radius: inherit; background: linear-gradient(90deg, #c9a84c, #e3c771); }
[dir="rtl"] .ab-bar b { margin-inline-start: 0; }
.ab-float {
  position: absolute;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(13, 46, 76, .75);
  border: 1px solid rgba(201, 168, 76, .4);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  animation: ab-float 5s ease-in-out infinite;
}
.ab-float svg { width: 30px; height: 30px; fill: none; stroke: #c9a84c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-f1 { top: 8%; inset-inline-start: 4%; animation-delay: -1s; }
.ab-f2 { top: 44%; inset-inline-end: 2%; animation-delay: -2.5s; }
.ab-f3 { bottom: 6%; inset-inline-start: 12%; animation-delay: -4s; }
@keyframes ab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .ab-phone, .ab-float { animation: none; } }

/* About: network art behind the quote */
.ab-quote { background: radial-gradient(120% 90% at 50% 0%, #164a72 0%, #0d2e4c 45%, #051332 100%); }
.ab-quote-art { position: absolute; inset: 0; z-index: 0; }
.ab-quote-art svg { width: 100%; height: 100%; }
.ab-net-l line { stroke: rgba(120, 200, 255, .28); stroke-width: 1; }
.ab-net-d circle { fill: rgba(140, 215, 255, .8); }
.ab-net-scale path { fill: none; stroke: rgba(201, 168, 76, .55); stroke-width: .35; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 991px) {
  .ab-visual { height: 400px; }
  .ab-phone { width: 210px; height: 380px; }
}
@media (max-width: 600px) {
  .ab-visual { height: 360px; }
  .ab-phone { width: 190px; height: 340px; }
  .ab-float { width: 52px; height: 52px; border-radius: 14px; }
  .ab-float svg { width: 24px; height: 24px; }
}

/* ---------- Terms & conditions ---------- */
.terms {
  display: block;
  background: linear-gradient(180deg, #051332 0%, #071a3d 100%);
  color: #e8eef6;
  font-family: Beiruti, Arial, sans-serif;
  padding-bottom: 80px;
}
html[lang="en-US"] .terms { font-family: Inter, Arial, sans-serif; }
.tc-wrap { width: min(1180px, 100% - 48px); margin: 0 auto; }
.tc-hero { position: relative; padding: 130px 0 40px; }
.tc-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 80% at 80% 20%, rgba(22, 74, 114, .5), transparent 70%); pointer-events: none; }
.tc-title, .tc-title * { position: relative; margin: 0; font-size: clamp(36px, 5vw, 56px) !important; line-height: 1.15; font-weight: 700; color: #fff !important; }
.tc-title br { display: none; }
.tc-title::after { content: ''; display: block; width: 72px; height: 3px; margin: 20px 0 22px; border-radius: 3px; background: #c9a84c; }
.tc-intro { position: relative; max-width: 900px; }
.tc-intro > div { margin: 0 0 12px !important; padding: 0 !important; font-size: 19px !important; line-height: 1.8 !important; color: #c9d6e6 !important; text-align: start !important; }

.tc-layout { display: grid; grid-template-columns: 290px 1fr; gap: 40px; align-items: start; }
.tc-toc { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; padding: 18px; border-radius: 18px; background: rgba(13, 46, 76, .55); border: 1px solid rgba(255, 255, 255, .08); }
.tc-toc-head { display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: none; color: #c9a84c; font: inherit; font-size: 15px; font-weight: 700; text-align: start; cursor: default; }
.tc-toc-list { margin: 0; padding: 0; list-style: none; }
.tc-toc-list a { display: block; padding: 7px 10px; border-radius: 9px; color: #b9c7d8; font-size: 15px; line-height: 1.4; text-decoration: none; }
html[lang="en-US"] .tc-toc-list a { font-size: 13.5px; }
.tc-toc-list a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.tc-toc-list a.is-active { background: rgba(201, 168, 76, .14); color: #e3c771; }

.tc-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tc-sec { scroll-margin-top: 90px; padding: 26px 28px; border-radius: 18px; background: linear-gradient(180deg, rgba(22, 74, 114, .3), rgba(13, 46, 76, .3)); border: 1px solid rgba(255, 255, 255, .08); }
.tc-sec > div, .tc-sec > div * { color: #d6e0ec !important; }
.tc-sec > div:not(.tc-head) { margin: 0 0 12px !important; padding: 0 !important; font-size: 17.5px !important; line-height: 1.85 !important; text-align: start !important; }
html[lang="en-US"] .tc-sec > div:not(.tc-head) { font-size: 15.5px !important; line-height: 1.75 !important; }
.tc-sec > div:last-child { margin-bottom: 0 !important; }
.tc-sec > .text-block-60.is2, .tc-sec > .text-block-60:not(.tc-head) { color: #fff !important; font-weight: 600 !important; margin-top: 16px !important; }
.tc-head { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.tc-head > div { margin: 0 !important; padding: 0 !important; }
.tc-head, .tc-head * { font-size: 22px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #fff !important; text-align: start !important; }
html[lang="en-US"] .tc-head, html[lang="en-US"] .tc-head * { font-size: 19px !important; }
.tc-sec a { color: #e3c771 !important; }

.tc-top { position: fixed; bottom: 100px; inset-inline-end: 22px; z-index: 50; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #c9a84c; color: #051332; font-size: 20px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 25px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.tc-top.is-shown { opacity: 1; pointer-events: auto; }

@media (max-width: 991px) {
  .tc-hero { padding: 100px 0 28px; }
  .tc-layout { grid-template-columns: 1fr; gap: 18px; }
  .tc-toc { position: sticky; top: 64px; z-index: 5; max-height: none; padding: 0; background: #0d2e4c; }
  .tc-toc-head { margin: 0; padding: 14px 18px; cursor: pointer; }
  .tc-toc-head::after { content: '▾'; float: inline-end; }
  .tc-toc-list { display: none; max-height: 60vh; overflow: auto; padding: 0 10px 12px; }
  .tc-toc.is-open .tc-toc-list { display: block; }
  .tc-sec { scroll-margin-top: 130px; }
}
@media (max-width: 600px) {
  .tc-wrap { width: calc(100% - 32px); }
  .tc-sec { padding: 20px 18px; }
  .tc-head, .tc-head * { font-size: 19px !important; }
  .tc-sec > div:not(.tc-head) { font-size: 16.5px !important; }
}

/* ---------- Services page ---------- */
/* No registration step any more: hide the "please register" notice and show
   each card's "Start request" button (it opens the chat on that service) */
.c-card .text-block-84 { display: none !important; }
.c-card .buttons.services.is-none { display: inline-flex !important; }

/* header: title, rule, category chips */
.c-intro ._w-intro { margin-bottom: 70px; }
.sv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.sv-chip {
  padding: 9px 18px;
  border: 1px solid rgba(201, 168, 76, .55);
  border-radius: 999px;
  background: rgba(5, 19, 50, .55);
  color: #f0e3bd;
  font-family: Beiruti, Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background .2s ease, color .2s ease;
}
html[lang="en-US"] .sv-chip { font-family: Inter, Arial, sans-serif; font-size: 14px; }
.sv-chip:hover { background: #c9a84c; color: #051332; }

/* cards: number + icon, price badge, solid button */
.sv-card ._w-card { transform-origin: 50% 0; transition: transform .15s linear, filter .15s linear; will-change: transform; }
.sv-card .c-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv-card .card-title { color: #c9a84c !important; font-weight: 600 !important; font-size: 2.4em !important; }
.sv-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: rgba(201, 168, 76, .12); border: 1px solid rgba(201, 168, 76, .35); }
.sv-icon svg { width: 26px; height: 26px; fill: none; stroke: #c9a84c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  width: fit-content;
  margin: 16px auto 4px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(201, 168, 76, .14);
  border: 1px solid rgba(201, 168, 76, .45);
  color: #f3dc94;
  font-family: Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
}
.sv-sar { font-family: Newriyal, Arial, sans-serif; font-weight: 400; }
.sv-card .buttons.services {
  justify-content: center;
  background: #c9a84c !important;
  border-color: #c9a84c !important;
  color: #051332 !important;
  font-weight: 700;
  border-radius: 999px !important;
  transition: background .2s ease, transform .2s ease;
}
.sv-card .buttons.services:hover { background: #dcbd63 !important; transform: translateY(-1px); }
.sv-card .buttons.services * { color: #051332 !important; }

/* closing card */
.c-card.sv-end { position: relative; max-width: none; }
.sv-end-card { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 44px 30px !important; background: radial-gradient(120% 120% at 50% 0%, #164a72, #0d2e4c 55%, #051332) !important; border: 1px solid rgba(201, 168, 76, .4); }
.sv-end-title { margin: 0; color: #fff; font-family: Beiruti, Arial, sans-serif; font-size: 28px; font-weight: 700; }
html[lang="en-US"] .sv-end-title { font-family: Inter, Arial, sans-serif; font-size: 24px; }
.sv-end-btn { padding: 13px 32px; border-radius: 999px; background: #c9a84c; color: #051332; font-weight: 700; font-size: 17px; text-decoration: none; }
.sv-end-btn:hover { background: #dcbd63; }

/* progress counter */
.sv-count {
  position: fixed;
  bottom: 28px;
  inset-inline-end: 24px;
  z-index: 60;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(5, 19, 50, .85);
  border: 1px solid rgba(201, 168, 76, .45);
  color: #c8d6e5;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  direction: ltr;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.sv-count b { color: #c9a84c; }
.sv-count.is-shown { opacity: 1; }

@media (max-width: 767px) {
  /* title row: stack the words and the RIGHTS logo so nothing is wider than the screen */
  .c-intro .c-header { flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 100%; }
  .c-intro .c-header .header { margin: 0; text-align: center; }
  .c-intro .c-header .image-21 { width: min(160px, 50vw); height: auto; }
  .c-intro, .c-intro ._w-intro { max-width: 100%; overflow: hidden; }
}
@media (max-width: 600px) {
  .sv-chips { width: 100%; max-width: 100%; gap: 8px; justify-content: center; }
  .sv-chip { font-size: 14px; padding: 7px 13px; }
  .sv-icon { width: 40px; height: 40px; border-radius: 12px; }
  .sv-icon svg { width: 22px; height: 22px; }
  .sv-price { font-size: 17px; }
  .sv-count { bottom: 90px; inset-inline-end: 16px; }
}

/* services: no "scroll down" hint at the top */
.c-intro .text-block-75 { display: none !important; }

/* ---------- Services page: the first Arabic card was capped at 250px on phones (Webflow), pushing its
   "Start application" button outside the card ---------- */
@media screen and (max-width: 479px) {
  ._w-card.is1:lang(ar) { max-height: none; }
}