/* ==========================================================================
   Homepage additions.

   The original Elementor export left several widgets empty (the hero slider, the
   four impact counters, the events grid and the newsletter form), so their CSS
   was never generated into page-7076.css. These rules fill exactly those gaps —
   the hero values are carried over verbatim from the site's own hero-slider.js,
   the rest follow the palette in modern-polish.css.

   Loaded after page-7076.css and modern-polish.css. Everything else on the page
   is styled by the original stylesheets.
   ========================================================================== */

:root {
  --bl-blue: #4892da;
  --bl-navy: #002866;
  --bl-deep: #001b45;
  --bl-yellow: #ffee00;
}

/* --------------------------------------------------------------------------
   burj.css styles the header, footer and internal pages, and sets a global
   body font plus a heading treatment. Inside the Elementor tree the original
   theme's typography has to win, so re-assert it here — page-7076.css already
   out-specifies these rules for the headings it styles explicitly, this covers
   the rest.
   -------------------------------------------------------------------------- */
.elementor.elementor-7076 { font-family: var(--bl-font); }
[dir="rtl"] .elementor.elementor-7076 { font-family: var(--bl-font); }

.elementor.elementor-7076 h1,
.elementor.elementor-7076 h2,
.elementor.elementor-7076 h3,
.elementor.elementor-7076 h4 {
  font-weight: 700;
  letter-spacing: normal;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Spacing corrections.

   On the original page several bands overlapped the one above them with negative
   margins, and the layout paid for that with very tall paddings — 165px on
   41b6192a, 230px on 2a5250d1 and a 190px tail on the "Together We Can" band.
   Nothing overlaps in this rebuild, so those read as ~585px of blank page.
   Collapsed here rather than in page-7076.css so the generated file stays as it
   came off the live site.
   -------------------------------------------------------------------------- */
.elementor-7076 .elementor-element.elementor-element-41b6192a { padding: 0 !important; }
.elementor-7076 .elementor-element.elementor-element-2a5250d1 { padding: 0 !important; }
.elementor-7076 .elementor-element.elementor-element-4330097f { padding: 90px 0 90px !important; }

/* empty widget wraps in those bands must not keep their own height either */
.elementor-7076 .elementor-element-41b6192a .elementor-widget-wrap:empty,
.elementor-7076 .elementor-element-2a5250d1 .elementor-widget-wrap:empty,
.elementor-7076 .elementor-element-2297593  .elementor-widget-wrap:empty { min-height: 0; padding: 0; }

/* Elementor's default 20px gap under every widget stacks up badly in the
   narrow footer-style columns of this page */
.elementor-7076 .elementor-widget:not(:last-child) { margin-block-end: 14px; }

/* ------------------------------------------------------------------- hero */
.bl-hero {
  position: relative;
  width: 100%;
  height: clamp(400px, 66vh, 640px);
  min-height: 400px;
  overflow: hidden;
  background: var(--bl-deep);
  isolation: isolate;
}
.bl-hero .swiper-wrapper { height: 100%; }
.bl-hero .swiper-slide { height: 100%; }

.bl-hero-slide {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
/* slow Ken Burns push, exactly as the original hero did */
.bl-hero .swiper-slide-active .bl-hero-slide { animation: bl-kb 7.5s ease-out forwards; }
@keyframes bl-kb { from { background-size: 103%; } to { background-size: 113%; } }

.bl-hero-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(0,20,50,.28), rgba(0,20,50,0) 26%, rgba(0,20,50,0) 58%, rgba(0,20,50,.75));
}
.bl-hero-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 1140px;
  margin: 0 auto; padding: 0 20px 64px;
  color: #fff;
}
.bl-hero-date {
  display: inline-block; margin-bottom: 12px; padding: 4px 14px;
  font-size: 13px; border-radius: 999px;
  background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.bl-hero-title {
  margin: 0 0 12px; max-width: 780px;
  font-family: var(--bl-font);
  font-size: clamp(26px, 3.6vw, 46px); font-weight: 700; line-height: 1.2; color: #fff;
  /* keep the title legible over bright/busy slide photos */
  text-shadow: 0 2px 6px rgba(0,20,45,.55), 0 6px 24px rgba(0,20,45,.45);
}
.bl-hero-title a { color: #fff; text-decoration: none; transition: opacity .2s var(--bl-ease); }
.bl-hero-title a:hover { text-decoration: none; opacity: .9; }
.bl-hero-text {
  max-width: 660px; margin: 0 0 20px; font-size: 17px; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 5px rgba(0,20,45,.55), 0 3px 14px rgba(0,20,45,.4);
}

.bl-hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 54px; height: 54px; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 26px; line-height: 1; color: #fff;
  background: rgba(255,255,255,.15); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.bl-hero-nav:hover { background: rgba(255,255,255,.32); transform: translateY(-50%) scale(1.06); }
.bl-hero-prev { inset-inline-start: 24px; }
.bl-hero-next { inset-inline-end: 24px; }
/* the eicon chevrons are drawn LTR; mirror them in Arabic */
[dir="rtl"] .bl-hero-nav i { transform: scaleX(-1); }

.bl-hero-dots.swiper-pagination {
  position: absolute; inset-inline: 0; bottom: 22px; z-index: 4;
  display: flex; gap: 10px; justify-content: center;
}
.bl-hero-dots .swiper-pagination-bullet {
  width: 11px; height: 11px; margin: 0 !important;
  border: 2px solid rgba(255,255,255,.9); border-radius: 50%;
  background: transparent; opacity: 1;
  transition: width .3s ease, background .3s ease, border-radius .3s ease;
}
.bl-hero-dots .swiper-pagination-bullet-active { background: #fff; width: 32px; border-radius: 7px; }

/* --------------------------------------------------- get involved icons */
.bl-action-svg { width: 100%; max-width: 110px; height: auto; display: block; margin-inline: auto; }

/* ---------------------------------------------------------- project cards */
/* position:relative so the absolutely-positioned prev/next arrows anchor to the
   carousel itself. widget-image-carousel.min.css forces this .swiper to
   `position: static` at (0,2,0) specificity, so we must match/beat it — hence the
   .elementor-widget-image-carousel prefix here and on the supporters rule below. */
.elementor-widget-image-carousel .swiper.bl-projects-carousel { position: relative; }
.bl-projects-carousel .swiper-slide-inner { display: block; padding: 4px; overflow: hidden; }
.bl-projects-carousel .swiper-slide-image {
  /* shorter box (less built-in logo whitespace) + upscale so the artwork fills
     more of the tile — the request was "make the images a bit bigger". */
  width: 100%; height: auto; aspect-ratio: 4 / 2.7; object-fit: contain;
  transform: scale(1.32); transform-origin: center;
  transition: transform .45s ease;
}
.bl-projects-carousel .swiper-slide:hover .swiper-slide-image { transform: scale(1.42); }

/* ------------------------------------------------ carousel arrows (shared) */
/* Anchor to the carousel, vertically centre, and sit above the slides. The
   .elementor-arrows-position-inside prefix keeps specificity above Elementor's
   own arrow rules so our placement wins. */
.elementor-arrows-position-inside .bl-projects-carousel .elementor-swiper-button,
.elementor-arrows-position-inside .bl-supporters-carousel .elementor-swiper-button {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6; cursor: pointer;
}
/* prev = inline-start (left in LTR, right in RTL); next = inline-end. This keeps
   "previous" on the side the earlier slides sit on in each writing direction, so
   the arrow always scrolls the way it points. */
.elementor-arrows-position-inside .bl-projects-carousel .elementor-swiper-button-prev,
.elementor-arrows-position-inside .bl-supporters-carousel .elementor-swiper-button-prev {
  inset-inline-start: -8px; inset-inline-end: auto;
}
.elementor-arrows-position-inside .bl-projects-carousel .elementor-swiper-button-next,
.elementor-arrows-position-inside .bl-supporters-carousel .elementor-swiper-button-next {
  inset-inline-end: -8px; inset-inline-start: auto;
}
/* The eicon chevrons are drawn LTR; mirror them in Arabic so the arrow points
   the way it actually scrolls (same treatment as the hero nav above). */
[dir="rtl"] .bl-projects-carousel .elementor-swiper-button i,
[dir="rtl"] .bl-supporters-carousel .elementor-swiper-button i { transform: scaleX(-1); }

/* ---------------------------------------------------------------- gallery */
/* page-7076.css sizes .eae-gallery-item at calc(100%/3) with a 0.66 ratio;
   the same geometry, without pulling in the EAE isotope/tilt JS */
.bl-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bl-gallery-item {
  position: relative; display: block; overflow: hidden;
  /* the original used a padding-bottom ratio hack; percentage padding resolves
     against the item's own width, so the 33.33% written here squashed every
     tile to a third of its height. aspect-ratio states the intent directly. */
  aspect-ratio: 1 / 0.66;
}
.bl-gallery-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s ease;
}
.bl-gallery-item:hover img { transform: scale(1.09); }
.bl-gallery-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 22px; background: rgba(0, 40, 102, .55);
  opacity: 0; transition: opacity .3s ease;
}
.bl-gallery-item:hover .bl-gallery-overlay { opacity: 1; }
[dir="rtl"] .bl-gallery-overlay i { transform: scaleX(-1); }

/* ----------------------------------------------- strategic/newsletter tiles */
/* The Elementor page CSS points these three section backgrounds at
   /public/assets/theme/burj/<date>/… which 404s — the real files sit under
   /public/files/uploads/<date>/…. Re-point them to the local copies (relative to
   THIS css file, so no absolute links) and lay a brand-colour tint over the photo
   so it shows through while the white text stays readable. */
/* Both tiles: text on the RIGHT (RTL default), publication photo on the LEFT. A
   right→left gradient darkens the text side and stays clear on the photo side (so
   the image shows more); the photo is anchored left. The strategic photo sits on a
   bright yellow ground, so it's blended in `luminosity` to recolour it to the tile
   blue instead of turning green. Paths are relative to this file — nothing external. */
.elementor-element-3d4b02ee > .elementor-widget-wrap.elementor-element-populated {
  background-color: #1f68c2 !important;
  background-image: linear-gradient(to left, rgba(6,34,80,.85) 0%, rgba(6,34,80,.34) 46%, rgba(6,34,80,.05) 100%),
                    url('../../../files/uploads/2022/12/newsletter-annual-04.webp') !important;
  background-blend-mode: normal, luminosity !important;
  background-size: cover, auto 145% !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
}
.elementor-element-12e6c910 > .elementor-widget-wrap.elementor-element-populated {
  background-color: #01356b !important;
  background-image: linear-gradient(to left, rgba(1,28,64,.85) 0%, rgba(1,28,64,.32) 46%, rgba(1,28,64,.05) 100%),
                    url('../../../files/uploads/2022/12/newsletter-annual-03.webp') !important;
  background-size: cover, auto 145% !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
}

/* --------------------------------------------------------------- counters */
.elementor-element-5278ddb3 {
  background-color: var(--bl-navy);
  background-image: linear-gradient(rgba(0,40,102,.38), rgba(0,40,102,.38)),
                    url('../../../files/uploads/2022/10/cst-bg-count.jpg') !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
}
.elementor-element-5278ddb3 .elementor-heading-title { color: #fff; }
.bl-counter { text-align: center; color: #fff; padding: 10px 0; }
.bl-counter-n {
  display: block; font-family: var(--bl-font);
  font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1;
}
.bl-counter-label {
  display: block; margin-top: 6px; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; opacity: .9;
}
[dir="rtl"] .bl-counter-label { letter-spacing: 0; text-transform: none; }

/* ----------------------------------------------------------------- events */
.bl-events {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 10px 0 34px;
}
.bl-event {
  display: block; text-decoration: none; background: #fff; overflow: hidden;
  border-radius: 14px; box-shadow: 0 8px 26px rgba(16, 32, 56, .10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bl-event:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(16, 32, 56, .16); }
.bl-event-media { position: relative; display: block; aspect-ratio: 16 / 10; background: #eef2f7; overflow: hidden; }
.bl-event-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-event-date {
  position: absolute; inset-inline-start: 12px; bottom: 12px;
  background: var(--bl-blue); color: #fff; border-radius: 10px;
  padding: 6px 10px; font-size: 12px; line-height: 1.15; text-align: center;
}
.bl-event-date strong { display: block; font-size: 20px; font-weight: 800; }
.bl-event-title {
  display: block; padding: 14px 16px 18px;
  color: var(--bl-navy); font-weight: 600; font-size: 15px; line-height: 1.45;
}

/* ------------------------------------------------------------- newsletter */
.bl-newsletter-row { display: flex; gap: 10px; }
.bl-newsletter input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  padding: 13px 16px; border: 1px solid #dfe5ee; border-radius: 10px;
  font: inherit; background: #fff;
}
.bl-newsletter input[type="email"]:focus {
  outline: none; border-color: var(--bl-blue); box-shadow: 0 0 0 4px rgba(72, 146, 218, .2);
}
.bl-newsletter button { flex: 0 0 auto; cursor: pointer; border: 0; }
.burj-newsletter-msg { font-size: 14px; margin-top: 8px; min-height: 1.2em; }
.burj-newsletter-msg.ok  { color: #17794a; }
.burj-newsletter-msg.err { color: #c0392b; }

/* ------------------------------------------------------------ supporters */
.elementor-widget-image-carousel .swiper.bl-supporters-carousel { position: relative; }
.bl-supporters-carousel .swiper-slide-inner {
  background: transparent; border-radius: 0; padding: 0;
  display: block; height: 120px;
  transition: transform .3s ease;
}
.bl-supporters-carousel .swiper-slide:hover .swiper-slide-inner {
  transform: translateY(-5px);
}
/* fill the former card footprint — logo as large as fits the whole slide */
.bl-supporters-carousel .swiper-slide-image { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }

/* placeholder swapped in by burj.js when an upload has not been copied over yet */
img.is-placeholder { object-fit: contain !important; background: #eef2f7; padding: 10%; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .bl-events { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .bl-events { grid-template-columns: 1fr; }
  .bl-gallery { grid-template-columns: repeat(2, 1fr); }
  .bl-newsletter-row { flex-direction: column; }
}
@media (max-width: 600px) {
  .bl-hero { height: 58vh; }
  .bl-hero-nav { width: 44px; height: 44px; font-size: 22px; }
  .bl-hero-prev { inset-inline-start: 12px; }
  .bl-hero-next { inset-inline-end: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-hero .swiper-slide-active .bl-hero-slide { animation: none; }
}