/* ===================================================================
   Triple 9 — custom overrides (loaded after style.css)
   ------------------------------------------------------------------
   1. Heading reset
      The template marks up its titles as <div class="h2 title">.
      We converted those to real <h1>-<h3> tags for SEO/accessibility.
      Bootstrap adds margin-bottom to heading tags, which the original
      divs never had, so we zero it out to keep the layout identical.
   =================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

/* 2. Sections parked until real content arrives (see the TODO comments in the HTML). */
[hidden] { display: none !important; }

/* ===================================================================
   3. Triple brand palette
   ------------------------------------------------------------------
   Taken from the live site (triple-eg.com) so both properties match:
     #663399  primary purple        #1A1332  heading / ink
     #5C5478  body text             #E8E4F2  borders & light surfaces
     #F8F7FC  page-tint surface     #FFB600  gold CTA
     #D99B00  gold hover            #332868  logo mark (dark stop)
   The template ships an orange theme driven by --theme-color1; we
   re-point its tokens instead of rewriting its rules.
   =================================================================== */
:root {
  --theme-color1: #663399;
  --theme-color1-rgb: 102, 51, 153;
  --theme-color2: #1A1332;
  --theme-color2-rgb: 26, 19, 50;

  --theme-color-dark: #1A1332;
  --theme-color-lighter: #F8F7FC;
  --theme-color-silver: #E8E4F2;
  --theme-color-gray: #F8F7FC;
  --review-color: #FFB600;

  --text-color: #5C5478;
  --headings-color: #1A1332;
  --link-color: var(--theme-color1);
  --link-hover-color: #4A256E;

  /* brand extras the template has no token for */
  --brand-gold: #FFB600;
  --brand-gold-hover: #D99B00;
  --brand-purple-deep: #332868;
  --brand-purple-dark: #4A256E;
}

/* Primary CTA = gold on deep purple text, same as the live site's
   "More about us" button. The template's btn-style-one is the main CTA. */
.btn-style-one {
  background-color: var(--brand-gold);
  color: #1A1332;
}
.btn-style-one:hover {
  background-color: var(--brand-gold-hover);
  color: #1A1332;
}/* ===================================================================
   5. Contact form
   ------------------------------------------------------------------
   The same form appears twice in two different settings: a dark band on
   the home page (.contact-section) and a white page (.contact-details).
   They need opposite treatments, and giving both the dark one is what
   made the contact page render white text in white fields.
   =================================================================== */

/* ---- shared shape ------------------------------------------------- */
.contact-section form .form-group,
.contact-details form .form-group { margin-block-end: 22px; }

.contact-section form label,
.contact-details form label {
  display: block; margin-block-end: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
}

.contact-section form .form-control,
.contact-section form input[type="text"],
.contact-section form input[type="email"],
.contact-section form input[type="tel"],
.contact-section form select,
.contact-section form textarea,
.contact-details form .form-control,
.contact-details form input[type="text"],
.contact-details form input[type="email"],
.contact-details form input[type="tel"],
.contact-details form select,
.contact-details form textarea {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px; line-height: 1.5;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.contact-section form textarea,
.contact-details form textarea { min-height: 150px; resize: vertical; }

.contact-section form select,
.contact-details form select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ---- dark band (home page) ---------------------------------------- */
.contact-section form label { color: #C9C2DC; }
.contact-section form .form-control,
.contact-section form input[type="text"],
.contact-section form input[type="email"],
.contact-section form input[type="tel"],
.contact-section form select,
.contact-section form textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.contact-section form ::placeholder { color: rgba(201,194,220,.55); }
.contact-section form .form-control:focus,
.contact-section form select:focus,
.contact-section form textarea:focus {
  outline: none;
  background: rgba(255,255,255,.08);
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(255,182,0,.18);
}
.contact-section form select option { background: #1A1332; color: #fff; padding: 12px; }

/* ---- white page (contact page) ------------------------------------ */
.contact-details form label { color: #4A4362; }
.contact-details form .form-control,
.contact-details form input[type="text"],
.contact-details form input[type="email"],
.contact-details form input[type="tel"],
.contact-details form select,
.contact-details form textarea {
  background: #fff;
  border: 1px solid rgba(26,19,50,.14);
  color: #1A1332;
}
.contact-details form ::placeholder { color: rgba(26,19,50,.38); }
.contact-details form .form-control:focus,
.contact-details form select:focus,
.contact-details form textarea:focus {
  outline: none;
  border-color: var(--theme-color2);
  box-shadow: 0 0 0 3px rgba(102,51,153,.12);
}
.contact-details form select option { background: #fff; color: #1A1332; padding: 12px; }

/* the dropdown arrow: gold on the dark band, purple on the white page */
.contact-section form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23FFB600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 46px;
}
.contact-details form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23663399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 46px;
}
html[dir="rtl"] .contact-section form select,
html[dir="rtl"] .contact-details form select {
  background-position: left 18px center; padding-left: 46px; padding-right: 20px;
}

/* ---- submit button ------------------------------------------------ */
.contact-section form button[type="submit"],
.contact-details form button[type="submit"] {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 20px 16px 30px;
  border: 0; border-radius: 999px;
  background: var(--brand-gold); color: #1A1332;
  font-weight: 700; font-size: 16px;
  box-shadow: 0 12px 28px rgba(255,182,0,.28);
  transition: background-color .25s, color .25s, box-shadow .25s, transform .25s;
}
html[dir="rtl"] .contact-section form button[type="submit"],
html[dir="rtl"] .contact-details form button[type="submit"] { padding: 16px 30px 16px 20px; }
/* the circle is for the arrow span; the contact page's button wraps its
   label in a span too, and styling that as a disc hid the word "إرسال" */
.contact-section form button[type="submit"] span:not(.btn-title),
.contact-details form button[type="submit"] span:not(.btn-title) {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1A1332;
}
.contact-section form button[type="submit"] span img,
.contact-details form button[type="submit"] span img { width: 16px; height: auto; filter: brightness(0) invert(1); }
.contact-section form button[type="submit"]:hover,
.contact-details form button[type="submit"]:hover {
  background: var(--theme-color2); color: #fff;
  box-shadow: 0 14px 32px rgba(102,51,153,.3);
  transform: translateY(-2px);
}
.contact-section form button[type="submit"]:hover span:not(.btn-title),
.contact-details form button[type="submit"]:hover span:not(.btn-title) { background: #fff; }
.contact-section form button[type="submit"]:hover span img,
.contact-details form button[type="submit"]:hover span img { filter: none; }

/* invalid only after the visitor has actually typed something wrong */
.contact-section form .form-control.error,
.contact-details form .form-control.error { border-color: #ff6b6b; }
.contact-section form label.error { color: #ff9b9b; font-weight: 500; margin-block-start: 6px; }
.contact-details form label.error { color: #d23c3c; font-weight: 500; margin-block-start: 6px; }

/* honeypot — off-screen rather than display:none, which some bots skip */
.cf-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
#form-result { margin-block-end: 18px; border-radius: 12px; }

/* ===================================================================
   6. Portfolio
   ------------------------------------------------------------------
   Real client sites: a browser-style frame around each screenshot so
   the grid reads as "websites we built", plus a fact row on the
   detail page. Logical properties keep it RTL-safe.
   =================================================================== */
.project-block .image-box {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--theme-color-silver);
  aspect-ratio: 16 / 10;
  box-shadow: 0 18px 40px rgba(26, 19, 50, .12);
}
.project-block .image-box img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .6s ease;
}
.project-block .inner-box:hover .image-box img { transform: scale(1.04); }
.project-block .content-box { padding-block-start: 20px; }
.project-block .cat {
  font-size: 14px; font-weight: 600; color: var(--theme-color1);
  margin-block-end: 8px;
}
.project-block .cat span {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; vertical-align: middle; margin-inline: 8px;
}
.project-summary {
  margin: 10px 0 14px;
  font-size: 15px; line-height: 1.7; color: var(--text-color);
}

/* ---- detail page ---- */
.project-detail__shot {
  margin: 0 0 34px;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(26, 19, 50, .18);
}
.project-detail__shot img { width: 100%; height: auto; display: block; }
.project-detail__facts {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: 26px; margin-block-end: 34px;
  background: var(--theme-color-lighter);
  border: 1px solid var(--theme-color-silver);
  border-radius: 16px;
}
.project-detail__facts span {
  display: block; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-color); margin-block-end: 6px;
}
html[dir="rtl"] .project-detail__facts span { text-transform: none; letter-spacing: 0; }
.project-detail__facts strong { font-size: 17px; color: var(--headings-color); }
.project-detail__summary { font-size: 18px; line-height: 1.8; margin-block-end: 30px; }
.project-detail__cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* ===================================================================
   8. Type scale — two steps down
   ------------------------------------------------------------------
   The template is set for short English headlines. Arabic runs longer
   and Cairo/IBM Plex have a larger x-height, so everything read a
   size too big. These are the template's own tokens, stepped down.
   =================================================================== */
:root {
  --body-font-size: 15px;
  --h1-font-size: 64px;
  --h2-font-size: 38px;
  --h3-font-size: 24px;
  --h4-font-size: 20px;
  --h5-font-size: 17px;
  --h6-font-size: 15px;
}
body { font-size: var(--body-font-size); }
.sec-title .text, .about-section .text, .service-block .text,
.project-summary, .blog-block .text { font-size: 15px; }
.navigation > li > a { font-size: 15px; }

/* ===================================================================
   9. Sticky header
   ------------------------------------------------------------------
   The template's sticky bar is 108px tall with the full desktop
   padding, which lands as a slab over the content on scroll. Make it
   a slim bar with a real shadow so it reads as a toolbar.
   =================================================================== */
.sticky-header {
  padding: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 24px rgba(26, 19, 50, .10);
  border-block-end: 1px solid var(--theme-color-silver);
}
.sticky-header .inner-container { min-height: 68px; align-items: center; }
.sticky-header .logo img { width: 104px; height: auto; }
.sticky-header .navigation > li > a { padding: 22px 0; font-size: 15px; }
.sticky-header.fixed-header { animation: triple-drop .35s ease both; }
@keyframes triple-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sticky-header.fixed-header { animation: none; } }

/* The template hard-codes a few sizes past the tokens above, so these
   match its own selectors rather than fighting with !important. */
.sec-title .title { font-size: var(--h2-font-size); }
.sec-title .sub-title { font-size: 14px; }
.main-menu .navigation > li > a,
.sticky-header .navigation > li > a { font-size: 15px; }
.service-block .title, .project-block .title,
.blog-block .title, .why-choose-us-block .title { font-size: var(--h4-font-size); }
.main-footer .widget-title { font-size: var(--h5-font-size); }

/* ===================================================================
   10. Header: one glass bar, fixed
   ------------------------------------------------------------------
   The template ships two headers — an absolute one over the hero and
   a separate .sticky-header clone that swaps in on scroll. The clone
   never appeared (its scroll handler does not fire under the GSAP
   smooth-scroller), and two copies of the nav is a maintenance trap
   anyway. So: hide the clone, and make the real header a fixed glass
   bar that tightens once you scroll.
   =================================================================== */
.main-header .sticky-header { display: none !important; }

.main-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 999;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.main-header .header-lower { padding-block: 10px; transition: padding .3s ease; }

/* Over the hero the bar is nothing but its own contents. Once the page has
   moved it becomes a solid white strip, which is what the client asked for
   and what keeps the nav readable over the light sections further down. */
.main-header.is-scrolled {
  background: #fff;
  box-shadow: 0 6px 24px rgba(26, 19, 50, .10);
  border-block-end-color: rgba(26, 19, 50, .06);
}
.main-header.is-scrolled .header-lower { padding-block: 2px; }
.main-header.is-scrolled .logo img { width: 104px; height: auto; }

/* ---- two logos, one swap ------------------------------------------
   A white bar hides a white logo. Both ship in the markup and CSS
   picks; swapping the src in JS flickers on every scroll tick.
------------------------------------------------------------------- */
.main-header .logo img { transition: width .3s ease; }
.main-header .logo .logo-dark { display: none; }
.main-header.is-scrolled .logo .logo-light { display: none; }
.main-header.is-scrolled .logo .logo-dark { display: inline-block; }

/* light text over the hero photo … */
.main-header .navigation > li > a,
.main-header .support-box .text,
.main-header .info-box .text { color: #fff; }
.main-header .navigation > li > a:hover,
.main-header .navigation > li.current > a { color: var(--brand-gold); }
.main-header .support-box .number a,
.main-header .info-box .number a { color: #fff; }

/* … dark text once the bar is white. The template styles the nav through
   .header-style-one .header-lower .inner-container .main-menu, so the
   scrolled state has to reach at least that far to win the cascade. */
.main-header.is-scrolled .header-lower .inner-container .main-menu .navigation > li > a,
.main-header.is-scrolled .support-box .text,
.main-header.is-scrolled .info-box .text { color: #1A1332; }
.main-header.is-scrolled .header-lower .inner-container .main-menu .navigation > li > a:hover,
.main-header.is-scrolled .header-lower .inner-container .main-menu .navigation > li.current > a { color: var(--theme-color2); }
.main-header.is-scrolled .support-box .number a,
.main-header.is-scrolled .info-box .number a { color: var(--theme-color2); }
.main-header.is-scrolled .mobile-nav-toggler,
.main-header.is-scrolled .nav-btn { color: #1A1332; }
.main-header.is-scrolled .nav-btn span,
.main-header.is-scrolled .mobile-nav-toggler span { background: #1A1332; }

/* inner pages start with a page-title band — keep it clear of the bar */
.page-title { padding-block-start: 150px; }
@media (max-width: 991px) { .page-title { padding-block-start: 110px; } }

/* ---- mobile drawer: full height, scrollable, real close button ---- */
.main-header .mobile-menu,
.mobile-menu {
  position: fixed;
  inset-block: 0;
  z-index: 100000;
  height: 100vh; height: 100dvh;
  max-width: 340px;
}
.mobile-menu .menu-box {
  height: 100vh; height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-block: 78px 30px;
}
.mobile-menu .close-btn {
  position: absolute; inset-block-start: 20px; z-index: 10;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff; font-size: 18px; cursor: pointer;
}
.mobile-menu .close-btn:hover { background: var(--brand-gold); color: #1A1332; }
html[dir="ltr"] .mobile-menu .close-btn { inset-inline-start: 20px; inset-inline-end: auto; }

/* ---- services grid: eight cards, tighter ------------------------- */
.services-section .service-block .inner-block { padding: 26px 24px 24px; }
.services-section .service-block .content .icon img { width: 46px; height: auto; }
.services-section .service-block .number { font-size: 34px; }
.services-section .service-block .title { font-size: 18px; line-height: 1.5; }
.services-section .service-block .text { font-size: 14px; line-height: 1.75; }
.services-section .service-block .image img { aspect-ratio: 16/9; object-fit: cover; }

/* ===================================================================
   11. Clients grid
   ------------------------------------------------------------------
   All 81 logos as a quiet grid, the way the live site shows them:
   greyed back so they read as a texture of names, colour on hover.
   =================================================================== */
.clients-grid-section { padding-block: 90px; background: var(--theme-color-lighter); }
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 46px 0 0;
  padding: 0;
}
.clients-grid li {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 14px;
  background: #fff;
  border: 1px solid var(--theme-color-silver);
  border-radius: 12px;
  aspect-ratio: 16 / 9;
}
.clients-grid img {
  max-width: 100%; max-height: 54px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.clients-grid li:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.05); }

@media (max-width: 767px) {
  .clients-grid-section { padding-block: 60px; }
  .clients-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .clients-grid img { max-height: 40px; }
}

/* ===================================================================
   12. Fixes from review
   =================================================================== */

/* the card number sat behind the icon and read as a smudge */
.service-block .number { display: none; }
.services-section .service-block .content { padding-block-start: 4px; }

/* slide counter is "01 / 03" in both languages — digits do not flip */
.hero-nav__count { direction: ltr; unicode-bidi: isolate; }

/* the gold CTA fills with brand purple on hover and the label goes white */
.theme-btn.btn-style-one:hover,
.theme-btn.btn-style-one:focus-visible {
  background: var(--theme-color2);
  color: #fff;
}
.theme-btn.btn-style-one:hover span { background: #fff; }
.theme-btn.btn-style-one:hover span img { filter: none; }
.hero-full__btn--solid:hover {
  background: var(--theme-color2);
  color: #fff;
}

/* let the panel bleed a little over the image so the seam disappears */
@media (max-width: 991px) {
}

/* newsletter field and its button were sitting on top of each other */
.main-footer .subscribe-form .form-group { position: relative; display: flex; gap: 10px; }
.main-footer .subscribe-form input[type="email"],
.main-footer .subscribe-form input[type="text"] { flex: 1 1 auto; min-width: 0; }
.main-footer .subscribe-form button { position: static; flex: 0 0 auto; white-space: nowrap; }

/* ---- blog card: topic chip instead of a template date number ------ */
.blog-block .date--cat {
  inset-inline-start: 18px; inset-block-start: 18px;
  width: auto; height: auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(26,19,50,.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center;
}

/* read-more and read-time were stacked on top of each other */
.blog-block .content-box .inner-box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.blog-block .btn-more, .blog-block .time-text { position: static; margin: 0; }
.blog-block .time-text { font-size: 13px; color: var(--text-color); }

/* ===================================================================
   13. Why choose us
   A light band between two dark sections. The copy holds still on the
   left while the reasons scroll past it, so the argument stays in view
   the whole time it is being made.
   =================================================================== */
.wcu-section {
  position: relative;
  padding: 120px 0;
  background: #F5F4F9;
  overflow: hidden;
}
/* one soft purple bloom, low opacity — keeps the band from reading flat */
.wcu-section::before {
  content: "";
  position: absolute; inset-inline-start: -10%; top: -30%;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(102,51,153,.10) 0%, rgba(102,51,153,0) 70%);
  pointer-events: none;
}
.wcu-section > .auto-container { position: relative; z-index: 1; }

.wcu-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 70px;
  align-items: start;
}

/* ---- left: the pitch ---------------------------------------------- */
.wcu-copy { position: sticky; top: 130px; }
.wcu-copy .sub-title {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  color: var(--theme-color2);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
}
.wcu-copy .sub-title::before {
  content: ""; width: 30px; height: 2px; background: var(--brand-gold); flex: none;
}
.wcu-copy .title { color: #1A1332; margin-bottom: 20px; }
.wcu-lead {
  color: #5B5470; line-height: 1.75; margin-bottom: 32px; max-width: 46ch;
}
.wcu-cta { margin-top: 4px; }

/* ---- right: the reasons ------------------------------------------- */
.wcu-list { display: grid; gap: 16px; margin: 0; padding: 0; }

.wcu-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px; align-items: start;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid rgba(26,19,50,.08);
  border-radius: 18px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.wcu-item:hover {
  transform: translateY(-4px);
  border-color: rgba(102,51,153,.22);
  box-shadow: 0 18px 44px rgba(26,19,50,.10);
}
.wcu-item__num {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  /* the counter is a Latin numeral either way — keep it from flipping in RTL */
  direction: ltr;
  background: rgba(102,51,153,.08);
  color: var(--theme-color2);
  font-weight: 700; font-size: 17px; line-height: 1;
  transition: background-color .3s ease, color .3s ease;
}
.wcu-item:hover .wcu-item__num { background: var(--theme-color2); color: #fff; }
.wcu-item__title { color: #1A1332; margin-bottom: 8px; }
.wcu-item__text { color: #5B5470; line-height: 1.7; margin: 0; }

/* ---- the one number worth shouting -------------------------------- */
.wcu-stat {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 8px;
  padding: 34px 36px;
  border-radius: 18px;
  background: linear-gradient(120deg, var(--brand-purple-deep) 0%, var(--theme-color2) 100%);
  color: #fff;
}
.wcu-stat__num {
  direction: ltr;
  font-size: 54px; font-weight: 700; line-height: 1;
  color: var(--brand-gold);
}
.wcu-stat__label { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.5; }

@media (max-width: 1199px) {
  .wcu-grid { grid-template-columns: 1fr; gap: 44px; }
  .wcu-copy { position: static; }
}
@media (max-width: 575px) {
  .wcu-section { padding: 80px 0; }
  .wcu-item { padding: 24px; gap: 18px; grid-template-columns: 1fr; }
  .wcu-stat { padding: 26px; }
  .wcu-stat__num { font-size: 42px; }
}

/* ===================================================================
   14. Floating WhatsApp button
   =================================================================== */
.wa-float {
  position: fixed;
  inset-inline-end: 24px; bottom: 24px;
  z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 28px rgba(37,211,102,.38);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
.wa-float:hover { color: #fff; transform: scale(1.07); box-shadow: 0 14px 34px rgba(37,211,102,.5); }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 575px) {
  .wa-float { width: 50px; height: 50px; inset-inline-end: 16px; bottom: 16px; }
  .wa-float svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ===================================================================
   15. Projects on the home page
   Heading centred above the work, filters under it, the grid four wide,
   and the call to action after the evidence rather than before it.
   =================================================================== */
.projects-section { position: relative; overflow: hidden; }
.projects-section > .auto-container { position: relative; z-index: 2; }

/* the watermark rides the inline-end edge — right in English, mirrored in
   Arabic so it never lands in front of the first thing you read */
.projects-section > .style-text {
  position: absolute;
  inset-inline-end: -46px; top: 42%;
  z-index: 1; pointer-events: none;
  direction: ltr;
  font-size: 62px; line-height: 1; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(26,19,50,.13);
  transform: rotate(90deg); transform-origin: center;
}
html[dir="rtl"] .projects-section > .style-text { transform: rotate(-90deg); }
@media (max-width: 1399px) { .projects-section > .style-text { display: none; } }

.projects-head { text-align: center; margin-bottom: 30px; }
.projects-head .sub-title { justify-content: center; }
.projects-head .title { margin-inline: auto; max-width: 20ch; }

/* ---- filters ------------------------------------------------------ */
.project-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 0 46px; padding: 0;
}
.project-filters li { list-style: none; }
.project-filter {
  padding: 10px 22px;
  border: 1px solid rgba(26,19,50,.14); border-radius: 999px;
  background: #fff; color: #5B5470;
  font-size: 15px; font-weight: 500; line-height: 1.2;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.project-filter:hover { color: var(--theme-color2); border-color: rgba(102,51,153,.35); }
.project-filter.is-active {
  background: var(--brand-gold); border-color: var(--brand-gold); color: #1A1332;
  font-weight: 600;
}
.project-filter:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }

/* ---- grid --------------------------------------------------------- */
.project-grid { row-gap: 30px; }
.project-grid .project-block { transition: opacity .3s ease; }
.project-grid .project-block[hidden] { display: none; }
.project-grid .inner-box { height: 100%; }
.project-grid .image-box { overflow: hidden; border-radius: 14px; }
.project-grid .image-box img {
  width: 100%; height: auto; display: block;
  transition: transform .5s ease;
}
.project-grid .inner-box:hover .image-box img { transform: scale(1.05); }
.project-grid .content-box { padding-top: 18px; }
.project-grid .content-box .cat {
  font-size: 13px; color: #6B6383; margin-bottom: 6px;
}
.project-grid .content-box .title { margin: 0; font-size: 19px; }

.projects-cta { text-align: center; margin-top: 54px; }

@media (max-width: 575px) {
  .project-filters { margin-bottom: 32px; gap: 8px; }
  .project-filter { padding: 8px 16px; font-size: 14px; }
  .projects-cta { margin-top: 38px; }
}

/* ===================================================================
   16. Blog cards, footer contact strip
   =================================================================== */
/* "Read more" sits at the end of the card — left in Arabic, right in English */
.blog-block .content-box .inner-box {
  display: flex; flex-direction: column; align-items: flex-start;
}
.blog-block .btn-more {
  margin-top: 14px;
  margin-inline-start: auto;
}
.blog-block .time-text { margin-top: 10px; }

/* the topic chip that replaced the day/month number — the template sizes
   .date as a 60px square for a two-digit day, which a word does not fit */
.blog-block .image-box .date--cat {
  width: -moz-fit-content; width: fit-content; height: auto;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  white-space: nowrap;
  display: inline-flex; align-items: center;
}

/* ---- footer contact strip ----------------------------------------
   Two steps down from the template size, and the phone number pinned
   LTR so the + stays in front of the digits in Arabic.
------------------------------------------------------------------- */
.main-footer .info-box .content .number { font-size: 17px; }
.main-footer .info-box .content .number.one { font-size: 17px; }
.main-footer .info-box .content bdi.ltr,
.main-footer .contact-list-one bdi.ltr,
bdi.ltr { direction: ltr; unicode-bidi: isolate; }

.footer-widget.follow-widget .social-icon {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.footer-widget.follow-widget .social-icon a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  font-size: 15px;
  transition: background-color .25s, color .25s, transform .25s;
}
.footer-widget.follow-widget .social-icon a:hover {
  background: var(--brand-gold); color: #1A1332; transform: translateY(-2px);
}

/* ===================================================================
   17. Mega menu (Services, Projects)
   A panel under the header: a promo column on one side, a grid of
   destinations on the other. Hidden by default so an unstyled or
   JS-less page never dumps it into the header.
   =================================================================== */
.main-menu .navigation > li.has-mega { position: static; }

.mega-menu {
  position: fixed;
  inset-inline: 0; top: var(--header-h, 100px);
  z-index: 60;
  padding: 0 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.main-menu .navigation > li.has-mega:hover > .mega-menu,
.main-menu .navigation > li.has-mega:focus-within > .mega-menu,
.main-menu .navigation > li.has-mega.is-open > .mega-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

.mega-menu__inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  max-width: 1200px; margin: 14px auto 0;
  border-radius: 20px; overflow: hidden;
  background: #221A42;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px rgba(10,6,25,.45);
  text-align: start;
}

/* ---- promo column -------------------------------------------------- */
.mega-promo {
  padding: 34px 30px;
  background: linear-gradient(160deg, var(--brand-purple-deep) 0%, #2A1F52 100%);
  display: flex; flex-direction: column; align-items: flex-start;
}
.mega-promo__sub {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase !important;
  color: var(--brand-gold); margin-bottom: 12px;
}
.mega-promo__title {
  font-size: 24px; line-height: 1.3; font-weight: 700; color: #fff; margin-bottom: 12px;
}
.mega-promo__text {
  font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.7); margin: 0 0 22px;
}
.mega-promo__btn {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 999px;
  background: var(--brand-gold); color: #1A1332;
  font-size: 15px; font-weight: 600;
  transition: background-color .25s, color .25s;
}
.mega-promo__btn:hover { background: #fff; color: var(--theme-color2); }

/* ---- destinations -------------------------------------------------- */
/* the template capitalises every word inside the nav; these are sentences */
.mega-menu, .mega-menu * { text-transform: none; }
.mega-panel { padding: 28px 28px 24px; }
.mega-panel__head {
  font-size: 13px; color: var(--brand-gold);
  letter-spacing: .06em; margin-bottom: 18px;
}
/* equal rows, and a column count that divides the list evenly: ten services
   make five clean rows of two, and the odd fifth category spans the row */
.mega-grid { display: grid; gap: 10px; grid-auto-rows: 1fr; }
.mega-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-grid--2 > .mega-card:nth-child(5):last-child { grid-column: 1 / -1; }

.mega-card {
  height: 100%;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.07); border-radius: 14px;
  background: rgba(255,255,255,.02);
  transition: background-color .22s, border-color .22s, transform .22s;
}
.mega-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,182,0,.35);
  transform: translateY(-2px);
}
.mega-card__body { flex: 1 1 auto; min-width: 0; }
.mega-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.mega-card__title { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35; }
.mega-card__tag {
  padding: 2px 9px; border-radius: 6px;
  background: rgba(255,182,0,.14); color: var(--brand-gold);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.mega-card__text {
  display: block;
  font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.58);
}
.mega-card__icon {
  flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: var(--brand-gold);
}
.mega-card__icon svg { width: 19px; height: 19px; }

.mega-all {
  display: inline-block; margin-top: 16px;
  font-size: 14px; font-weight: 600; color: var(--brand-gold);
}
.mega-all:hover { color: #fff; }

/* the drawer clones the same list — it gets the plain links, not a panel */
.mobile-menu .mega-menu,
.sticky-header .mega-menu { display: none !important; }

@media (max-width: 1199px) { .mega-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .mega-menu, .mega-card, .mega-promo__btn { transition: none; }
}

/* ===================================================================
   18. CTA band
   The heading is one line on desktop — it was wrapping into the shape
   behind it and getting clipped. It still wraps on narrow screens,
   where one line would overflow instead.
   =================================================================== */
.cta-section .content-box .title { margin-bottom: 12px; }
@media (min-width: 992px) {
  .cta-section .content-box .title { white-space: nowrap; font-size: clamp(26px, 2.6vw, 38px); }
}

/* ===================================================================
   19. Blog index
   The English index lists Arabic articles, so it says so — on the page
   and on every card — rather than sending the reader somewhere they
   cannot read.
   =================================================================== */
.blog-lang-note {
  max-width: 68ch; margin: 0 0 40px;
  padding: 16px 20px;
  border-inline-start: 3px solid var(--brand-gold);
  border-radius: 0 10px 10px 0;
  background: rgba(102,51,153,.05);
  color: #5B5470; font-size: 15px; line-height: 1.7;
}
html[dir="rtl"] .blog-lang-note { border-radius: 10px 0 0 10px; }

.lang-flag {
  display: inline-block; margin-inline-start: 10px;
  padding: 2px 9px; border-radius: 6px;
  background: rgba(102,51,153,.10); color: var(--theme-color2);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.blog-excerpt { color: #5B5470; font-size: 14.5px; line-height: 1.7; margin: 0 0 4px; }

/* ===================================================================
   20. 404
   The template shipped a search box that searched nothing. Real links
   to the places people were probably heading are more use.
   =================================================================== */
.error-page__inner { text-align: center; }
.error-page__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 0 32px; padding: 0;
}
.error-page__links li { list-style: none; }
.error-page__links a {
  display: inline-block; padding: 9px 20px;
  border: 1px solid rgba(26,19,50,.14); border-radius: 999px;
  color: #5B5470; font-size: 15px;
  transition: background-color .25s, color .25s, border-color .25s;
}
.error-page__links a:hover {
  background: var(--theme-color2); border-color: var(--theme-color2); color: #fff;
}
.error-page__text { color: #5B5470; margin-bottom: 22px; }

/* ===================================================================
   21. Hero — full-bleed photo, copy laid over it
   The image runs edge to edge; a gradient scrim on the start side
   carries the text. Mirrors in Arabic without a second rule.
   =================================================================== */
.hero-full { position: relative; background: #1A1332; }
/* the template pads .swiper 70px at the bottom for its own pagination dots;
   here that showed as a purple strip below a photo meant to fill the screen */
.hero-full .swiper { padding-bottom: 0; }
.hero-full .swiper,
.hero-full .swiper-wrapper { height: 100%; }

.hero-full .swiper-slide {
  position: relative;
  min-height: min(94vh, 880px);
  display: flex; align-items: center;
}
.hero-full .swiper-slide:not(.swiper-slide-active) { pointer-events: none; }

.hero-full__media { position: absolute; inset: 0; z-index: 0; }
.hero-full__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* readable text over any photo: dark from the start edge, plus a soft
   top band so the transparent header does not fight the image */
.hero-full__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(16,11,32,.72) 0%, rgba(16,11,32,0) 34%),
    linear-gradient(to var(--hero-scrim, right), rgba(16,11,32,.92) 0%, rgba(16,11,32,.72) 38%, rgba(16,11,32,.15) 72%, rgba(16,11,32,0) 100%);
}
html[dir="rtl"] .hero-full { --hero-scrim: left; }

.hero-full__body { position: relative; z-index: 2; width: 100%; padding-block: 150px 120px; }
.hero-full__inner { max-width: 720px; }

.hero-full__title {
  color: #fff;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.hero-full__title em { font-style: normal; color: #B48BE0; }

.hero-full__text {
  color: rgba(255,255,255,.82);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  max-width: 54ch;
  margin: 0 0 32px;
}

.hero-full__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-full__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 999px;
  font-size: 16px; font-weight: 600; line-height: 1;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.hero-full__btn--solid { background: var(--brand-gold); color: #1A1332; }
.hero-full__btn--solid:hover { transform: translateY(-2px); }
.hero-full__btn--ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; }
.hero-full__btn--ghost:hover { background: #fff; color: var(--theme-color2); border-color: #fff; }

/* quick links straight into the four services people arrive looking for */
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.hero-chips li { list-style: none; }
.hero-chips a {
  display: inline-block; padding: 9px 20px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  color: rgba(255,255,255,.88); font-size: 14.5px; font-weight: 500;
  transition: background-color .25s, color .25s, border-color .25s;
}
.hero-chips a:hover { background: #fff; color: var(--theme-color2); border-color: #fff; }

.hero-full .hero-nav {
  position: absolute; z-index: 3;
  inset-block-end: 34px;
  inset-inline-start: max(24px, calc((100vw - 1320px) / 2 + 12px));
}

@media (max-width: 991px) {
  .hero-full .swiper-slide { min-height: 0; }
  .hero-full__body { padding-block: 130px 96px; }
  .hero-full__media::after {
    background: linear-gradient(to bottom, rgba(16,11,32,.80) 0%, rgba(16,11,32,.72) 40%, rgba(16,11,32,.88) 100%);
  }
  .hero-full .hero-nav { inset-block-end: 20px; inset-inline-start: 24px; }
}
@media (max-width: 575px) {
  .hero-full__body { padding-block: 118px 86px; }
  .hero-full__btn { padding: 13px 22px; font-size: 15px; }
  .hero-chips a { padding: 8px 15px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-full__btn, .hero-chips a { transition: none; }
}

/* ===================================================================
   22. Services grid — icon and label, nothing else
   Ten services, five across, two rows. The template card carried a
   number, a photo, a plus button and a details link; all four competed
   and none of them helped anyone choose.
   =================================================================== */
.svc-plain { padding-block: 100px; background: #fff; }

.svc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.svc-head__title { margin: 0; color: #1A1332; }
.svc-head__all {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--theme-color2); font-size: 15px; font-weight: 600;
  white-space: nowrap;
}
.svc-head__all span { transition: transform .25s ease; display: inline-block; }
.svc-head__all:hover { color: var(--brand-gold-hover); }
.svc-head__all:hover span { transform: translateX(4px); }
html[dir="rtl"] .svc-head__all span { transform: scaleX(-1); }
html[dir="rtl"] .svc-head__all:hover span { transform: scaleX(-1) translateX(4px); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.svc-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  min-height: 148px;
  padding: 26px 16px;
  border: 1px solid rgba(26,19,50,.10);
  border-radius: 16px;
  background: #fff;
  text-align: center;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
/* a brand wash that rises from the bottom instead of a flat colour swap */
.svc-tile::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(102,51,153,.05) 0%, rgba(102,51,153,.10) 100%);
  opacity: 0; transform: translateY(40%);
  transition: opacity .35s ease, transform .35s ease;
}
.svc-tile > * { position: relative; z-index: 1; }
.svc-tile:hover {
  border-color: rgba(102,51,153,.3);
  box-shadow: 0 16px 36px rgba(26,19,50,.10);
  transform: translateY(-4px);
}
.svc-tile:hover::before { opacity: 1; transform: translateY(0); }

/* the icon sits in a tinted disc that fills on hover */
.svc-tile__icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(102,51,153,.08);
  color: var(--theme-color2);
  transition: background-color .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.svc-tile__icon svg { width: 26px; height: 26px; }
.svc-tile:hover .svc-tile__icon {
  background: var(--theme-color2); color: #fff;
  transform: translateY(-3px) scale(1.06);
}

.svc-tile__label {
  color: #1A1332; font-size: 14.5px; font-weight: 600; line-height: 1.45;
  transition: color .3s ease;
}
.svc-tile:hover .svc-tile__label { color: var(--theme-color2); }

/* a short rule that grows under the label */
.svc-tile__label::after {
  content: ""; display: block; height: 2px; width: 0; margin: 8px auto 0;
  border-radius: 2px; background: var(--brand-gold);
  transition: width .35s ease;
}
.svc-tile:hover .svc-tile__label::after { width: 26px; }

@media (prefers-reduced-motion: reduce) {
  .svc-tile, .svc-tile::before, .svc-tile__icon, .svc-tile__label,
  .svc-tile__label::after { transition: none; }
  .svc-tile:hover { transform: none; }
  .svc-tile:hover .svc-tile__icon { transform: none; }
}

@media (max-width: 1199px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px)  {
  .svc-plain { padding-block: 70px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc-tile { min-height: 112px; padding: 18px 12px; }
  .svc-head { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .svc-tile, .svc-head__all span { transition: none; } }

/* ---- slider arrows and counter ------------------------------------
   These lived with the old split hero and went out with it; the new
   hero still needs them.
------------------------------------------------------------------- */
.hero-nav { display: flex; align-items: center; gap: 14px; }
.hero-nav__btn {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent; color: #fff;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.hero-nav__btn:hover { background: var(--brand-gold); border-color: var(--brand-gold); color: #1A1332; }
.hero-nav__btn:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }
.hero-nav__btn.swiper-button-disabled { opacity: .45; cursor: default; }
/* the chevrons point left and right; mirror them in Arabic */
html[dir="rtl"] .hero-nav__btn svg { transform: scaleX(-1); }
.hero-nav__count { font-size: 15px; color: rgba(255,255,255,.75); letter-spacing: .08em; }
.hero-nav__count b { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .hero-nav__btn { transition: none; } }

/* ===================================================================
   23. Header layout — logo and nav together, controls on the far side
   =================================================================== */
.main-header .header-lower .inner-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
/* the template sets a 204px gap here through a four-class selector, which
   parks the nav in the middle of the bar; the client wants it beside the
   logo, so these have to reach the same depth to win */
.main-header .header-lower .inner-container .left-box {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  flex: 1 1 auto; min-width: 0;
}
.main-header .header-lower .inner-container .left-box .main-box { flex: none; }
.main-header .header-lower .inner-container .nav-outer { flex: 0 1 auto; }
.main-header .header-lower .inner-container .right-box {
  display: flex; align-items: center; gap: 10px; flex: none;
}

/* ---- round icon buttons (language, theme) -------------------------- */
.hdr-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent; color: #fff;
  cursor: pointer; padding: 0;
  transition: background-color .25s, color .25s, border-color .25s;
}
.hdr-icon-btn svg { width: 19px; height: 19px; }
.hdr-icon-btn:hover { background: rgba(255,255,255,.14); }
.hdr-icon-btn:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.main-header.is-scrolled .hdr-icon-btn { border-color: rgba(26,19,50,.16); color: #1A1332; }
.main-header.is-scrolled .hdr-icon-btn:hover { background: rgba(26,19,50,.06); }

/* ---- language menu -------------------------------------------------- */
.hdr-lang { position: relative; }
.hdr-lang__menu {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
  z-index: 70; min-width: 164px; margin: 0; padding: 6px;
  border-radius: 12px;
  background: #221A42;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(10,6,25,.42);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.hdr-lang.is-open .hdr-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hdr-lang__menu li { list-style: none; }
.hdr-lang__menu a,
.hdr-lang__menu span.is-active {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: rgba(255,255,255,.85); font-size: 14.5px; line-height: 1.4;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.hdr-lang__menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.hdr-lang__menu .is-active { color: var(--brand-gold); font-weight: 600; cursor: default; }
.hdr-flag { font-size: 16px; line-height: 1; }

/* ---- theme toggle: one button, two states, no menu ------------------ */
.hdr-theme .icon-moon { display: none; }
html[data-theme="dark"] .hdr-theme .icon-sun { display: none; }
html[data-theme="dark"] .hdr-theme .icon-moon { display: block; }

/* the phone block earns its place on a sales site, but it does not need
   to shout next to three other controls */
.main-header .header-phone_box .info { font-size: 13px; }
@media (max-width: 1399px) { .main-header .header-phone_box { display: none; } }
@media (max-width: 1199px) { .main-header .hdr-lang, .main-header .hdr-theme { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hdr-icon-btn, .hdr-lang__menu { transition: none; }
}

/* ===================================================================
   24. Dark mode
   The site was built as light sections between dark ones. Rather than
   restyle every component, the light surfaces read from four tokens
   and dark mode swaps those. Sections that were already dark need
   nothing — they look the same either way, which is the point.
   =================================================================== */
:root {
  --surface:    #ffffff;
  --surface-2:  #F5F4F9;
  --ink:        #1A1332;
  --ink-muted:  #5B5470;
  --line:       rgba(26, 19, 50, .10);
  --line-strong:rgba(26, 19, 50, .16);
}
html[data-theme="dark"] {
  --surface:    #140F26;
  --surface-2:  #1B1436;
  --ink:        #F2EFFA;
  --ink-muted:  #ABA2C4;
  --line:       rgba(255, 255, 255, .10);
  --line-strong:rgba(255, 255, 255, .18);
}

html[data-theme="dark"] body { background: var(--surface); color: var(--ink-muted); }

/* headings and body copy the template hard-codes */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3, html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 { color: var(--ink); }
html[data-theme="dark"] p,
html[data-theme="dark"] .text,
html[data-theme="dark"] li { color: var(--ink-muted); }

/* the surfaces this build introduced */
html[data-theme="dark"] .svc-plain { background: var(--surface); }
html[data-theme="dark"] .svc-head__title { color: var(--ink); }
html[data-theme="dark"] .svc-tile { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .svc-tile__label { color: var(--ink); }
html[data-theme="dark"] .svc-tile:hover { border-color: rgba(180,139,224,.45); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
html[data-theme="dark"] .svc-tile__icon { background: rgba(180,139,224,.12); color: #B48BE0; }
html[data-theme="dark"] .svc-tile:hover .svc-tile__icon { background: #B48BE0; color: #140F26; }
html[data-theme="dark"] .svc-tile::before {
  background: linear-gradient(180deg, rgba(180,139,224,.06) 0%, rgba(180,139,224,.12) 100%);
}
html[data-theme="dark"] .svc-tile:hover .svc-tile__label { color: #C9AAEA; }
/* the brand purple is a light-background colour; on dark it disappears */
html[data-theme="dark"] .svc-head__all,
html[data-theme="dark"] .mega-all,
html[data-theme="dark"] .project-grid .content-box .title a:hover,
html[data-theme="dark"] a.btn-more { color: #C9AAEA; }
html[data-theme="dark"] .svc-head__all:hover { color: var(--brand-gold); }

html[data-theme="dark"] .wcu-section { background: var(--surface-2); }
html[data-theme="dark"] .wcu-copy .title,
html[data-theme="dark"] .wcu-item__title { color: var(--ink); }
html[data-theme="dark"] .wcu-lead,
html[data-theme="dark"] .wcu-item__text { color: var(--ink-muted); }
html[data-theme="dark"] .wcu-item { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .wcu-item:hover { box-shadow: 0 18px 44px rgba(0,0,0,.4); }
html[data-theme="dark"] .wcu-item__num { background: rgba(180,139,224,.16); color: #C9AAEA; }

html[data-theme="dark"] .project-filter { background: var(--surface-2); border-color: var(--line); color: var(--ink-muted); }
html[data-theme="dark"] .project-filter:hover { color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .project-filter.is-active { background: var(--brand-gold); border-color: var(--brand-gold); color: #1A1332; }
html[data-theme="dark"] .project-grid .content-box .cat { color: var(--ink-muted); }
html[data-theme="dark"] .project-grid .content-box .title a { color: var(--ink); }
html[data-theme="dark"] .projects-section > .style-text { -webkit-text-stroke-color: rgba(255,255,255,.10); }

html[data-theme="dark"] .blog-lang-note { background: rgba(180,139,224,.08); color: var(--ink-muted); }
html[data-theme="dark"] .blog-excerpt { color: var(--ink-muted); }
html[data-theme="dark"] .error-page__links a { border-color: var(--line); color: var(--ink-muted); }

/* template surfaces that assume a white page */
html[data-theme="dark"] .blog-section,
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .clients-grid-section,
html[data-theme="dark"] .services-details,
html[data-theme="dark"] .project-details,
html[data-theme="dark"] .blog-details { background: var(--surface); }
html[data-theme="dark"] .clients-grid li,
html[data-theme="dark"] .blog-block .inner-block,
html[data-theme="dark"] .sidebar__single,
html[data-theme="dark"] .accordion-box .block {
  background: var(--surface-2); border-color: var(--line);
}
/* client logos are dark marks made for white paper */
html[data-theme="dark"] .clients-grid li img { filter: invert(1) brightness(1.9) contrast(.85); }html[data-theme="dark"] .contact-section form input,
html[data-theme="dark"] html[data-theme="dark"] .contact-section form textarea,
html[data-theme="dark"] html[data-theme="dark"] .contact-section form select,
html[data-theme="dark"] .contact-details form select {
  background: var(--surface-2); border-color: var(--line); color: var(--ink);
}

/* the bar is white in light mode; in dark it has to be dark */
html[data-theme="dark"] .main-header.is-scrolled { background: #18122E; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
html[data-theme="dark"] .main-header.is-scrolled .header-lower .inner-container .main-menu .navigation > li > a,
html[data-theme="dark"] .main-header.is-scrolled .support-box .text,
html[data-theme="dark"] .main-header.is-scrolled .info-box .text { color: #fff; }
html[data-theme="dark"] .main-header.is-scrolled .hdr-icon-btn { border-color: rgba(255,255,255,.22); color: #fff; }
html[data-theme="dark"] .main-header.is-scrolled .logo .logo-light { display: inline-block; }
html[data-theme="dark"] .main-header.is-scrolled .logo .logo-dark { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body { transition: background-color .3s ease, color .3s ease; }
}

/* ===================================================================
   25. English typography — Inter
   The template shipped DM Sans with Kumbh Sans layered on top. Inter
   is a UI face: it holds up at 14px in a nav and at 64px in the hero,
   which is the whole range this page uses.
   =================================================================== */
html[lang="en"] {
  --body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[lang="en"] body,
html[lang="en"] .h1, html[lang="en"] .h2, html[lang="en"] .h3,
html[lang="en"] .h4, html[lang="en"] .h5, html[lang="en"] .h6,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en"] .navigation > li > a,
html[lang="en"] .theme-btn,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] textarea,
html[lang="en"] select {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Inter runs a touch small at the same px as DM Sans, and the reference
   sets a 16px body. Headings tighten because Inter is wide by default. */
html[lang="en"] body { font-size: 16px; line-height: 1.7; }
html[lang="en"] .h1, html[lang="en"] h1 { font-size: clamp(38px, 4.4vw, 60px); letter-spacing: -0.022em; line-height: 1.1; }
html[lang="en"] .h2, html[lang="en"] h2 { font-size: clamp(28px, 2.9vw, 40px); letter-spacing: -0.018em; line-height: 1.18; }
html[lang="en"] .h3, html[lang="en"] h3 { font-size: 26px; letter-spacing: -0.014em; }
html[lang="en"] .h4, html[lang="en"] h4 { font-size: 21px; letter-spacing: -0.011em; }
html[lang="en"] .h5, html[lang="en"] h5 { font-size: 18px; letter-spacing: -0.008em; }
html[lang="en"] .h6, html[lang="en"] h6 { font-size: 15px; letter-spacing: 0; }
html[lang="en"] .hero-full__title { letter-spacing: -0.028em; }
html[lang="en"] .navigation > li > a { font-size: 15.5px; letter-spacing: -0.006em; }

/* ===================================================================
   26. In-article callout
   Each article carries one link to the service it belongs to and one to
   a project we delivered in that area. The anchor on the service link is
   the service name, which is the phrase people search for.
   =================================================================== */
.post-cta {
  margin: 30px 0;
  padding: 22px 26px;
  border-inline-start: 3px solid var(--brand-gold);
  border-radius: 0 14px 14px 0;
  background: rgba(102,51,153,.05);
}
html[dir="rtl"] .post-cta { border-radius: 14px 0 0 14px; }
.post-cta__text { margin: 0 0 12px; color: #4A4362; font-size: 15.5px; line-height: 1.7; }
.post-cta__text strong { color: #1A1332; }
.post-cta__links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.post-cta__links a {
  color: var(--theme-color2); font-size: 15px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(102,51,153,.3);
}
.post-cta__links a:hover { color: var(--brand-gold-hover); text-decoration-color: currentColor; }

/* links written into the prose itself */
.blog-details__text-2 a {
  color: var(--theme-color2); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(102,51,153,.35);
}
.blog-details__text-2 a:hover { text-decoration-color: currentColor; }

html[data-theme="dark"] .post-cta { background: rgba(180,139,224,.08); }
html[data-theme="dark"] .post-cta__text { color: var(--ink-muted); }
html[data-theme="dark"] .post-cta__text strong { color: var(--ink); }
html[data-theme="dark"] .post-cta__links a,
html[data-theme="dark"] .blog-details__text-2 a { color: #C9AAEA; }

/* ===================================================================
   27. About section — quieter headings
   The section heading and the two feature titles sat a couple of steps
   larger than the copy around them needed.
   =================================================================== */
.about-section .sec-title .title {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.25;
}
.about-section .inner-box .title,
.about-section .content-column h3.title {
  font-size: 17px;
  line-height: 1.4;
}
html[lang="en"] .about-section .sec-title .title { font-size: clamp(22px, 2.1vw, 30px); }
html[lang="en"] .about-section .inner-box .title { font-size: 17px; }

/* ===================================================================
   28. Service page contact card
   Replaces the template card whose icon never rendered and whose phone
   number wrapped onto two lines. WhatsApp leads because that is where
   this audience actually replies; the number stays for those who call.
   =================================================================== */
.service-help {
  position: relative; overflow: hidden;
  padding: 32px 28px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--theme-color2) 0%, var(--brand-purple-deep) 100%);
  color: #fff;
  text-align: center;
}
/* one soft highlight so the block is not a flat rectangle of purple */
.service-help::before {
  content: "";
  position: absolute; inset-inline-end: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.service-help > * { position: relative; z-index: 1; }

.service-help__title {
  color: #fff; font-size: 22px; line-height: 1.35; margin: 0 0 10px;
}
.service-help__lead {
  color: rgba(255,255,255,.78); font-size: 14.5px; line-height: 1.7; margin: 0 0 22px;
}

.service-help__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 20px;
  border-radius: 999px;
  background: #25D366; color: #fff;
  font-size: 15.5px; font-weight: 600;
  transition: background-color .25s ease, transform .25s ease;
}
.service-help__wa:hover { background: #1FBA59; color: #fff; transform: translateY(-2px); }
.service-help__wa svg { flex: none; }

.service-help__phone { margin-top: 18px; }
.service-help__or {
  display: block; margin-bottom: 6px;
  color: rgba(255,255,255,.6); font-size: 13px;
}
.service-help__phone a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: 18px; font-weight: 700;
  white-space: nowrap;           /* the number was breaking across two lines */
  transition: color .25s ease;
}
.service-help__phone a:hover { color: var(--brand-gold); }
.service-help__phone .ico { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .service-help__wa, .service-help__phone a { transition: none; }
}

/* ===================================================================
   29. Legal pages — privacy, terms
   Long-form reading: a narrow measure, generous leading, and headings
   that separate without shouting.
   =================================================================== */
.legal-section { padding-block: 90px; }
.legal { max-width: 74ch; }
.legal__updated {
  display: inline-block; margin: 0 0 24px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(102,51,153,.07); color: var(--theme-color2);
  font-size: 13.5px; font-weight: 600;
}
.legal__intro {
  font-size: 17px; line-height: 1.85; color: #4A4362;
  padding-block-end: 22px; margin-block-end: 8px;
  border-block-end: 1px solid rgba(26,19,50,.1);
}
.legal__heading {
  margin-block: 34px 12px;
  color: #1A1332; font-size: 21px; line-height: 1.4;
}
.legal p { color: #5B5470; font-size: 16px; line-height: 1.85; margin-block-end: 14px; }
.legal__list { margin: 0 0 16px; padding: 0; list-style: none; }
.legal__list li {
  position: relative; padding-inline-start: 22px; margin-block-end: 9px;
  color: #5B5470; font-size: 16px; line-height: 1.75;
}
.legal__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gold);
}
.legal a { color: var(--theme-color2); text-decoration: underline; text-underline-offset: 3px; }

html[data-theme="dark"] .legal__updated { background: rgba(180,139,224,.12); color: #C9AAEA; }
html[data-theme="dark"] .legal__intro { color: var(--ink); border-block-end-color: var(--line); }
html[data-theme="dark"] .legal__heading { color: var(--ink); }
html[data-theme="dark"] .legal p,
html[data-theme="dark"] .legal__list li { color: var(--ink-muted); }
html[data-theme="dark"] .legal a { color: #C9AAEA; }

@media (max-width: 575px) { .legal-section { padding-block: 60px; } }

/* legal links in the footer bar */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; padding: 0; }
.footer-legal li { list-style: none; }
.footer-legal a { color: rgba(255,255,255,.62); font-size: 14px; transition: color .25s; }
.footer-legal a:hover { color: var(--brand-gold); }

/* ---- contact info discs -------------------------------------------
   The icon sits on a filled brand disc, so it has to be white. It was
   inheriting the body text colour and all but disappeared.
------------------------------------------------------------------- */
.contact-details .icon,
.contact-details .icon .ico,
.contact-info-box .icon .ico { color: #fff; }
.contact-details .icon .ico { width: 26px; height: 26px; stroke-width: 1.7; }