/* ============================================
   Custom CSS Overrides
   This file contains all custom styling overrides
   Add your custom styles here to avoid losing them on rebuild
   ============================================ */

/* ============================================
   Countries section (#country-performance)
   - Tab swiper: .markets-tabs (and .market-nav buttons) — KEEP AS-IS.
   - Content panel: .markets-content and its children — style changes go here.
     Structure: .markets-content > .market-content (per country)
       > .market-content-left (flag, title, intro, CEO name/position, CEO image)
       > .market-content-right > .inner
         > .market-content-right-inner-top (customers, operator importance)
         > .market-content-right-inner-bottom (financial table)
   New styles for the content panel only: use countries-section-content.css
   ============================================ */

/* Remove semicircle shapes from sections */
section,
section > *,
.section-introduction,
.section-group-results,
.section-strategy,
.section-markets,
.section-esg {
  clip-path: none !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Remove semicircle pseudo-elements */
section::before,
section::after,
.section-introduction::before,
.section-introduction::after,
.section-group-results::before,
.section-group-results::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Group results list – more space between items from 629px up */
@media only screen and (min-width: 629px) {
  .section-group-results[data-astro-cid-5yv2cfx7] .group-results-wrapper[data-astro-cid-5yv2cfx7] .group-results-inner[data-astro-cid-5yv2cfx7] .group-results-list[data-astro-cid-5yv2cfx7],
  .section-group-results[data-astro-cid-325fmfsg] .group-results-wrapper[data-astro-cid-325fmfsg] .group-results-inner[data-astro-cid-325fmfsg] .group-results-list[data-astro-cid-325fmfsg] {
    gap: 44px !important;
  }
}

@media only screen and (min-width: 1024px) {
  .section-group-results[data-astro-cid-5yv2cfx7] .group-results-wrapper[data-astro-cid-5yv2cfx7] .group-results-inner[data-astro-cid-5yv2cfx7] .group-results-list[data-astro-cid-5yv2cfx7] .result-element[data-astro-cid-5yv2cfx7],
  .section-group-results[data-astro-cid-325fmfsg] .group-results-wrapper[data-astro-cid-325fmfsg] .group-results-inner[data-astro-cid-325fmfsg] .group-results-list[data-astro-cid-325fmfsg] .result-element[data-astro-cid-325fmfsg] {
    padding-inline: 0 !important;
    max-width: calc(33.33% - 54px) !important;
  }
}
/* Hide arc shape images */
.arc-shape,
img[class*="arc"],
[class*="arc-shape"] {
  display: none !important;
}

/* Reduce section heights */
section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  min-height: auto !important;
  height: auto !important;
}

/* Keep hero section unchanged - clip overflow so blob doesn't show above */
.section-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: hidden !important;
  background-color: #FFFFFF !important;
}

/* Hero nav: default (before sticky) – use top instead of bottom; .hero-nav-sticked still handles fixed state */
.hero-navigation[data-astro-cid-nlow4r3u],
.hero-navigation[data-astro-cid-5luozhpp] {
  top: 120px !important;
  bottom: auto !important;
}

/* Push hero content down so nav doesn’t hide the heading */
.hero-content[data-astro-cid-nlow4r3u],
.hero-content[data-astro-cid-5luozhpp] {
  padding-top: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* LTR: title starts left; circle uses align-self: flex-end to sit right */
  width: 100% !important;
}

[dir="rtl"] .hero-content[data-astro-cid-5luozhpp] {
  align-items: flex-start !important; /* RTL: title stays right; circle uses margin-inline-start: auto to sit left */
}

.hero-circle[data-astro-cid-nlow4r3u],
.hero-circle[data-astro-cid-5luozhpp] {
  align-self: flex-end;
  margin-top:  -4% !important;
  transform: rotate(-2.5deg);
  margin-inline-end: 10% !important;
}

@media (max-width: 1024px) {
  .hero-circle[data-astro-cid-nlow4r3u],
  .hero-circle[data-astro-cid-5luozhpp] {
    margin-top: -9% !important;
  }
}

[dir="rtl"] .hero-circle[data-astro-cid-5luozhpp] {
  margin-inline-end: 15% !important;
  margin-inline-start: auto !important;
  align-self: flex-end !important;
}

/* Keep text inside the circle centered (avoid being pushed to bottom by flex/margins) */
.hero-circle-inner[data-astro-cid-nlow4r3u],
.hero-circle-inner[data-astro-cid-5luozhpp] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
}

/* Hero bg-video height – ~567px, cap at 570px (override 75vh / min-height 650px) */
@media (min-width: 1025px) {
  .section-hero[data-astro-cid-nlow4r3u] .bg-video[data-astro-cid-nlow4r3u],
  .section-hero[data-astro-cid-5luozhpp] .bg-video[data-astro-cid-5luozhpp] {
    height: 567px !important;
    min-height: 567px !important;
    max-height: 570px !important;
  }
}

/* Add padding to section titles */
.group-results-title,
.strategy__title,
.esg-title,
section h2:first-child {
  padding-top: 40px !important;
  margin-top: 0 !important;
}

.section-introduction h2:first-child,
.section-introduction .introduction-content-wrapper {
  padding-top: 40px !important;
}

.section-introduction {
  padding-bottom: 110px !important;
}

/* Make name-tag red div span full width of image and remove extending lines */
.introduction-image .img-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Ensure parent containers allow overflow for the blob */
.introduction-image,
.introduction-inner,
.section-introduction .container-big {
  overflow: visible !important;
}

.introduction-image .img-content img {
  margin-left: 0 !important;
  padding-left: 0 !important;
  align-self: flex-start !important;
  position: relative !important;
  z-index: 2 !important;
}

/* BLOB START =========================================================================================================== */
/* Red blob behind chairman/CEO image - rectangle + semicircle bottom */
/* Rectangle part - extends from section top */
.introduction-image .img-content::before {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  top: -183px !important; 
  left: 36% !important;
  transform: translateX(-50%) !important;
  width: 65% !important;
  height: 26% !important;
  background-color: #ED1C24 !important;
  border-radius: 0 !important; /* Flat rectangle */
  z-index: 2 !important;
  font: normal normal bold 32px Outfit !important;
  letter-spacing: 0px !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  padding-top: 130px !important;
  padding-left: 30px !important;
  box-sizing: border-box !important;
  white-space: pre-line !important;
}

/* Semicircle bottom part - attached below the rectangle */
.introduction-image .img-content::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: calc(-183px + 26%) !important; /* Start where the rectangle ends */
  left: 36% !important;
  transform: translateX(-50%) !important;
  width: 65% !important; /* Same width as the rectangle */
  height: 140px !important; /* Height of the semicircle */
  background-color: #ED1C24 !important;
  border-radius: 0 0 50% 50% / 0 0 100% 100% !important; /* Semicircle bottom */
  z-index: 1 !important;
}

/* English blob titles */
.introduction-image .img-content-1::before {
  content: "Chairman's\AMessage" !important;
  padding-top: 72px !important;
  font: normal normal bold 35px Outfit !important;
  padding-left: 44px !important;

}

.introduction-image .img-content-2::before {
  content: "CEO's\AMessage" !important;
  padding-top: 72px !important;
  font: normal normal bold 35px Outfit !important;
  padding-left: 44px !important;


}

/* RTL support for Arabic - adjust blob padding */
[dir="rtl"] .introduction-image .img-content::before {
  padding-left: 0 !important;
  padding-right: 48px !important;
}

/* Arabic blob titles (RTL) */
[dir="rtl"] .introduction-image .img-content-1::before {
  content: "رسالة رئيس\Aمجلس الإدارة" !important;
  padding-top: 60px !important;
  font: normal normal bold 28px Outfit !important;


}

[dir="rtl"] .introduction-image .img-content-2::before {
  content: "رسالة الرئيس\Aالتنفيذي" !important;
  padding-top: 60px !important;
  font: normal normal bold 28px Outfit !important;


}
/* BLOB END =========================================================================================================== */

/* Name of the chairman/CEO red div */
.introduction-image .img-content .name-tag {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  margin-left: -45px !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-self: flex-start !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
  margin-top:-25px !important;
}

.introduction-image .img-content .title {
  position: relative !important;
  z-index: 2 !important;
}

/* Chairman title text */
.introduction-image .img-content-1 .title {
  margin-top:-20px !important;
}

/* CEO title text */
.introduction-image .img-content-2 .title {
  margin-top:-20px !important;
}

/* RTL support for Arabic - mirror name-tag margins */
[dir="rtl"] .introduction-image .img-content .name-tag {
  margin-left: 0 !important;
  margin-right: -35px !important;
}

/* Remove extending lines from red-line pseudo-elements */
.introduction-image .img-content .red-line::before,
.introduction-image .img-content .red-line::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.introduction-image .img-content .red-line {
  display: none !important;
}

/* Strategy section - evolved layout (growth engines + enablers overlapping) */
#our-strategy .strategy-evolved {
  border-radius: 24px !important;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible !important;
}

#our-strategy .strategy-growth-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.3 !important;
}

/* Strategy row: 3 segments with distinct colors and chevron inner edges */
#our-strategy .strategy-rise-row {
  display: none !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  min-height: 48px !important;
}

#our-strategy .strategy-rise-segment {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 14px 20px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* LTR (English): point out to the left, rounded right on first segment – “great” look flipped for English */
#our-strategy .strategy-rise-segment-1 {
  background: #ED1C24 !important;
  color: #fff !important;
  clip-path: polygon(0 0, 0 100%, calc(100% - 12px) 100%, 100% 50%, calc(100% - 12px) 0) !important;
  border-radius: 9999px 0 0 9999px !important;
  margin-right: -12px !important;
  margin-left: 0 !important;
  padding-right: 28px !important;
  padding-left: 24px !important;
  overflow: visible !important;
}

#our-strategy .strategy-rise-segment-2 {
  background: #003366 !important;
  color: #fff !important;
  clip-path: polygon(12px 0, 0 50%, 12px 100%, calc(100% - 12px) 100%, 100% 50%, calc(100% - 12px) 0) !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  overflow: visible !important;
}

#our-strategy .strategy-rise-segment-3 {
  background: #00A3A3 !important;
  color: #1a1a1a !important;
  clip-path: polygon(12px 0, 0 50%, 12px 100%, 100% 100%, 100% 0) !important;
  border-radius: 0 9999px 9999px 0 !important;
  margin-right: 0 !important;
  margin-left: -12px !important;
  padding-right: 28px !important;
  padding-left: 28px !important;
  overflow: visible !important;
}

#our-strategy .strategy-rise-svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

#our-strategy .strategy-rise-svg-desktop {
  display: block !important;
}

#our-strategy .strategy-rise-svg-mobile {
  display: none !important;
}

/* Gears section (Revenue Contribution) - desktop and mobile SVGs */
#our-strategy .gears-section-svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  /* margin-top: 24px !important;
  margin-bottom: 24px !important; */
}

#our-strategy .gears-section-svg-desktop {
  display: block !important;
}

#our-strategy .gears-section-svg-mobile {
  display: none !important;
}

/* RTL (Arabic): point out to the right, rounded left – the “great” look for Arabic */
[dir="rtl"] #our-strategy .strategy-rise-segment-1 {
  clip-path: polygon(12px 0, 0 50%, 12px 100%, 100% 100%, 100% 0) !important;
  border-radius: 0 9999px 9999px 0 !important;
  margin-right: 0 !important;
  margin-left: -12px !important;
  padding-right: 24px !important;
  padding-left: 28px !important;
}

[dir="rtl"] #our-strategy .strategy-rise-segment-2 {
  clip-path: polygon(12px 0, calc(100% - 12px) 0, calc(100% + 12px) 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%, 12px 0) !important;
  margin-left: -12px !important;
  margin-right: -24px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

[dir="rtl"] #our-strategy .strategy-rise-segment-3 {
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%, 12px 0) !important;
  border-radius: 0 9999px 9999px 0 !important;
  margin-left: -12px !important;
  padding-left: 28px !important;
  padding-right: 20px !important;
}

/* SVG strategy cards – desktop and mobile */
#our-strategy .strategy-cards-svg-wrapper {
  display: block !important;
  margin-bottom: 0 !important;
  /* margin-top: 24px !important; */
  max-width: 100% !important;
  margin-top:-25px !important;
}

#our-strategy .strategy-cards-svg {
  width: 100% !important;
  height: auto !important;
  max-width: 1279px !important;
}

#our-strategy .strategy-cards-svg-desktop {
  display: block !important;
}

#our-strategy .strategy-cards-svg-mobile {
  display: none !important;
}

/* HTML strategy cards (hidden, kept in DOM) */
#our-strategy .strategy-growth-engines {
  display: none !important;
  gap: 3px !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
  align-items: flex-end !important;
}

#our-strategy .strategy-engine {
  flex: 1 !important;
  min-width: 210px !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 18px !important;
  padding-bottom: 28px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Fixed heights, aligned at bottom: first shortest at top, each one taller */
#our-strategy .strategy-engine-1 { height: 320px !important; min-height: 0 !important; }
#our-strategy .strategy-engine-2 { height: 340px   !important; min-height: 0 !important; }
#our-strategy .strategy-engine-3 { height: 360px !important; min-height: 0 !important; }
#our-strategy .strategy-engine-4 { height: 380px !important; min-height: 0 !important; }

#our-strategy .strategy-engine-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 14px 0 !important;
  text-align: left !important;
}

[dir="rtl"] #our-strategy .strategy-engine-title {
  text-align: right !important;
}

#our-strategy .strategy-engine-title-red { color: #E60023 !important; }
#our-strategy .strategy-engine-title-blue { color: #0047AB !important; }
#our-strategy .strategy-engine-title-teal { color: #008080 !important; }

#our-strategy .strategy-engine-body {
  flex: 1 !important;
  text-align: left !important;
  overflow-y: auto !important;
  padding-bottom: 16px !important;
}

[dir="rtl"] #our-strategy .strategy-engine-body {
  text-align: right !important;
}

#our-strategy .strategy-engine-body p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #333 !important;
  margin: 0 0 5px 0 !important;
}

#our-strategy .strategy-engine-body p:last-child {
  margin-bottom: 0 !important;
}

/* Enablers desktop SVG (Arabic): hidden by default, shown on Arabic desktop */
#our-strategy .strategy-enablers-desktop-svg-wrapper {
  display: none !important;
  max-width: 100% !important;
}

#our-strategy .strategy-enablers-desktop-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Enablers mobile SVG (English): hidden on desktop, shown on mobile */
#our-strategy .strategy-enablers-svg-wrapper {
  display: none !important;
  max-width: 100% !important;
}

#our-strategy .strategy-enablers-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-top:-40px !important;
}

/* Strategy enablers: overlap bottom of cards, no divider (HTML implementation) */
#our-strategy .strategy-enablers-stack {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  margin-top: -22px !important;
  position: relative !important;
  z-index: 2 !important;
}

#our-strategy .strategy-enablers-header {
  width: 100% !important;
  min-height: 40px !important;
  background: #ED1C24 !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  letter-spacing: 0.02em !important;
}

#our-strategy .strategy-enabler {
  width: 100% !important;
  min-height: 40px !important;
  background: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  box-sizing: border-box !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Arabic desktop: show enablers desktop SVG, hide HTML enablers stack */
@media (min-width: 769px) {
  [dir="rtl"] #our-strategy .strategy-enablers-desktop-svg-wrapper {
    display: block !important;
    margin-top: -22px !important;
    position: relative !important;
    z-index: 2 !important;
  }
  [dir="rtl"] #our-strategy .strategy-enablers-stack {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #our-strategy .strategy-growth-title {
    display: none !important;
  }
  #our-strategy .strategy-rise-svg-desktop {
    display: none !important;
  }
  #our-strategy .strategy-rise-svg-mobile {
    display: block !important;
  }
  #our-strategy .gears-section-svg-desktop {
    display: none !important;
  }
  #our-strategy .gears-section-svg-mobile {
    display: block !important;
  }
  #our-strategy .strategy-cards-svg-desktop {
    display: none !important;
  }
  #our-strategy .strategy-cards-svg-mobile {
    display: block !important;
  }
  #our-strategy .strategy-cards-svg-wrapper {
    margin-top: 40px !important;
  }
  #our-strategy .strategy-rise-row {
    font-size: 13px !important;
  }
  #our-strategy .strategy-rise-segment {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  #our-strategy .strategy-rise-segment-1 {
    padding-right: 20px !important;
  }
  [dir="rtl"] #our-strategy .strategy-rise-segment-1 {
    padding-left: 20px !important;
  }
  #our-strategy .strategy-growth-engines {
    flex-direction: column !important;
  }
  #our-strategy .strategy-engine {
    min-width: 100% !important;
    min-height: 0 !important;
  }
  #our-strategy .strategy-engine-1,
  #our-strategy .strategy-engine-2,
  #our-strategy .strategy-engine-3,
  #our-strategy .strategy-engine-4 {
    min-height: 0 !important;
  }
  /* Mobile English: show enablers SVG, hide HTML enablers implementation */
  #our-strategy .strategy-enablers-svg-wrapper {
    display: block !important;
  }
  #our-strategy .strategy-enablers-stack {
    display: none !important;
    gap: 5px !important;
    margin-top: -40px !important;
  }
  #our-strategy .strategy-growth-engines {
    margin-bottom: 24px !important;
  }
  #our-strategy .strategy-enabler {
    min-width: 100% !important;
  }
}

/* Remove margin-bottom from strategy section at 1023px breakpoint */
@media only screen and (min-width: 1023px) {
  .section-strategy[data-astro-cid-hdqzsiq5],
  .section-strategy[data-astro-cid-ouj4kmdo] {
    margin-bottom: 0 !important;
  }
}

/* Increase top and bottom padding for strategy section */
#our-strategy,
.section-strategy {
  padding-top: 120px !important;
  padding-bottom: 100px !important;
}

/* Decrease padding on mobile devices */
@media only screen and (max-width: 768px) {
  #our-strategy,
  .section-strategy {
    padding-top: 0px !important;
    padding-bottom: 60px !important;
  }
}

/* Group Results section styling */
#group-results,
.section-group-results {
  background-color: #000000 !important;
}

#group-results .group-results-title {
  font: normal normal bold 50px/63px Outfit !important;
  letter-spacing: 0px !important;
  color: #FFFFFF !important;
  position: relative !important;
  display: inline-block !important;
  z-index: 11112 !important; /* Text above the badge */
}



/* Circular year badge - positioned behind text at top end */
#group-results .group-results-title .year-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background-color: #ED1C24 !important; /* Red/Orange color */
  color: #FFFFFF !important;
  font: normal normal bold 18px/22px Outfit !important;
  position: absolute !important;
  top: 16px !important; /* Position at top end of text, overlapping */
  right: -25px !important; /* Position at the end (right side), overlapping the text */
  z-index: -1 !important; /* Negative z-index ensures it's behind the text */
}

/* RTL support for Arabic - badge on left side */
[dir="rtl"] #group-results .group-results-title .year-badge {
  right: auto !important;
  left: -25px !important; /* Position at the end (left side in RTL), overlapping */
}

/* Main counter numbers only (not in progress bar) */
#group-results .result-element > .counter,
#group-results .result-element > .counter-finish {
  font: normal normal bold 35px/20px Rubik !important;
  color:#3cdbc0 !important;
}

/* Progress bar counters - keep original styling or set different values */
#group-results .progress-bar .counter,
#group-results .progress-bar .counter-finish {
  font: normal normal bold 18px/18px Rubik !important;
}

/* Progress bar colors - 2025 (current year) and 2024 (previous year) */
#group-results .progress-bar:not(.previous-year) {
  background-color: #3cdbc0 !important;
}

#group-results .progress-bar.previous-year {
  background-color: #3cdbc04d!important;
}

/* Ensure progress-year doesn't overlap or cover the progress bar */
#group-results .progress-year {
  background-color: transparent !important;
  z-index: 1 !important;
  position: relative !important;
  width: 49px !important; /* Fixed width to align progress bars */
  min-width: 49px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Ensure result-years-item uses flexbox for proper alignment */
#group-results .result-years-item {
  position: relative !important;
  z-index: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 10px !important;
}

/* Progress bar wrapper - full track width (like countries); no hardcoded width */
#group-results .progress-bar-wrapper {
  width: calc(100% - 49px) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  overflow: visible !important;
  height: 30px !important;
  position: relative !important;
  z-index: 2 !important;
  margin-left: 10px !important;
  border: none !important;
  outline: none !important;
}

/* Rows with progress-extra need narrower wrapper for the extra label */
#group-results .result-years-item:has(.progress-extra) .progress-bar-wrapper {
  width: calc(100% - 29px - 49px) !important;
}

/* Progress bar (highlight) - width from script via --bar-width, like countries */
#group-results .progress-bar {
  width: var(--bar-width, 100%) !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  height: 100% !important;
  position: relative !important;
  padding-left: 28px !important;
  padding-right: 15px !important;
  overflow: hidden !important;
  z-index: 1 !important;
  border: none !important;
  outline: none !important;
  margin-inline-start: -17.4px !important;
}

#group-results .result-element:nth-child(4),
#group-results .result-element:nth-child(5),
#group-results .result-element:nth-child(6) {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
}

/* Single big divider above definitions/footnotes section */
#group-results .group-results-divider {
  width: 98.5% !important;
  height: 1px !important;
  background-color: #383838 !important;
  margin: 0px 10px 20px 10px !important;
  display: block !important;
}

/* Add padding above and below footnote text; align with divider (same horizontal line) */
#group-results .footnote {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
  margin-inline: 10px !important;
}

/* Add margin only to first and last footnotes */
#group-results .footnote:first-of-type {
  padding-top: 20px !important;
}

#group-results .footnote:last-of-type {
  margin-bottom: 20px !important;
}

/* Ensure result-years-item doesn't cause overlap issues */
#group-results .result-years-item {
  position: relative !important;
  z-index: 0 !important;
}

/* Vertical line marker at the start (left side) of the pill */
#group-results .progress-bar-wrapper::before {
  content: '' !important;
  position: absolute !important;
  left: -20px !important; /* Positioned just outside the start (left edge) of the pill */
  top: 50% !important;
  transform: translateY(-50%) !important; /* Center vertically */
  height: 36px !important; /* Slightly taller than the 30px pill */
  width: 3px !important; /* Vertical line */
  background-color: #3cdbc0 !important; /* Same color as progress bar (2025) */
  z-index: 2 !important;
}

/* Marker color for previous year progress bars */
#group-results .progress-bar-wrapper:has(.progress-bar.previous-year)::before {
  background-color: #3cdbc04d!important; /* Same color as previous year progress bar */
}

/* RTL support for Arabic - marker on right side, rounded on left */
[dir="rtl"] #group-results .progress-bar {
  padding-right: 28px !important;
  padding-left: 15px !important;
}

[dir="rtl"] #group-results .progress-bar-wrapper {
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 10px !important; /* Push pill away from the year number in RTL */
}

[dir="rtl"] #group-results .progress-bar {
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

[dir="rtl"] #group-results .progress-bar-wrapper::before {
  left: auto !important;
  right: -20px !important; /* Positioned just outside the start (right side in RTL) */
}

/* Result title styling - ensure top alignment */
#group-results .result-title {
  font: normal normal bold 14px/18px Rubik !important;
  color: #ED1C24 !important;
  margin-bottom: 2px !important;
  /* margin-top: 0 !important;
  align-self: flex-start !important;
  vertical-align: top !important;
} */


/* Result description styling */
#group-results .result-description {
  font: normal normal normal 12px/16px Rubik !important;
  letter-spacing: 0px !important;
  color: #000000 !important;
  margin-bottom: 0 !important;
}

/* Fix margin between wrapper and counter */
#group-results .result-element > .counter,
#group-results .result-element > .counter-finish {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

#group-results .wrapper {
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-height: 50px !important; /* Consistent height for title block */
}

/* Ensure result elements use flex column with top alignment */
#group-results .result-element {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

}


/* Font Fix arabic (9/3/202::hbanna) */
[dir="rtl"] #group-results .result-title {
  font: normal normal bold 14px/18px Noto Kufi Arabic !important;
} 

[dir="rtl"] #group-results .group-results-title {
  font: normal normal bold 50px / 63px Noto Kufi Arabic !important;
}

[dir="rtl"] .section-strategic-pillars .sp-heading {
  font-family: Noto Kufi Arabic;
}

[dir="rtl"] .section-strategic-pillars .sp-card {
  font-family: 'Noto Kufi Arabic' !important;
}
[dir="rtl"] .section-strategic-pillars .sp-card-overlay ul li {
  font-family: 'Noto Kufi Arabic';
    font-size: 14px;
}
[dir="rtl"] .section-strategic-pillars .sp-card-default .sp-card-title {
  font: normal normal bold 16px Noto Kufi Arabic;
}
[dir="rtl"] .section-strategic-pillars .sp-download-wrapper .cta-download {
  font-family: 'Noto Kufi Arabic';
}