/* ==========================================================================
   base.css — shared chrome for every page of the Dar Al Logha clone
   (reset, design tokens, container, buttons, header, nav, language switcher,
   footer). Values mirror hello-elementor 3.3 + Elementor 3.27 defaults and the
   kit-6 / header 28 / footer 41 (AR: 20 / 828) Elementor CSS.

   PAGE CONTRACT (what every page must set on <body>):
     <body data-page="home|curriculum|contact" data-alt-lang="<url>">
       data-page     : key of the current page. The matching nav link
                       (a.nav__link[data-nav="<key>"]) gets the "current" look
                       (desktop underline / mobile dropdown highlight) via CSS;
                       main.js additionally sets aria-current="page" on it.
       data-alt-lang : URL of the same page in the other language. The header
                       partial ships the language-switcher link with
                       href="#alt-lang"; main.js rewrites that href from this
                       attribute (Polylang links to the *translated* page, not
                       to the other home page).
   Pages must also set <html lang="en-US"> or <html lang="ar" dir="rtl">; all
   RTL differences below key off [dir="rtl"]. Wrap the page content in
   <main id="content"> (target of the header's "Skip to content" link).
   Page structure: <!-- @include partials/head.html --> + <title> inside <head>,
   then header.<lang>.html / <main> / footer.<lang>.html inside <body>.
   Visibility helpers .hide-mobile / .hide-tablet / .hide-desktop replicate
   Elementor's elementor-hidden-{mobile,tablet,desktop}.
   Breakpoints (Elementor): desktop >1024px, tablet 768–1024px, mobile ≤767px.
   Known, intentional omissions: the Polylang switcher's hidden flag <img>
   (display:none on the live site; the globe is a CSS background) is not in
   the markup, so the verify tool lists its alt ("العربية" / "English") under
   images.refAlts.missing — informational only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset — hello-elementor/style.min.css + Elementor frontend.min.css
   -------------------------------------------------------------------------- */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
*,
::after,
::before {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  margin-block-start: .5rem;
  margin-block-end: 1rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p {
  margin-block-start: 0;
  margin-block-end: .9rem;
}
a {
  background-color: transparent;
  color: #c36;
  text-decoration: none;
  box-shadow: none;
}
a:active,
a:hover {
  color: #336;
}
/* (the theme's a:not([href]) { color: inherit } rule is deliberately omitted:
   every href-less anchor on the site — social icons, the mobile "Login" item —
   gets an explicit colour from its component, as in the Elementor CSS) */
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img {
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  max-width: 100%;
}
figure { margin: 0; }
dd, dl, dt, li, ol, ul {
  margin-block-start: 0;
  margin-block-end: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  background-color: transparent;
  margin: 0;
}
[hidden], template { display: none; }

/* forms (hello-elementor defaults — used by the contact page) */
label {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search],
input[type=tel], input[type=text], input[type=url], select, textarea {
  width: 100%;
  border: 1px solid #666;
  border-radius: 3px;
  padding: .5rem 1rem;
  transition: all .3s;
}
input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus,
select:focus, textarea:focus {
  border-color: #333;
}
button, input { overflow: visible; }
button, select { text-transform: none; }
[type=button], [type=reset], [type=submit], button {
  width: auto;
  -webkit-appearance: button;
}
[type=button], [type=submit], button {
  display: inline-block;
  font-weight: 400;
  color: #c36;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  background-color: transparent;
  border: 1px solid #c36;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: 3px;
  transition: all .3s;
}
[type=button]:focus:not(:focus-visible), [type=submit]:focus:not(:focus-visible), button:focus:not(:focus-visible) {
  outline: none;
}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
  color: #fff;
  background-color: #c36;
  text-decoration: none;
}
[type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; }
textarea {
  overflow: auto;
  resize: vertical;
}
select { display: block; }

/* --------------------------------------------------------------------------
   2. Design tokens — Elementor kit 6 (post-6.css)
   -------------------------------------------------------------------------- */
:root {
  /* colours */
  --color-primary: #111414;
  --color-secondary: #CE12E2;
  --color-text: #ED1C24;
  --color-accent: #90DDE9;
  --color-green: #0B9444;   /* kit colour 618a0b8 */

  /* typography presets (Tajawal everywhere; sizes are vw on desktop) */
  --font-tajawal: "Tajawal", sans-serif;
  --type-primary-size: 1.2vw;   --type-primary-weight: 500; --type-primary-lh: normal;
  --type-secondary-size: 1.1vw; --type-secondary-weight: 300; --type-secondary-lh: normal;
  --type-text-size: .9vw;       --type-text-weight: 300;    --type-text-lh: normal;
  --type-accent-size: .9vw;     --type-accent-weight: 500;  --type-accent-lh: normal;
  --type-bold-size: 1.1vw;      --type-bold-weight: 700;    --type-bold-lh: normal; /* kit preset "d829fdc" */

  /* layout */
  --container-max: 80vw;   /* Elementor --container-max-width */
  --widget-gap: 20px;      /* widgets spacing 20px */
  --con-pad: 10px;         /* Elementor default container padding */
}
@media (max-width: 1024px) {
  :root {
    --type-primary-size: 24px;   --type-primary-lh: 30px;
    --type-secondary-size: 20px; --type-secondary-lh: 24px;
    --type-text-size: 16px;      --type-text-lh: 20px;
    --type-accent-size: 16px;    --type-accent-lh: 20px;
    --type-bold-size: 20px;      --type-bold-lh: 24px;
    --container-max: 1024px;
  }
}
@media (max-width: 767px) {
  :root { --container-max: 767px; }
}

/* --------------------------------------------------------------------------
   3. Helpers — container, screen-reader text, responsive visibility
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin-inline: auto;
}
/* Elementor .elementor-screen-only / theme .screen-reader-text */
.sr-only {
  position: absolute;
  top: -10000em;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.skip-link:focus {
  position: absolute !important;
  top: 5px;
  left: 5px;
  z-index: 100000;
  display: block;
  width: auto;
  height: auto;
  padding: 12px 24px;
  clip: auto !important;
  clip-path: none;
  background-color: #eee;
  color: #333;
  font-size: 1rem;
  line-height: normal;
  text-decoration: none;
}
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .hide-tablet { display: none !important; } }
@media (min-width: 1025px) { .hide-desktop { display: none !important; } }

/* --------------------------------------------------------------------------
   4. Buttons — Elementor .elementor-button defaults + kit "accent" typography
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 3px;
  background-color: var(--color-accent);
  color: #fff;
  fill: #fff;
  font-family: var(--font-tajawal);
  font-size: var(--type-accent-size);
  font-weight: var(--type-accent-weight);
  line-height: 1;
  text-align: center;
  transition: all .3s;
}
.btn:focus,
.btn:hover,
.btn:visited {
  color: #fff;
}
.btn__content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
}
.btn__text { display: inline-block; }
.btn span { text-decoration: inherit; }

/* --------------------------------------------------------------------------
   5. Header — Elementor header template 28 (EN) / 20 (AR)
   -------------------------------------------------------------------------- */
.header {
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 120px;
}
.header__inner {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin: 0 auto;
}
.header__logo,
.header__nav,
.header__actions {
  position: relative;
  z-index: 999;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--widget-gap);
  padding: var(--con-pad);
}
.header__logo   { width: 25%; }
.header__nav    { width: 50%; }
.header__actions {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 25%;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .header__nav     { width: 44%; }
  .header__actions { width: 32%; }
}
/* widgets inside the flex columns/rows may shrink below their content
   (Elementor: .e-con .elementor-widget { min-width: 0 }) */
.logo, .nav, .lang, .header__login,
.social, .footer__copy, .footer__title, .footer__list {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 767px) {
  .header { min-height: 90px; }
  .header__inner { flex-wrap: wrap; }
  .header__logo    { order: 1; width: 50%; }
  .header__actions { order: 2; width: 33%; }
  .header__nav     { order: 3; width: 17%; }
}

/* logo (theme-site-logo widget) */
.logo {
  display: flex;
  width: 100%;
}
.logo__link { display: block; }
.logo__img {
  display: block;
  width: 13vw;
  height: auto;
}
@media (max-width: 1024px) { .logo__img { width: 100%; } }
@media (max-width: 767px)  { .logo__img { max-width: 150px; } }

/* LOGIN button (button widget 033d457 / ce265e4). The link sits in a
   padding-less wrapper (like the Elementor widget) so that the flex
   shrinking in the actions row is weighted by the whole button width. */
.header__login { display: block; }
.header__login-link {
  border-radius: 12px;
  color: var(--color-primary);
  fill: var(--color-primary);
  font-size: 1.2vw;
  font-weight: 500;
}
.header__login-link:hover,
.header__login-link:focus,
.header__login-link:visited {
  color: var(--color-primary);
}
@media (max-width: 1024px) { .header__login-link { font-size: 20px; } }

/* --------------------------------------------------------------------------
   6. Navigation — Elementor nav-menu widget (horizontal, underline pointer,
      fade animation; burger dropdown on mobile)
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.nav__main { display: flex; }
.nav__list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  line-height: normal;
}
.nav__item {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  border-width: 0;
}
.nav__link {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: 0 1px;
  color: var(--color-primary);
  fill: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 1.4vw;
  text-transform: uppercase;
  white-space: nowrap;
  transition: .4s;
}
.nav__main .nav__item:not(:first-child) > .nav__link { margin-inline-start: 16px; } /* item spacing 32px */
.nav__main .nav__item:not(:last-child)  > .nav__link { margin-inline-end: 16px; }
.nav__link:hover,
.nav__link:focus,
[data-page="home"]       .nav__link[data-nav="home"],
[data-page="curriculum"] .nav__link[data-nav="curriculum"],
[data-page="contact"]    .nav__link[data-nav="contact"] {
  color: var(--color-primary);
  fill: var(--color-primary);
}
/* underline pointer (e--pointer-underline, e--animation-fade) */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  opacity: 0;
  transition: .3s;
  transition-timing-function: cubic-bezier(.58, .3, .005, 1);
}
.nav__link:hover::after,
.nav__link:focus::after,
[data-page="home"]       .nav__link[data-nav="home"]::after,
[data-page="curriculum"] .nav__link[data-nav="curriculum"]::after,
[data-page="contact"]    .nav__link[data-nav="contact"]::after {
  opacity: 1;
}
@media (max-width: 1024px) {
  .nav__link {
    font-size: 18px;
    line-height: 24px;
  }
}
@media (max-width: 767px) {
  .nav__main { display: none; }
}

/* hamburger toggle (elementor-menu-toggle) — hidden ≥768px */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-left: auto;           /* physical left on the live site in both languages */
  padding: .25em;
  border: 0 solid;
  border-radius: 3px;
  background-color: #0D1B3C;
  color: #fff;
  font-size: 22px;
  line-height: 1.5;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.nav__toggle:hover,
.nav__toggle:focus {
  background-color: #0D1B3C;
  color: #fff;
}
.nav__toggle-icon {
  display: block;
  width: 1em;
  height: 1em;
  fill: #fff;
}
.nav__toggle.is-active .nav__toggle-icon--open,
.nav__toggle:not(.is-active) .nav__toggle-icon--close {
  display: none;
}
@media (max-width: 767px) {
  .nav__toggle { display: flex; }
}

/* mobile dropdown (elementor-nav-menu--dropdown, stretched to the viewport).
   Live site: JS sets top = bottom edge of the 33px toggle (vertically centred in
   the header) and the widget CSS adds margin-top:20px !important; expressed
   from the header: 50% + 33px/2 + 20px (= 81.5px in the 90px mobile header). */
.nav__dropdown {
  position: absolute;
  top: calc(50% + 36.5px);
  left: 0;
  right: 0;
  z-index: 9997;
  display: none;
  height: 100vh;
  max-height: 0;
  padding-top: 15px;
  overflow: hidden;
  background-color: #fff;
  font-size: 13px;
  transform: scaleY(0);
  transform-origin: top;
  transition: max-height .3s, transform .3s;
}
.nav__dropdown.is-open {
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  transform: scaleY(1);
  animation: hide-scroll .3s backwards;
}
@keyframes hide-scroll {
  0%, to { overflow: hidden; }
}
.nav__dropdown .nav__list {
  display: block;
  margin: 0;
}
.nav__dropdown .nav__item {
  display: block;
}
.nav__dropdown .nav__link {
  padding: 10px 20px;
  font-size: 1.2vw;
}
.nav__dropdown .nav__link::after { display: none; }
.nav__dropdown .nav__link:hover,
.nav__dropdown .nav__link:focus,
[data-page="home"]       .nav__dropdown .nav__link[data-nav="home"],
[data-page="curriculum"] .nav__dropdown .nav__link[data-nav="curriculum"],
[data-page="contact"]    .nav__dropdown .nav__link[data-nav="contact"] {
  background-color: var(--color-accent);
  color: var(--color-primary);
}
.nav__item--mobile { display: none; }          /* "Login" item: mobile dropdown only */
@media (max-width: 1024px) {
  .nav__dropdown .nav__link {
    font-size: 24px;
    line-height: 24px;
  }
}
@media (max-width: 767px) {
  .nav__dropdown { display: block; }
  .nav__dropdown .nav__item--mobile { display: block; }
}

/* --------------------------------------------------------------------------
   Curriculum sub-menu (added 2026-09-17): "Curriculum" is a button that opens
   a small panel with the Arabic / Islamic pages. Desktop + tablet: opens on
   hover / focus / click (click for touch devices). Mobile burger list: the
   two entries are always shown, indented under a "Curriculum" label.
   Current page: <body data-page="curriculum" data-subpage="arabic|islamic">.
   -------------------------------------------------------------------------- */
/* the parent is a <button>: undo the generic button reset (border, #c36 hover fill) */
button.nav__link--parent,
button.nav__link--parent:hover,
button.nav__link--parent:focus {
  margin: 0;
  padding: 0 1px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 500;
  text-align: start;
  user-select: auto;
  -webkit-appearance: none;
  appearance: none;
}
button.nav__link--parent:focus:not(:focus-visible) { outline: none; }
.nav__caret {
  flex: none;
  width: .75em;
  height: .75em;
  margin-inline-start: .3em;
  transition: transform .3s;
}
.nav__item--has-sub:hover        > .nav__link--parent .nav__caret,
.nav__item--has-sub:focus-within > .nav__link--parent .nav__caret,
.nav__item--has-sub.is-open      > .nav__link--parent .nav__caret { transform: rotate(180deg); }
.nav__sub {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 9998;
  min-width: 100%;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(17, 20, 20, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.nav__item--has-sub:hover        > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub,
.nav__item--has-sub.is-open      > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__sub-item { display: block; margin: 0; padding: 0; }
.nav__sub-link {
  display: block;
  padding: 10px 22px;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: 1.05vw;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .25s;
}
.nav__sub-link:hover,
.nav__sub-link:focus,
[data-subpage="arabic"]  .nav__sub-link[data-subnav="arabic"],
[data-subpage="islamic"] .nav__sub-link[data-subnav="islamic"] {
  background-color: var(--color-accent);
  color: var(--color-primary);
}
@media (max-width: 1024px) {
  .nav__sub-link { font-size: 16px; }
}
/* burger list (mobile): flat, indented entries under a non-interactive label */
.nav__link--label { cursor: default; }
.nav__dropdown .nav__item--group { display: block; }
.nav__dropdown .nav__sub {
  position: static;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__dropdown .nav__sub-link {
  padding: 10px 20px 10px 44px;
  font-size: 20px;
  line-height: 24px;
  text-transform: none;
}
[dir="rtl"] .nav__dropdown .nav__sub-link { padding: 10px 44px 10px 20px; }
/* the parent label is not "current" on its own; the underline stays on the desktop button */
[data-page="curriculum"] .nav__dropdown .nav__link--label[data-nav="curriculum"] { background-color: transparent; }
[data-page="curriculum"][data-subpage="arabic"]  .nav__dropdown .nav__sub-link[data-subnav="arabic"],
[data-page="curriculum"][data-subpage="islamic"] .nav__dropdown .nav__sub-link[data-subnav="islamic"] { background-color: var(--color-accent); }

/* --------------------------------------------------------------------------
   7. Language switcher — Polylang/Connect widget (globe + language name)
   -------------------------------------------------------------------------- */
.lang { display: block; }
.lang__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.lang__item { margin: 0; }
.lang__link {
  display: inline-block;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: 1.2vw;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.lang__link:hover,
.lang__link:focus {
  color: var(--color-primary);
}
.lang__icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 15px;
  line-height: .5em;
  background: url("../img/Globe.svg") top center / contain no-repeat;
}
.lang__name {
  display: inline-block;
  vertical-align: middle;
  padding-inline-start: 10px;
}
@media (min-width: 1200px) {
  .lang__icon {
    width: 1.5vw;
    height: calc(1.5vw * .75);
  }
}
@media (max-width: 1024px) {
  .lang__link {
    font-size: 20px;
    line-height: 30px;
  }
}
@media (max-width: 767px) {
  .lang__name { padding-top: 5px; }
}

/* --------------------------------------------------------------------------
   8. Footer — Elementor footer template 41 (EN, boxed) / 828 (AR, full width)
   -------------------------------------------------------------------------- */
.footer {
  display: flex;
  width: 100%;
  padding: 5vw;
  background-color: #01174C;
}
.footer__inner {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin: 0 auto;
}
.footer__inner--full { max-width: none; }   /* AR footer: full-width container */
.footer__brand,
.footer__spacer,
.footer__menu,
.footer__contact {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--widget-gap);
  padding: var(--con-pad);
}
.footer__brand   { width: 30%; gap: 1vw; }
.footer__spacer  { width: 20%; }
.footer__menu    { width: 25%; }
.footer__contact { width: 25%; }
@media (max-width: 767px) {
  .footer { padding: 5vw 0; }
  .footer__inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .footer__brand   { width: 50%; }
  .footer__contact { width: 50%; }
}

/* social icons (social-icons widget, rounded shape, transparent background) */
.social {
  --icon-size: 2vw;
  --icon-gap: 1vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--icon-gap);
  font-size: 0;
  line-height: 1;
}
.social--mobile {
  --icon-size: 25px;
  --icon-gap: 10px;
  justify-content: flex-start;
}
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 10%;
  background-color: transparent;
  color: #fff;
  fill: #fff;
  font-size: var(--icon-size);
  line-height: var(--icon-size);
  text-align: center;
  cursor: pointer;
  transition: all .3s;
}
.social__link:hover {
  color: #fff;
  opacity: .9;
}
.social__link svg {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  fill: #fff;
}
@media (max-width: 1024px) {
  .social { --icon-size: 24px; }
  .social--mobile { --icon-size: 25px; }
}

/* copyright line (heading widget c8cdb58) */
.footer__copy {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--font-tajawal);
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 1.5vw;
  text-align: center;
}
@media (max-width: 1024px) {
  .footer__copy {
    font-size: 20px;
    line-height: 24px;
  }
}
@media (max-width: 767px) {
  .footer__copy {
    font-size: 4vw;
    line-height: 7vw;
  }
}

/* "CONTACT US" heading (heading widget eb3eba2) */
.footer__title {
  margin: 0;
  padding: 0;
  color: var(--color-accent);
  font-family: var(--font-tajawal);
  font-size: 1.3vw;
  font-weight: 700;
  line-height: 1.5;
}
.footer__title a,
.footer__title a:hover,
.footer__title a:focus {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
@media (max-width: 1024px) { .footer__title { font-size: 18px; } }
@media (max-width: 767px)  { .footer__title { font-size: 6vw; } }

/* link lists (icon-list widgets a3bb701 / b2201f3, no icons, 5px spacing) */
.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__list-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.footer__list-item:not(:last-child)  { padding-bottom: 2.5px; }
.footer__list-item:not(:first-child) { margin-top: 2.5px; }
.footer__list-link {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-tajawal);
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 2vw;
}
.footer__list-text {
  color: #FFFFFFCF;
  transition: color .3s;
}
@media (max-width: 1024px) {
  .footer__list-link {
    font-size: 16px;
    line-height: 1.5em;
  }
}
@media (max-width: 767px) {
  .footer__list-link { font-size: 4vw; }
}

/* --------------------------------------------------------------------------
   9. RTL (Arabic) overrides — only where the live AR templates really differ
   -------------------------------------------------------------------------- */
/* footer 828 custom CSS: every span of the contact icon-list is direction:ltr. The
   .footer__list-text span is a (blockified) flex item, so this starts an LTR bidi
   paragraph and "+971 2 6664499" keeps its LTR order inside the RTL page. */
[dir="rtl"] .footer__contact-list span { direction: ltr; }
[dir="rtl"] .social--mobile { --icon-gap: 20px; }
@media (min-width: 768px) and (max-width: 1024px) {
  [dir="rtl"] .footer__contact { width: 163.625px; }
}
@media (max-width: 1024px) {
  [dir="rtl"] .footer__contact-list {
    width: 152.625px;
    max-width: min(100%, 152.625px);
  }
}