/* =========================================================
   ESG / SUSTAINABILITY — page styles (en/esg.html, ar/esg.html)
   Values taken from the live Elementor CSS (page id 58489 / 52720).
   ========================================================= */
body.hero-page { background: #fff !important; }
[hidden] { display: none !important; }

/* ---------- shared bits ---------- */
.esg-label { display: flex; align-items: center; gap: 6px; line-height: 30px; margin-bottom: 20px; font-family: "Marcellus", serif; font-size: 17px; font-weight: 400; text-transform: uppercase; color: #2C2C2C; }
.esg-label i { font-size: 14px; color: #2C2C2C; margin-top: -10px; }
.esg-label--white, .esg-label--white i { color: #fff; }
.esg-label--line { font-size: 15px; gap: 10px; }
.esg-label--line svg { flex: 0 0 18px; }
.esg-title { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 30px; font-weight: 600; line-height: 45px; color: #2C2C2C; margin: 0; }
.esg-title .brown { color: #85553A !important; }
.esg-text { font-family: "Marcellus", serif; font-size: 17px; font-weight: 400; line-height: 1.5; color: #7A7A7A; }
.esg-text p + p { margin-top: 1em; }
.esg-container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 10px; }

/* ---------- 1. hero (background slideshow) ---------- */
.esg-hero { position: relative; min-height: 90vh; padding-top: 60px; display: flex; align-items: center; overflow: hidden; background: #2C2C2C; }
.esg-hero__slides { position: absolute; inset: 0; z-index: 0; }
.esg-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s ease; }
.esg-hero__slide.is-active { opacity: 1; }
.esg-hero__overlay { position: absolute; inset: 0; background: #09090978; z-index: 1; }
.esg-hero .esg-container { position: relative; z-index: 2; }
.esg-hero__title { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 40px; font-weight: 300; line-height: 45px; color: #fff; margin: 0; }
.esg-hero__title--big { font-size: 50px; font-weight: 600; }

/* ---------- 2. download reports ---------- */
.esg-downloads { margin: 50px 0; text-align: center; }
.esg-downloads__kicker { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 12px; line-height: 12px; color: #2C2C2C; margin: 0; }
.esg-downloads__title { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 30px; line-height: 45px; color: #2C2C2C; margin: 8px 0 0; }
.esg-downloads__kicker-label { justify-content: center; margin-bottom: 0; font-size: 13px; line-height: 14px;font-family: "29LTZaridDisplayVF", sans-serif; }
.esg-reports { margin-top: -40px; padding: 10px; }
.esg-reports .swiper { padding: 10px; margin: -10px; }
.esg-report { position: relative; display: block; overflow: hidden; background: #2C2C2C; }
.esg-report__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: all .4s; }
.esg-report__overlay { position: absolute; inset: 0; background: #2C2C2C6E; transition: all .4s; }
.esg-report:hover .esg-report__overlay { background: #2C2C2CC4; }
.esg-report__content { position: relative; min-height: 280px; padding: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.esg-report__title { font-family: "Lucky Beauty", serif; font-size: 25px; font-weight: 600; line-height: 30px; color: #fff; margin: 0 0 15px; }
.esg-report__btn { display: inline-block; padding: 12px 24px; font-family: "Lucky Beauty", serif; font-size: 15px; font-weight: 500; line-height: 1; color: #fff; background: #85553A; border: 2px solid #85553A; transition: all .3s; }
.esg-report__btn:hover { background: #020202; border-color: #2C2C2C; color: #fff; }

/* ---------- 3. ESG summary ---------- */
.esg-summary { padding: 150px 0; }
.esg-summary__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.esg-summary__img { padding-left: 50px; display: flex; justify-content: flex-end; }
.esg-summary__img img { width: 100%; height: auto; }
.esg-label--sub { margin-top: -15px; }

/* ---------- 4. key highlights (dark band) ---------- */
.esg-highlights { background: #2C2C2C; padding: 80px 0; }
.esg-highlights .esg-title { color: #fff; }
/* Live page: each row is its own icon-list widget — divider under the row,
   90% wide, and an Elementor scroll-opacity effect ([data-scroll-fade], main.js) */
.esg-highlights__list { margin: 80px 0 0; padding: 0; list-style: none; }
.esg-highlight { display: flex; align-items: flex-start; width: 90%; margin: 15px 0; padding-bottom: 20px; border-bottom: 1px solid #616161; }
.esg-highlight__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 6px; padding-inline-end: 28px; box-sizing: content-box; }
.esg-highlight__icon svg { width: 20px; height: 20px; fill: #fff; }
.esg-highlight__icon svg path { fill: #fff; }
.esg-highlight__text { width: 88%; margin: 0 0 15px; font-family: "Marcellus", serif; font-size: 17px; line-height: 1.5; color: #fff; text-align: start; }
.esg-highlight__text p { margin: 0; }

/* ---------- 5. awards ---------- */
.esg-awards { padding: 150px 0; }
.esg-awards .esg-title { margin-bottom: 14px; }
.esg-awards__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 27px; }
.esg-award__img { text-align: start; margin-bottom: 20px; }
.esg-award__img img { display: inline-block; height: auto; }
.esg-award--csr .esg-award__img img { width: 34%; }
.esg-award--property .esg-award__img { padding-left: 3px; }
.esg-award--property .esg-award__img img { width: 6%; min-width: 24px; }
.esg-award__title { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 24px; font-weight: 600; line-height: 45px; color: #2C2C2C; margin: 0; }
.esg-award--property .esg-award__title { margin-top: -5px; }
.esg-award__text { font-family: "Marcellus", serif; font-size: 17px; line-height: 1.5; color: #7A7A7A; margin-top: 20px; }

/* ---------- 6. E / S / G tabs ---------- */
.esg-tabs-section { background: #F8F8F8; padding: 80px 0 150px; }
.esg-tabs { margin-top: 50px; }
.esg-tabs__heading { display: flex; gap: 10px; }
.esg-tab-title {
	flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 15px 35px; background: #f1f2f3; border: 0; border-radius: 0; cursor: pointer;
	font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 20px; font-weight: 500; color: #000;
	transition: background .3s, color .3s;
}
.esg-tab-title:hover, .esg-tab-title[aria-selected="true"] { background: #85553A; color: #fff; }
.esg-tabs__content { margin-top: 10px; }
.esg-tab-panel { display: none; }
.esg-tab-panel.is-active { display: block; }
.esg-tab-panel__inner { display: flex; align-items: stretch; gap: 50px; margin: 30px 0; padding: 0 10px; }
.esg-tab-panel__bg { flex: 0 0 30%; width: 30%; min-height: 300px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.esg-tab-panel__bg--env { background-size: auto; background-repeat: repeat; }
.esg-tab-panel__text { width: 60%; padding: 10px; font-family: "Marcellus", serif; font-size: 17px; line-height: 1.5; color: #7A7A7A; }
.esg-tab-panel__text ul { list-style: disc; padding-left: 40px; margin: 0; }
.esg-tab-panel__text ul li { margin-left: -20px; }
.esg-tab-panel--gov .esg-tab-panel__text { padding-top: 30px; }

/* ---------- 7. SDG table (hidden on the live site) ---------- */
.esg-sdg { padding: 150px 0; }
.esg-sdg .esg-text { margin: 10px 0 30px; }
.esg-sdg__table { width: 100%; border-collapse: collapse; table-layout: auto; }
.esg-sdg__table th { background: #85553A; color: #fff; font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-weight: 400; padding: 15px; border: 1px solid #CCCCCC; text-align: start; }
.esg-sdg__table td { font-family: "Marcellus", serif; font-size: 14px; color: #2C2C2C; padding: 15px; border: 1px solid #CCCCCC; vertical-align: top; }
.esg-sdg__wrap { overflow-x: auto; }

/* ---------- 8. sustainable buildings (dark band) ---------- */
.esg-buildings { background: #2C2C2C; padding: 50px 0; color: #fff; }
.esg-buildings .esg-title { color: #fff; }
.esg-buildings .esg-text { color: #fff; }
.esg-buildings .esg-label { color: #fff; }
.esg-row { display: flex; align-items: stretch; padding: 10px; }
.esg-row > * { min-width: 0; }
.esg-col { flex: 1 1 0; padding: 10px; }
.esg-col--center { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
.esg-col--center img { width: 87%; height: auto; }
/* Retal Business Center: the slider spans the container, the text sits under it at half width (live page) */
.esg-row--rbc { flex-direction: column; }
.esg-row--rbc .esg-col:last-child { flex: 0 0 auto; width: 50%; }
.esg-row--rbc .esg-text { margin-top: 70px; }
/* Design reference: intro text at 48%, the two references further down */
.esg-row--design .esg-col:first-child > .esg-text { width: 48%; }
.esg-refs { display: flex; gap: 10px; }
.esg-ref { flex: 1 1 0; display: flex; align-items: flex-start; }
.esg-ref__img { flex: 0 0 30%; padding: 10px; }
.esg-ref__img img { width: 100%; height: auto; }
.esg-ref__text { flex: 0 0 70%; padding: 10px; }
.esg-case-title { font-family: "Lucky Beauty", serif; font-size: 30px; font-weight: 600; line-height: 45px; color: #fff; margin: 0; }
/* The heading sits on its own line so the references / case columns can use the
   full container width instead of being squeezed into half of the row. */
.esg-row--design, .esg-row--case { flex-direction: column; }
.esg-row--design .esg-refs { margin-top: 54px; }
.esg-row--case .esg-case { margin-top: 20px; }
.esg-case { flex: 1 1 0; display: flex; gap: 30px 60px; margin-top: -34px; padding: 10px; }
.esg-case > div { flex: 1 1 0; min-width: 0; }
.esg-case .esg-text { margin-top: 20px; }
.esg-iconlist { margin-top: 20px; }
/* each point underlined like the live icon lists: #616161 rule, 20px under the text */
.esg-iconlist li { display: flex; align-items: flex-start; margin: 15px 0; padding-bottom: 20px; border-bottom: 1px solid #616161; }
.esg-iconlist__icon { flex: 0 0 26px; width: 26px; margin-top: 7px; padding-inline-end: 7px; box-sizing: content-box; }
.esg-iconlist__icon svg { width: 26px; height: auto; }
.esg-iconlist__icon svg path, .esg-iconlist__icon svg g path { fill: #fff !important; }
.esg-iconlist__text { width: 90%; margin-bottom: 15px; font-family: "Marcellus", serif; font-size: 17px; line-height: 1.5; color: #fff; text-align: start; }

/* Elementor "Slides" widget look-alike */
.esg-slides { position: relative; width: 100%; margin-top: 20px; }
.esg-slides .swiper-slide { height: 577px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.esg-slides__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #fff; font-size: 25px; cursor: pointer; }
.esg-slides__nav--prev { left: 10px; }
.esg-slides__nav--next { right: 10px; }
.esg-slides .swiper-pagination { bottom: 5px; }
.esg-slides .swiper-pagination-bullet { width: 8px; height: 8px; background: #fff; opacity: 1; margin: 0 4px; }
.esg-slides .swiper-pagination-bullet-active { background: #85553A; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
	.esg-label { font-size: 13px; }
	.esg-label--line { font-size: 12px; }
	.esg-text, .esg-tab-panel__text, .esg-award__text { font-size: 13px; }
	.esg-hero .esg-container { padding: 0 20px; }
	.esg-summary, .esg-awards, .esg-sdg { padding: 50px 20px; }
	.esg-tabs-section { padding: 100px 20px; }
	.esg-buildings, .esg-highlights { padding-left: 20px; padding-right: 20px; }
	.esg-highlight__text { font-size: 13px; }
}
@media (max-width: 767px) {
	.esg-hero { min-height: 70vh; }
	.esg-hero__title { font-size: 25px; line-height: 30px; }
	.esg-hero__title--big { font-size: 33px; line-height: 40px; }
	.esg-title { font-size: 24px; line-height: 32px; }
	.esg-downloads__title { font-size: 24px; line-height: 32px; }
	.esg-report__title { font-size: 25px; }
	.esg-summary { padding: 30px 20px; }
	.esg-summary__grid { grid-template-columns: 1fr; }
	.esg-summary .esg-title { font-size: 25px; line-height: 30px; }
	.esg-summary__img { padding: 20px 0 0 20px; margin-top: 21px; justify-content: center; }
	.esg-highlights .esg-title { display: none; }
	.esg-highlights__list { margin-top: 40px; }
	.esg-awards { padding: 50px 20px 30px; }
	.esg-awards__row { grid-template-columns: 1fr; }
	.esg-award__title { font-size: 24px; line-height: 32px; margin-top: 11px; }
	.esg-award--property .esg-award__title { margin-top: 31px; }
	.esg-tabs-section { margin: 50px 0; padding: 50px 20px; }
	/* Elementor "e-n-tabs-mobile": each title sits directly above its own panel */
	.esg-tabs { display: flex; flex-direction: column; }
	.esg-tabs__heading { display: contents; }
	.esg-tabs__content { display: contents; }
	.esg-tab-title { width: 100%; }
	.esg-tab-title:not(:first-child) { margin-top: 10px; }
	.esg-tab-title[aria-selected="true"] { margin-bottom: 10px; }
	.esg-tab-title:nth-child(1) { order: 1; } .esg-tab-panel:nth-child(1) { order: 2; }
	.esg-tab-title:nth-child(2) { order: 3; } .esg-tab-panel:nth-child(2) { order: 4; }
	.esg-tab-title:nth-child(3) { order: 5; } .esg-tab-panel:nth-child(3) { order: 6; }
	.esg-tab-panel__inner { margin: 0 0 20px; }
	.esg-tab-panel__inner { flex-direction: column; gap: 20px; padding: 0; }
	.esg-tab-panel__bg { width: 100%; flex-basis: auto; min-height: 193px; }
	.esg-tab-panel__text { width: 100%; padding: 0; }
	.esg-sdg { padding: 50px 20px 30px; }
	.esg-label--line { font-size: 16px; }
	.esg-row, .esg-refs, .esg-case { flex-direction: column; }
	.esg-row--rbc .esg-col:last-child, .esg-row--design .esg-col:first-child > .esg-text { width: 100%; }
	.esg-row--design .esg-refs { margin-top: 20px; }
	.esg-row--rbc .esg-text { margin-top: 20px; }
	.esg-ref__img img { width: 140px; }
	.esg-case { margin-top: 0; }
	.esg-case-title { font-size: 25px; line-height: 35px; }
	.esg-slides .swiper-slide { height: 240px; }
	.esg-marasi .esg-title { display: none; }
}

/* =========================================================
   RTL (ar/esg.html)
   ========================================================= */
.rtl .esg-label, .rtl .esg-text, .rtl .esg-tab-panel__text, .rtl .esg-award__text, .rtl .esg-highlight__text, .rtl .esg-iconlist__text { font-family: "29LTAzer-Light", sans-serif; }
.rtl .esg-title, .rtl .esg-award__title, .rtl .esg-downloads__title, .rtl .esg-case-title, .rtl .esg-tab-title, .rtl .esg-sdg__table th { font-family: "29LTZaridDisplayVF", sans-serif; }
.rtl .esg-hero__title { font-family: "29LTZaridDisplayVF", sans-serif; font-size: 54px; font-weight: 300; }
.rtl .esg-hero__title + .esg-hero__title { margin-top: 20px; }
.rtl .esg-report__title { font-family: "29LTAzer-Light", sans-serif; }
.rtl .esg-report__btn { font-family: "29LTZaridDisplayVF", sans-serif; }
.rtl .esg-downloads__title { margin-top: 8px; }
.rtl .esg-summary__img { padding-left: 0; padding-right: 50px; }
.rtl .esg-award--property .esg-award__img { padding-left: 0; padding-right: 3px; }
.rtl .esg-tab-panel__text { color: #2C2C2C; text-align: end; }
.rtl .esg-tab-panel__text ul { padding-left: 0; padding-right: 40px; }
.rtl .esg-tab-panel__text ul li { margin-left: 0; margin-right: -20px; }
.rtl .esg-slides__nav--prev { left: auto; right: 10px; }
.rtl .esg-slides__nav--next { right: auto; left: 10px; }
.rtl .esg-tab-panel__text, .rtl .esg-text { line-height: 1.6; }
@media (max-width: 767px) {
	.rtl .esg-hero__title { font-size: 33px; line-height: 40px; }
	.rtl .esg-summary__img { padding: 20px 20px 0 0; }
}