/* Elementor's scroll-triggered fade-in animation starts affected elements at
   `.elementor-invisible{visibility:hidden}` and reveals them via a JS chunk
   (section-frontend-handlers/shared-frontend-handlers) fetched from the live
   production domain -- one this static export never carries and can't load,
   confirmed failing in the console on every page that uses it. Without that
   JS the reveal never happens: "The Management"/"The Team" headings on About
   Us, and two decorative icons on the homepage, are permanently invisible
   (visibility:hidden, not just unanimated) to every visitor, right now. The
   animation was never going to run in this export either way, so drop the
   hidden starting state and just show the content. */
.elementor-invisible {
  visibility: visible !important;
}

/* Arabic typeface — self-hosted (variable font, weights 400/600/700 share one file per subset) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* English typeface — self-hosted (Mulish variable font, the actively-maintained
   successor family to the legacy "Muli" name used throughout this site's CSS;
   re-labeled "Muli" here so every existing reference to it resolves correctly).
   One file covers weights 400-700 for the latin subset, same approach as Cairo above. */
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/muli-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Site-wide typography: every page's own embedded <style> block hardcodes
   Elementor's --e-global-typography-*-font-family custom properties to
   "Roboto"/"Roboto Slab" (baked in from the original theme kit). Redefining
   them here covers anything that still reads the kit variables, but audit
   found individual widgets across every page *also* carry their own literal
   font-family: Montserrat (Elementor's per-widget "unlinked from global
   typography" override, baked into each page's markup independently) — the
   variables alone don't reach those. Forcing font-family on every element
   below body is the only way to guarantee one consistent font per language
   without hand-editing font overrides scattered across 32 pages. Icon glyphs
   (Font Awesome `.fa*`/`fa-*` and Elementor `eicon-*`, both rendered via <i>
   with their own icon font-family) are explicitly excluded so this doesn't
   turn every icon into a missing-glyph box. Required brand fonts: Cairo for
   Arabic, Muli for English. */
body.elementor-kit-33 {
  --e-global-typography-primary-font-family: 'Muli';
  --e-global-typography-secondary-font-family: 'Muli';
  --e-global-typography-text-font-family: 'Muli';
  --e-global-typography-accent-font-family: 'Muli';
  font-family: 'Muli', sans-serif;
  /* Accessibility: the kit's own body-text gray (#7A7A7A) is 4.29:1 on
     white, just under WCAG AA's 4.5:1. Darkened five points -- visually
     the same neutral gray, imperceptibly different -- to clear it (4.60:1). */
  --e-global-color-text: #757575;
}
html[lang="ar"] body.elementor-kit-33 {
  --e-global-typography-primary-font-family: 'Cairo';
  --e-global-typography-secondary-font-family: 'Cairo';
  --e-global-typography-text-font-family: 'Cairo';
  --e-global-typography-accent-font-family: 'Cairo';
  font-family: 'Cairo', Tahoma, Arial, sans-serif;
}
body.elementor-kit-33 *:not(i):not([class*="fa-"]):not([class*="eicon"]):not(.elementor-star-rating) {
  font-family: 'Muli', sans-serif !important;
}
html[lang="ar"] body.elementor-kit-33 *:not(i):not([class*="fa-"]):not([class*="eicon"]):not(.elementor-star-rating) {
  font-family: 'Cairo', Tahoma, Arial, sans-serif !important;
}

/* The theme's base reset (wp-content/cache/bundle-42547736aa9b.css, loaded on
   every page) sets a plain `a{color:#c36}` — a dark pink/red — as the default
   link color. Anything without its own more specific color rule (nav links,
   elementor-button, footer links, and the intentionally YouTube-red resource
   cards all already have one, so they're unaffected) falls back to that red
   — e.g. the plain-text "See more Testimonials" link. Replace it site-wide
   with the brand blue already used for nav links and buttons. */
a {
  color: var(--e-global-color-0602ad4, #3979BB);
}

/* Accessibility: the brand blue link color above is a hair under 4.5:1 on
   pure white already (4.54:1), so on the light-tinted "Book a Tour" promo
   card background (#f4f6fb, used identically on the Infants/Toddlers/
   Preschool/Resources pages) it drops to 4.20:1 -- and no amount of further
   lightening the card can fix that, since pure white is already this blue's
   ceiling. Darken the link specifically inside these cards instead. */
[style*="background:#f4f6fb"] a {
  color: #2F6BA3;
}

/* Language switcher — a single link to the other language version, styled like a nav item */
li.lang-switch-item {
  display: flex;
  align-items: center;
}
a.lang-switch {
  direction: ltr;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  margin-inline-start: 8px;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

/* RTL: decorative hero/section background art is positioned with a hardcoded
   "right" anchor in the page's own embedded styles (baked in from the original
   LTR design), which doesn't auto-flip with dir="rtl". Mirror it to the left so
   it doesn't collide with the now-right-aligned Arabic text.
   (Elementor normally repositions this via a JS-generated .elementor-motion-effects-layer,
   but that layer is never created since the motion-effects script isn't loaded here —
   the background is actually painted directly on the section element itself, which
   Elementor always tags with a data-settings attribute mentioning its background type.) */
html[dir="rtl"] [data-settings*="background_background"] {
  background-position-x: left !important;
}

/* RTL: the header's "Contact Us" submenu (theme.min8066.css) is hardcoded
   left:0, so under dir="rtl" it stays glued to the parent item's left edge
   while the RTL-flowed parent text/spacing reads from the right -- the
   dropdown visibly drifts away from the word it belongs to. Anchor it from
   the right edge instead, matching how it hangs from the left in English. */
html[dir="rtl"] .site-navigation ul.menu li ul {
  left: auto;
  right: 0;
}

/* RTL: heading/paragraph widgets carry a hardcoded text-align (left, on some
   pages; center on others) baked into each page's own embedded CSS from the
   original design -- inconsistent per page and not RTL-aware. Right-align
   consistently across every page for Arabic. */
html[dir="rtl"] .elementor-heading-title,
html[dir="rtl"] .elementor-widget-text-editor {
  text-align: right !important;
}

/* RTL: the rule above over-corrected -- icon/photo "card" widgets (the home
   page Location/Hours/Services row, About Us Team & Management, Services
   program cards, the Email/WhatsApp/Call cards on Contact Us and Curriculum)
   are centered under their icon or round photo by design in every language.
   Forcing them right-aligned broke that pairing. Restore centering for any
   heading/paragraph that follows an icon or image as the first widget in
   its column. */
html[dir="rtl"] .elementor-widget-wrap:has(> .elementor-widget-icon:first-child) .elementor-heading-title,
html[dir="rtl"] .elementor-widget-wrap:has(> .elementor-widget-icon:first-child) .elementor-widget-text-editor,
html[dir="rtl"] .elementor-widget-wrap:has(> .elementor-widget-image:first-child) .elementor-heading-title,
html[dir="rtl"] .elementor-widget-wrap:has(> .elementor-widget-image:first-child) .elementor-widget-text-editor {
  text-align: center !important;
}

/* RTL: same over-correction, homepage testimonials heading + quote (no
   icon/image sibling to key off, so targeted by element id). Both centered
   in English. */
html[dir="rtl"] .elementor-element-822368 .elementor-heading-title,
html[dir="rtl"] .elementor-element-17e972bd {
  text-align: center !important;
}

/* Accessibility: comfortable tap targets on mobile (WCAG 2.2 target size guidance) */
@media (max-width: 767px) {
  .site-navigation-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .elementor-button.elementor-size-sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Mobile nav overlay: the theme's own dropdown positioning (max-height transition on
   a position:absolute menu inside a normal-flow container) collapses to zero height
   regardless of state -- a pre-existing structural issue, not something toggling a
   class alone can fix. This replaces it with a simple full-screen overlay driven by
   one class, controlled by wp-content/custom-overrides.js. */
@media (max-width: 767px) {
  .site-navigation-dropdown {
    display: none !important;
  }
  .site-navigation-dropdown.kfn-nav-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: #fff !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
    padding-top: 90px !important;
  }
  .site-navigation-dropdown.kfn-nav-open .menu-top-menu-container,
  .site-navigation-dropdown.kfn-nav-open ul.menu {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    transform: none !important;
  }
  .site-navigation-dropdown.kfn-nav-open ul.menu li {
    max-height: none !important;
    transform: none !important;
  }
  body.kfn-nav-open-body {
    overflow: hidden !important;
  }
}

/* Mobile nav toggle: this was a bare <div>, unreachable by keyboard and (once
   the dropdown above opens as a full-screen fixed overlay at z-index:99999)
   literally covered by that overlay -- a real tap/click on the visible
   hamburger hit the overlay behind it, not the button, so the menu could
   never be closed except by navigating away. Now a real <button>; this keeps
   it above the overlay in both languages and resets the browser's default
   button chrome, which the theme's own rules below it don't account for. */
.site-navigation-toggle {
  position: relative;
  z-index: 100000;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
}
.site-navigation-toggle:focus-visible {
  outline: 2px solid #3979BB;
  outline-offset: 2px;
}

/* ==========================================================================
   Hero banner system — one consistent illustrated hero, reused on every page.
   Replaces the old mix of stock photos / no-banner-at-all / inconsistent
   heights (previously 463-971px) with a fixed height and a small flat icon
   in place of a photo. Structure is plain HTML (not Elementor markup), so
   RTL mirroring below relies on the inherited `direction` from html[dir],
   not manual overrides — a row flex container already reverses itself
   correctly under direction:rtl. */
.kfn-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 36px 0;
}
@media (min-width: 768px) {
  .kfn-hero { min-height: 360px; }
}
@media (min-width: 1025px) {
  .kfn-hero { min-height: 420px; padding: 0; }
}

.kfn-hero__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.kfn-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
  opacity: .3;
  mix-blend-mode: overlay;
}
.kfn-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .5;
  background: #fff;
}
.kfn-hero__blob--a { width: 260px; height: 260px; left: -70px; top: -80px; }
.kfn-hero__blob--b { width: 210px; height: 210px; right: 12%; bottom: -110px; background: rgba(255, 255, 255, .65); }

.kfn-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.kfn-hero__copy { max-width: 560px; }
.kfn-hero__heading {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
.kfn-hero__sub {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 46ch;
}
.kfn-hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.kfn-hero__cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #1B2F4C;
  background: #fff;
  padding: 11px 20px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kfn-hero__cta a:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }

.kfn-hero__icon {
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kfn-hero__icon svg { width: 74px; height: 74px; }

/* one brand-gradient pairing per page, all drawn from the existing kit palette */
.kfn-hero--home         { background: linear-gradient(135deg, #3979BB, #6EC1E4); }
.kfn-hero--about        { background: linear-gradient(135deg, #AF78E6, #3979BB); }
.kfn-hero--services     { background: linear-gradient(135deg, #61CE70, #70C0A4); }
.kfn-hero--curriculum   { background: linear-gradient(135deg, #6EC1E4, #70C0A4); }
.kfn-hero--contact      { background: linear-gradient(135deg, #3979BB, #AF78E6); }
.kfn-hero--faq          { background: linear-gradient(135deg, #70C0A4, #61CE70); }
.kfn-hero--testimonials { background: linear-gradient(135deg, #AF78E6, #6EC1E4); }
.kfn-hero--resources    { background: linear-gradient(135deg, #6EC1E4, #61CE70); }
.kfn-hero--careers      { background: linear-gradient(135deg, #70C0A4, #AF78E6); }
.kfn-hero--tour         { background: linear-gradient(135deg, #3979BB, #70C0A4); }
.kfn-hero--gallery      { background: linear-gradient(135deg, #61CE70, #AF78E6); }

@media (max-width: 767px) {
  .kfn-hero__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 20px; }
  .kfn-hero__copy { max-width: 100%; }
  .kfn-hero__icon { width: 84px; height: 84px; align-self: flex-end; }
  .kfn-hero__icon svg { width: 46px; height: 46px; }
}

html[dir="rtl"] .kfn-hero__heading,
html[dir="rtl"] .kfn-hero__sub {
  text-align: right;
}

/* ==========================================================================
   Footer redesign — taller, grouped into brand / quick links / language,
   with a full-width copyright bar. Same links as before, just organized
   (the old footer was one flat, unlabeled row of links). */
.kfn-footer {
  background-color: #3B78B7;
  background-image: none;
  padding: 0;
}
.kfn-footer__top {
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.kfn-footer__brand {
  flex: 1 1 260px;
  max-width: 320px;
}
.kfn-footer__logo-link {
  display: inline-block;
}
.kfn-footer__logo-link img {
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  height: 48px;
  width: auto;
  display: block;
}
.kfn-footer__tagline {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  line-height: 1.6;
}
.kfn-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.kfn-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: background-color .15s ease;
}
.kfn-footer__social a:hover {
  background: rgba(255, 255, 255, .3);
}
.kfn-footer__col {
  flex: 1 1 160px;
}
.kfn-footer__col-title {
  margin: 0 0 16px;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.kfn-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kfn-footer__links a {
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
}
.kfn-footer__links a:hover {
  text-decoration: underline;
}
.kfn-footer__col--lang {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
a.kfn-footer__lang-btn {
  margin-inline-start: 0;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
a.kfn-footer__lang-btn:hover {
  background: rgba(255, 255, 255, .12);
}
.kfn-footer__top-btn {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 100px;
  color: #fff;
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.kfn-footer__top-btn:hover {
  background: rgba(255, 255, 255, .12);
}
.kfn-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 18px 24px;
}
.kfn-footer__bottom p {
  max-width: 1140px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  text-align: center;
}

html[dir="rtl"] .kfn-footer__col--lang {
  align-items: flex-end;
}

@media (max-width: 640px) {
  .kfn-footer__top { padding: 40px 20px 32px; gap: 32px; }
  .kfn-footer__brand { max-width: 100%; }
}

/* ==========================================================================
   Google review cards — Testimonials page. Static grid (no JS/carousel
   library), reviewer initials stand in for a photo since Google doesn't
   expose reviewer avatars to a logged-out viewer. */
.kfn-reviews {
  max-width: 1140px;
  margin: 0 auto 44px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.kfn-review-card {
  background: #fff;
  border: 1px solid #E5E9F0;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, .05);
}
.kfn-review-card__stars {
  display: flex;
  gap: 2px;
}
.kfn-review-card__stars svg {
  width: 16px;
  height: 16px;
}
.kfn-review-card__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: #38404E;
  margin: 0;
  flex: 1;
}
.kfn-review-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #F0F2F6;
}
.kfn-review-card__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3979BB, #6EC1E4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.kfn-review-card__who {
  min-width: 0;
}
.kfn-review-card__name {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #1B2F4C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kfn-review-card__date {
  font-size: 11.5px;
  color: #8A93A6;
}

/* ==========================================================================
   Educational YouTube channel cards — Resources page. */
.kfn-yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.kfn-yt-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.kfn-yt-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.kfn-yt-card__icon svg { width: 28px; height: 28px; }
.kfn-yt-card__name {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1B2F4C;
  margin: 4px 0 0;
}
.kfn-yt-card__lang {
  display: inline-block;
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5B6478;
  background: #F0F2F6;
  border-radius: 100px;
  padding: 2px 10px;
}
.kfn-yt-card__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #5B6478;
  margin: 0;
  flex: 1;
}
.kfn-yt-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
  font-weight: 700;
  font-size: 13.5px;
  color: #CC1F2D;
  text-decoration: none;
}
.kfn-yt-card__link:hover { text-decoration: underline; }
.kfn-yt-card__link svg { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   Gallery lightbox (see wp-content/custom-overrides.js for why Elementor's
   own lightbox never runs here). Prev/next glyphs are plain chars mirrored
   as a pair under RTL so they keep pointing the right way once inset-inline
   swaps which side they sit on. */
.kfn-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10, 14, 24, .92);
  align-items: center;
  justify-content: center;
}
.kfn-lightbox.kfn-lightbox-open {
  display: flex;
}
body.kfn-lightbox-open-body {
  overflow: hidden;
}
.kfn-lightbox__figure {
  margin: 0;
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.kfn-lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.kfn-lightbox__caption {
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  text-align: center;
}
.kfn-lightbox__close,
.kfn-lightbox__nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background-color .15s ease;
}
.kfn-lightbox__close:hover,
.kfn-lightbox__nav:hover {
  background: rgba(255, 255, 255, .25);
}
.kfn-lightbox__close {
  top: 18px;
  inset-inline-end: 18px;
  width: 40px;
  height: 40px;
  font-size: 24px;
}
.kfn-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 28px;
}
.kfn-lightbox__prev { inset-inline-start: 16px; }
.kfn-lightbox__next { inset-inline-end: 16px; }
html[dir="rtl"] .kfn-lightbox__nav {
  transform: translateY(-50%) scaleX(-1);
}

@media (max-width: 600px) {
  .kfn-lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
  .kfn-lightbox__figure { max-width: 94vw; }
}

/* ==========================================================================
   Homepage hero heading (elementor-element-4e6d842e, both languages share
   this element id): the widget's own outer element carries a hardcoded
   text-align:left (desktop) / text-align:center (tablet breakpoint) baked
   into the page from the original LTR design -- the same class of
   pre-existing, not-RTL-aware bug already fixed for heading/paragraph text
   elsewhere in this file. Without this override the Arabic heading text
   itself renders left-aligned instead of right-aligned. !important is
   required because each page embeds its own Elementor CSS with a 3-class
   selector (e.g. .elementor-381 .elementor-element.elementor-element-4e6d842e),
   which beats a plain 2-class override on specificity alone regardless of
   source order. */
html[dir="rtl"] .elementor-element-4e6d842e {
  text-align: right !important;
}

/* Gallery page: WordPress core's default gallery-grid CSS gives every
   .gallery-item a right/bottom padding as its gutter, then cancels the
   outermost edge of that gutter with an equal negative margin on the .gallery
   container itself -- a layout trick that assumes the parent has enough
   spare width to absorb the pull. At mobile/tablet widths there isn't
   enough, so the negative margin drags the grid past the viewport edge and
   forces the whole page to scroll horizontally. Clipping the overflow here
   removes the bleed without touching the column/gutter math itself. */
.elementor-image-gallery {
  overflow: hidden;
}

/* Accessibility: Elementor's built-in "success" button style (used for the
   Call/WhatsApp buttons on the homepage hero, Contact Us, and Curriculum) is
   white text on #5cb85c -- roughly 2.5:1 contrast, well under WCAG AA's
   4.5:1 for normal text. Same hue, darkened to a shade that clears it. */
.elementor-element.elementor-button-success .elementor-button,
.elementor-widget-button .elementor-button .elementor-button-success {
  background-color: #2E7D32;
}

/* Accessibility: the small uppercase caption/eyebrow style reused across
   About Us, Contact Us, Curriculum, Services (incl. subpages), FAQ,
   Resources, and Testimonials -- e.g. "We are happy to hear from you!" on
   Contact Us -- uses #1fc3d2 on white, ~2.1:1 contrast, well under WCAG AA's
   4.5:1. Each instance is Elementor's own generated per-widget CSS (there's
   no shared class to hook), so this lists every element id using that exact
   style across every page; ids are identical between the English and Arabic
   version of each page, so one rule covers both. Same hue, darkened. */
.elementor-element-136224fe,
.elementor-element-6639e698,
.elementor-element-2133c16d,
.elementor-element-4dc2a7a8,
.elementor-element-e4ee137,
.elementor-element-11c9df9,
.elementor-element-76e3bc9,
.elementor-element-b6e3b1a,
.elementor-element-54e8239,
.elementor-element-76f4ce2,
.elementor-element-79505d6a,
.elementor-element-e6258f7 {
  color: #0E7C8C !important;
}

/* Inline success/error feedback for the Contact/Careers/Book-a-Tour forms
   (see custom-overrides.js Web3Forms submit handler). Hidden by default;
   the JS only ever sets non-empty text on it, so :empty covers idle state
   without a separate visibility class. */
.kfn-form-message {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
}
.kfn-form-message:empty {
  display: none;
}
.kfn-form-message--success {
  background-color: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}
.kfn-form-message--error {
  background-color: #FDECEA;
  color: #C62828;
  border: 1px solid #F5C6CB;
}