/* HighStar custom fixes, loaded after the Webflow stylesheet on every page.
   Keep this file and ar/css/highstar-custom.css identical. */

/* Top menu: between 992px and 1279px the 24% gap between the logo and the
   menu pushed the ENG / Arabic switch off the right edge. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .nav-menu-wrapper {
    grid-column-gap: 24px;
    column-gap: 24px;
  }
  .nav-text-link {
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* "Start a new project" heading: .text-color-white shrinks text to 18px / 16px
   on tablets and phones, so the heading ended up body-text size. */
@media screen and (max-width: 767px) {
  .cta-section h2.all-caps.text-color-white {
    font-size: 32px;
    line-height: 1.2;
  }
}
@media screen and (max-width: 479px) {
  .cta-section h2.all-caps.text-color-white {
    font-size: 28px;
  }
}

/* Video play buttons: dark backing so the thin white icon shows on bright photos. */
.video-button {
  background-color: rgba(0, 0, 0, 0.45);
}

/* Home page stats strip (30+ / 100+ / 150+ / 1000+), English and Arabic alike.
   Four equal columns spanning the section width, each stat centred in its column, thin dividers between
   columns, same number sizes in both languages (Arabic labels one step larger: Arabic script reads smaller at
   the same size). Phones: 2 x 2 with a cross divider. Arabic flows right to left via dir="rtl" on the grid,
   so the dividers use border-inline-start; the numbers stay left-to-right so "30+" doesn't become "+30". */
.section_stats-2 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.section_stats-2 .stats-hero_grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  justify-items: stretch;
  align-items: stretch;
}
.section_stats-2 .stats-hero_wrap {
  min-width: 0;
  padding: 4px 16px;
  align-items: center;
  text-align: center;
}
.section_stats-2 .stats-hero_wrap + .stats-hero_wrap {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}
.section_stats-2 .stats-content_wrapper-2 {
  text-align: center;
}
.section_stats-2 .stats-heading-style-h2,
.section_stats-2 .stats-stroke_text {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
  direction: ltr;
}
.section_stats-2 .stats-info_text,
.section_stats-2 .stats-hero_subtext {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.section_stats-2 .stats-hero_subtext {
  font-size: 18px;
  letter-spacing: 0;
}
@media screen and (max-width: 991px) {
  .section_stats-2 {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .section_stats-2 .stats-hero_wrap {
    padding-left: 10px;
    padding-right: 10px;
  }
  .section_stats-2 .stats-heading-style-h2,
  .section_stats-2 .stats-stroke_text {
    font-size: 44px;
  }
  .section_stats-2 .stats-info_text {
    font-size: 15px;
  }
  .section_stats-2 .stats-hero_subtext {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  .section_stats-2 {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .section_stats-2 .stats-hero_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section_stats-2 .stats-hero_wrap {
    padding: 20px 8px;
  }
  .section_stats-2 .stats-hero_wrap + .stats-hero_wrap {
    border-inline-start: 0;
  }
  .section_stats-2 .stats-hero_wrap:nth-child(even) {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
  }
  .section_stats-2 .stats-hero_wrap:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .section_stats-2 .stats-heading-style-h2,
  .section_stats-2 .stats-stroke_text {
    font-size: 40px;
  }
  .section_stats-2 .stats-info_text {
    font-size: 14px;
  }
  .section_stats-2 .stats-hero_subtext {
    font-size: 15px;
  }
}

/* Footer: shorter, calmer background, tidier brand column. */
.section_footer {
  background-image: linear-gradient(rgba(241, 242, 241, 0.9), rgba(241, 242, 241, 0.9)), url('../images/div.footer-2.png');
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 40px;
  padding-bottom: 32px;
}
.footer-grid_wrap {
  grid-row-gap: 0;
  row-gap: 0;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.footer-top_wrap:empty {
  display: none;
}
.footer-bottom_wrap {
  align-items: center;
}
.footer-link {
  margin-top: 6px;
  margin-bottom: 6px;
}
.footer-bottom_flex {
  grid-row-gap: 10px;
  row-gap: 10px;
}
.footer-bottom_flex .align-right {
  font-size: 16px;
}
.footer-social-wrap {
  grid-column-gap: 10px;
  column-gap: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.footer-social {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
  background-color: rgba(7, 108, 50, 0.08);
  transition: background-color .2s, color .2s;
}
.footer-social:hover {
  background-color: var(--brand-green);
  color: #fff;
}
.footer-flex {
  font-size: 14px;
}
@media screen and (max-width: 479px) {
  .section_footer {
    padding-top: 28px;
    padding-bottom: 24px;
  }
  .footer-bottom_wrap {
    grid-row-gap: 20px;
    row-gap: 20px;
  }
  .footer-link_grid {
    grid-column-gap: 8px;
    column-gap: 8px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer-link_wrap {
    text-align: center;
    align-items: center;
  }
  .footer-link {
    font-size: 15px;
  }
  .footer-bottom_flex {
    align-items: center;
  }
  .footer-bottom_flex .align-right {
    text-align: center;
  }
}

/* Project detail galleries: justified rows (approved 2026-10-26).
   Every photo keeps its real shape and rows fill the width. Each tile carries
   style="--ar:<width/height>"; the grid has the extra class hs-justified.
   Browsers without aspect-ratio support keep the original Webflow grid.
   To undo: delete this block. */
@supports (aspect-ratio: 1 / 1) {
  .project-gallery_grid.hs-justified {
    --row-h: 260px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .hs-justified > .lightbox-gallery_item {
    position: relative;
    flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * var(--row-h));
    width: auto;
    height: auto;
    min-width: 0;
    max-width: calc(var(--ar, 1.5) * var(--row-h) * 2);
    max-height: none;
    aspect-ratio: var(--ar, 1.5);
  }
  .hs-justified > .lightbox-gallery_item .gallery-lightbox_image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
}
@media screen and (max-width: 991px) {
  .project-gallery_grid.hs-justified { --row-h: 200px; }
}
@media screen and (max-width: 479px) {
  .project-gallery_grid.hs-justified { --row-h: 150px; gap: .625rem; }
}

/* Global navbar (approved 2026-10-26). One set of rules for every navbar variant:
   EN home/news .navbar-absolute-dark, EN inner pages .navbar-absolute--2,
   AR home/news .navbar-absolute-arabic-hero / .navbar-absolute-arabic-mobile,
   AR inner pages .navbar-absolute--2-arabic (+ its .mobile copy).
   Same logo size, menu position, bar padding and language switch on every page.
   To undo: delete this block. */
@media screen and (min-width: 992px) {
  /* EN inner pages lacked .flex-sb, so their menu stopped 174px short of the right edge */
  .w-nav .nav-menu-wrapper {
    justify-content: space-between;
  }
  .w-nav .w-nav-brand img {
    width: 112px;
    height: auto;
  }
}
@media screen and (min-width: 1920px) {
  .w-nav .w-nav-brand img {
    width: 128px;
  }
}
@media screen and (max-width: 991px) {
  .navbar-absolute-dark,
  .navbar-absolute-arabic-hero,
  .navbar-absolute-arabic-mobile {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .w-nav .w-nav-brand img {
    width: 96px;
    height: auto;
  }
}
@media screen and (max-width: 479px) {
  .w-nav .w-nav-brand img {
    width: 80px;
  }
}
.w-nav .toggle-btn {
  background-color: rgba(0, 0, 0, 0.6);
}
/* AR home/news: its .justify-right adds a 50px gap between the language switch and the links */
.navbar-absolute-arabic-hero .justify-right {
  grid-column-gap: 0;
  column-gap: 0;
}
/* EN home/news on phones: the navbar switched to a grid layout that pushed the logo 16px in */
@media screen and (max-width: 479px) {
  .navbar-absolute-dark {
    display: block;
    padding-right: 0;
  }
  .navbar-absolute-dark .nav-menu-wrapper {
    padding-left: 10px;
  }
}
.navbar-absolute--2,
.navbar-absolute--2-arabic {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* Full-screen photo viewer (Webflow lightbox): leave a gap between the photo and the
   thumbnail strip below it. Webflow sizes the photo to the full view height, so they touched.
   The view centres the photo vertically, so the space splits evenly above and below. */
.w-lightbox-group .w-lightbox-image {
  max-height: 82vh;
}
@media (min-width: 768px) {
  .w-lightbox-group .w-lightbox-image {
    max-height: 80vh;
  }
}

/* Project name is the page's <h1> on the new project pages (SEO, 2026-10-26). Webflow styles it
   through .banner-heading-2; only the h2 tag's text-transform needs carrying over. */
h1.banner-heading-2 {
  text-transform: capitalize;
}

/* Project page headings on phones and small tablets (user, 2026-10-30: at most 3 lines on mobile).
   Webflow sets the heading (.banner-heading-2.text-color-black) to 60px up to 767px, then 32px, so long
   project names took up to 6 lines. Up to 767px the size now follows the screen width (46px at 767,
   ~37px at 600, ~27px at 390, ~21px at 320), and a name with a dash ("<project> - <client>", or the place
   on 321/325/326/327) shows the part after the dash as its own smaller grey line (markup: span.hs-title-sep
   + span.hs-title-sub in the h1; both stay inline above 767px, so desktop is unchanged). Checked on all 64
   project pages at 13 widths from 320 to 767: at most 3 lines including that grey line. The plain font-size
   values are for browsers without clamp(); they keep Webflow's sizes. */
@media screen and (max-width: 767px) {
  h1.banner-heading-2.text-color-black {
    font-size: 46px;
    font-size: clamp(28px, 6.2vw, 46px);
  }
  .hs-title-sep {
    display: none;
  }
  .hs-title-sub {
    display: block;
    margin-top: .35em;
    font-size: .6em;
    font-size: max(14px, .6em);
    font-weight: 500;
    line-height: 1.3;
    color: var(--paragraph-gray, #535353);
  }
}
@media screen and (max-width: 479px) {
  h1.banner-heading-2.text-color-black {
    font-size: 32px;
    font-size: clamp(20px, calc(7.6vw - 3px), 34px);
  }
}

/* Undistorted images (2026-10-26). These Webflow classes give images a fixed box but no
   object-fit, so photos and logos were squashed or stretched by up to 220%.
   - client logos (home "Major Clients" strip): shown whole inside their box
   - project cards (Projects list) and featured-project cards (home): fill the card, cropped to fit */
.sponsor-logo {
  object-fit: contain;
}
.project-image-fill,
.home-project_image {
  object-fit: cover;
}

/* No sideways scrolling (2026-10-26). Slide-in animations (e.g. the team-skills text on the
   Arabic About page) poke past the screen edge while they play, letting phones scroll sideways.
   overflow-x: clip on the page wrappers hides that without creating a scroll box, so sticky elements keep working.
   Older browsers that don't support clip simply ignore it. */
.page-wrapper,
.main-wrapper {
  overflow-x: clip;
}
/* Careers page on tablets: the two-column layout couldn't fit the application form and spilled
   31px past the edge. Stack it (text above form) as on phones. */
@media screen and (max-width: 991px) {
  .careers-wrap {
    grid-template-columns: 1fr;
  }
}

/* Small text and tap targets on phones (#8, 2026-10-26), kept modest on purpose:
   team job titles 12px -> 13px; footer links get vertical padding instead of margin so the tappable
   area is ~31px tall while the visual spacing stays the same. */
@media screen and (max-width: 479px) {
  .employee-position {
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  .footer-link {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .footer-link-b {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* One photo style site-wide (2026-10-26): every photo inside the content area gets the same 8px
   rounded corners the home page uses. Full-width banner photos stay square. clip-path keeps the
   corners rounded during the hover-zoom animation in Safari as well. */
.lightbox-gallery_item,
.project-item-image-big,
.team-member-card,
.director-member-card,
.section_videos .w-video,
.video-img_bg,
.section_certifications .w-lightbox img {
  border-radius: 8px;
  overflow: hidden;
  clip-path: inset(0 round 8px);
}
@media screen and (min-width: 992px) {
  .section_project-image .project-full_image {
    border-radius: 8px;
  }
}

/* "Our Partners" title box (home, both languages): text left-aligned on the content edge like every other
   section (user's request; it was right-aligned before). The box is as wide as the text plus a 32px gap before
   the logos (Webflow fixed it at 250/160/180/120px). Both logo strips also get a full-width white backing, so
   nothing behind the page can show beside them now that they stop at the content width. */
.title-wrap_1 {
  justify-content: flex-start;
  width: auto;
  padding-left: 0;
  padding-right: 32px;
}
.title-wrap_1 .text-h5 {
  text-align: left;
}
.secion_major-consultant,
.secion_major-clients {
  background-color: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
@media screen and (max-width: 479px) {
  .title-wrap_1 {
    padding-right: 16px;
  }
}

/* Home "Featured Projects" cards show real project names (2026-10-26) instead of the generic
   "Residential Complex" labels. Webflow capped the label at 17 characters wide at 28px, which wrapped
   long names to 5 lines; let it use the card width at a slightly smaller size (1-2 lines). */
.project-card_wrap .home-project_content {
  max-width: none;
  padding-right: 20px;
}
.project-card_wrap .heading-four {
  font-size: 22px;
  line-height: 1.25;
}
@media screen and (max-width: 479px) {
  .project-card_wrap .heading-four {
    font-size: 20px;
  }
}

/* One content width for the whole site (2026-10-26). Navbar, footer, home logo strips, project cover
   photo and project page content all use the same edges as the regular page sections (.base-container):
   at most 1320px wide and centred, 40px from the screen edge on laptops/tablets, 20px on phones.
   Same edges in English and Arabic. Change the numbers here to change every one of them at once. */
.w-nav {
  padding-left: 0;
  padding-right: 0;
}
.w-nav .nav-container,
.section_footer .base-container-footer,
.secion_major-consultant,
.secion_major-clients,
.section_project-detail-hero .container-large-2,
.section_project-info .container-large-2,
.section_project-gallery .container-large-2 {
  box-sizing: border-box;
  width: calc(100% - 80px);
  min-width: 0;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.w-nav .nav-menu-wrapper,
.section_project-detail-hero .padding-global,
.section_project-info .padding-global,
.section_project-gallery .padding-global {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 992px) {
  .section_project-image .project-full_image {
    display: block;
    width: calc(100% - 80px);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 479px) {
  .w-nav .nav-container,
  .section_footer .base-container-footer,
  .secion_major-consultant,
  .secion_major-clients,
  .section_project-detail-hero .container-large-2,
  .section_project-info .container-large-2,
  .section_project-gallery .container-large-2 {
    width: calc(100% - 40px);
  }
}

/* About page photo strip (about-us.html, ar/about-us-ar.html).
   Every photo the same 3:2 size, cropped to fill (one photo was 1.45:1 and stuck out above and below), and the
   black "Values" section always starts exactly at the middle of the photos. Webflow pulled it up by 30% of the
   screen height instead, so the black edge landed anywhere from below the photos to above them (iPad portrait:
   the Values text ran under the photos). The pull-up = the gallery's margin-bottom (80px) + the white section's
   padding-bottom (Webflow .section: 130px at >=1280px, 80px, 60px at <=767px, 30px at <=479px) + half a photo. */
:root {
  --hs-strip-w: 360px;
  --hs-strip-above: 160px;
  --hs-strip-gap: 80px;
}
@media screen and (min-width: 1280px) {
  :root { --hs-strip-above: 210px; }
}
@media screen and (max-width: 991px) {
  :root { --hs-strip-w: 270px; --hs-strip-gap: 64px; }
}
@media screen and (max-width: 767px) {
  :root { --hs-strip-above: 140px; }
}
@media screen and (max-width: 479px) {
  :root { --hs-strip-w: 220px; --hs-strip-above: 110px; --hs-strip-gap: 48px; }
}
.about-gallery_image {
  flex: none;
  width: var(--hs-strip-w);
  max-width: none;
  height: calc(var(--hs-strip-w) * 2 / 3);
  object-fit: cover;
}
.section.black-background-copy {
  margin-top: calc(-1 * (var(--hs-strip-above) + var(--hs-strip-w) / 3));
  padding-top: calc(var(--hs-strip-w) / 3 + var(--hs-strip-gap));
}

/* Leadership page team cards (directors, office team, site team; leadership.html and ar/leadership-ar.html).
   Portrait 4:5 photos at every screen size (was a 416x360 landscape crop on desktop, half the screen height on
   tablets and 2:3 on phones), filling the card edge to edge (photo and name band stopped 4-5px short of the right
   edge), and a slim dark gradient behind the name instead of the grey blurred band that covered the bottom third
   of every photo (almost half on phones). object-position keeps faces in frame; the few landscape photos are
   cropped at the sides, all with the person centred. */
.team-member-card .team-member-image,
.director-member-card .team-member-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}
.team-member-card .team-member-card-image,
.director-member-card .team-member-card-image {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 20%;
}
.team-member-card .card-content-wrapper,
.director-member-card .card-content-wrapper {
  width: 100%;
  height: auto;
  bottom: 0;
  justify-content: flex-end;
  padding: 56px 24px 20px;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.82) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media screen and (max-width: 479px) {
  .team-member-card .card-content-wrapper,
  .director-member-card .card-content-wrapper {
    padding: 40px 10px 10px;
  }
}

/* Mrs. Ayana Tom's team card (class hs-photo-top on her .team-member-card, leadership.html and
   ar/leadership-ar.html; user, 2026-10-29). Her hair reaches the top edge of the photo, so the card shows the photo
   from its top edge, and the hover zoom is gentler (105% instead of Webflow's 110%) and grows from the top edge,
   so it no longer cuts off her hair. Webflow's hover interaction (a-283 / a-284, 768px and wider) writes its zoom
   inline; !important replaces it with the same 0.8s ease-out. */
.team-member-card.hs-photo-top .team-member-card-image {
  object-position: 50% 0% !important;
}
@media screen and (min-width: 768px) {
  .team-member-card.hs-photo-top .team-member-image {
    transform: none !important;
    transform-origin: 50% 0;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .team-member-card.hs-photo-top:hover .team-member-image {
    transform: scale(1.05) !important;
  }
}

/* Leadership team grids (office + site team): smaller cards. 4 per row on large screens, 3 on laptops/tablets,
   2 on phones, with Webflow's gaps (30px, 16px at <=767px, 8px at <=479px). A short last row stays left-aligned
   (user's choice). Names and titles one step smaller to suit the smaller cards. */
.w-layout-grid.our-team-grid {
  --team-cols: 4;
  --team-gap: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: var(--team-gap);
  row-gap: var(--team-gap);
}
.w-layout-grid.our-team-grid > .team-member-card {
  flex: 0 0 calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols) - 0.1px);
  min-width: 0;
}
.our-team-grid .card-content-wrapper h5 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 20px;
}
.our-team-grid .employee-position {
  margin-bottom: 0;
  font-size: 15px;
}
@media screen and (max-width: 1279px) {
  .w-layout-grid.our-team-grid { --team-cols: 3; }
}
@media screen and (max-width: 991px) {
  .our-team-grid .card-content-wrapper {
    padding: 48px 16px 14px;
  }
  .our-team-grid .card-content-wrapper h5 {
    font-size: 17px;
  }
  .our-team-grid .employee-position {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  .w-layout-grid.our-team-grid { --team-cols: 2; --team-gap: 16px; }
}
@media screen and (max-width: 479px) {
  .w-layout-grid.our-team-grid { --team-gap: 8px; }
  .our-team-grid .card-content-wrapper {
    padding: 40px 10px 10px;
  }
  .our-team-grid .card-content-wrapper h5 {
    margin-bottom: 2px;
    font-size: 15px;
  }
  .our-team-grid .employee-position {
    font-size: 13px;
  }
}

/* Leadership "Meet our Directors": zig-zag cards (user's design). Each director is one light card spanning the
   full content width; inside it the photo (4:5, 360px) and the bio (640px) form one centred block, so the two
   rows line up exactly: row 1 photo | bio, row 2 bio | photo, with the same left and right edges. The markup wraps
   each photo + bio in div.hs-director (the second one also .hs-director-flip). The Arabic grid has dir="rtl", so
   its zig-zag starts with the photo on the right. Phones: each card is photo, then bio. The heading moves from
   Webflow's 60/134/192px indent (made for the old narrow 932px box) to the content edge. */
.section-title_wrap {
  margin-left: 0;
}
.section-title_wrap.align-right2 {
  margin-right: 0;
}
.w-layout-grid.our-founders-grid {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  width: 100%;
}
.hs-director {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 64px;
  padding: 48px;
  border-radius: 8px;
  background-color: #f1f2f1;
}
.hs-director-flip {
  flex-direction: row-reverse;
}
.hs-director > .director-member-card {
  flex: 0 0 360px;
  width: 360px;
}
.hs-director > .director-content_wrap {
  flex: 0 1 640px;
  min-width: 0;
}
.director-content_wrap .paragraph-large-d {
  width: auto;
  margin: 0;
  line-height: 1.7;
}
.director-content_wrap .paragraph-large-d::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: 20px;
  background-color: #076c32;
}
.director-content_wrap .paragraph-large-d:empty {
  display: none;
}
.director-member-card .card-content-wrapper .director {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 26px;
}
.director-member-card .employee-position.director {
  margin-bottom: 0;
  font-size: 16px;
}
.our-founders-grid[dir="rtl"] .card-content-wrapper.align-right {
  align-items: flex-start;
}
@media screen and (max-width: 991px) {
  .hs-director {
    column-gap: 32px;
    padding: 32px;
  }
  .hs-director > .director-member-card {
    flex-basis: 260px;
    width: 260px;
  }
  .hs-director > .director-content_wrap {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 767px) {
  .w-layout-grid.our-founders-grid {
    row-gap: 20px;
  }
  .hs-director,
  .hs-director-flip {
    flex-direction: column;
    align-items: stretch;
    row-gap: 20px;
    padding: 16px 16px 24px;
  }
  .hs-director > .director-member-card {
    flex: 0 0 auto;
    width: 100%;
  }
  .director-member-card .card-content-wrapper .director {
    font-size: 22px;
  }
}

/* Leadership section headings: Directors, Office team and Site team all in one style (Webflow had three:
   Montserrat 28px/600, Kanit 48px/500 and Montserrat 48px/600); the user asked for the Directors heading to match
   the team heading. The two team headings also lose Webflow's 40px indent, so all three start on the content edge
   like the cards below them. */
.section-title-wrapper-copy {
  padding-left: 0;
}
.section-title_wrap .heading-h4-semibold,
.section-title-wrapper-copy .heading-6,
.section-title-wrapper-copy .heading-style-h2_sb {
  font-family: Kanit, sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
}
@media screen and (max-width: 479px) {
  .section-title_wrap .heading-h4-semibold,
  .section-title-wrapper-copy .heading-6,
  .section-title-wrapper-copy .heading-style-h2_sb {
    font-size: 26px;
  }
}

/* Home "Founder's / Director's Note" slider (index.html, ar/index.html): same card style as the Leadership
   director cards. Light card with 8px corners; inside, the photo (240px square) and the note (max 760px) form one
   centred block (188..1252 at 1440, the same edges as the director cards); every slide is the same height (the
   mask is a flex row, so slides stretch to the tallest one instead of Webflow's fixed 400px / 80vh, which clipped
   the founder's slide); the arrows sit under the card on the right edge instead of inside its corner. Arabic markup
   lists the note before the photo, so the photo lands on the right by itself. Phones: photo + name, then note. */
.founder-content_slider {
  height: auto;
  padding-bottom: 56px;
  background-color: transparent;
}
.founder-content_slider .founder-mask {
  display: flex;
  height: auto;
}
.founder-content_slider .w-slide {
  flex: 0 0 100%;
  height: auto;
  border-radius: 8px;
}
.founder-content_slider .founder-wrap,
.founder-content_slider .founder-wrap._2 {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 48px;
}
.founder-content_slider .founder-grid_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 64px;
  width: 100%;
}
.founder-content_slider .founder-content_wrap {
  flex: 0 0 240px;
  width: 240px;
  padding-left: 0;
  align-self: center;
}
.founder-content_slider .div-block-16 {
  width: 100%;
  align-items: flex-start;
}
.founder-content_slider .div-block-16.align-right {
  align-items: flex-end;
}
.founder-content_slider .founder-image,
.founder-content_slider .founder-image.height {
  width: 240px;
  height: 240px;
  object-fit: cover;
  object-position: 50% 25%;
}
.founder-content_slider .heading.name {
  width: 100%;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.3;
}
.founder-content_slider .founder-flex_wrap {
  flex: 0 1 760px;
  width: auto;
  min-width: 0;
  padding: 0;
}
.founder-content_slider .paragraph-2 {
  margin-bottom: 24px;
}
.founder-content_slider .f-arrow_left,
.founder-content_slider .f-arrow_right {
  top: auto;
  bottom: 0;
  left: auto;
  margin: 0;
}
.founder-content_slider .f-arrow_right {
  right: 0;
}
.founder-content_slider .f-arrow_left {
  right: 116px;
}
@media screen and (max-width: 991px) {
  .founder-content_slider .founder-wrap,
  .founder-content_slider .founder-wrap._2 {
    padding: 40px;
  }
  .founder-content_slider .founder-grid_wrap {
    column-gap: 40px;
  }
  .founder-content_slider .founder-content_wrap {
    flex-basis: 200px;
    width: 200px;
  }
  .founder-content_slider .founder-image,
  .founder-content_slider .founder-image.height {
    width: 200px;
    height: 200px;
  }
  .founder-content_slider .founder-flex_wrap {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 767px) {
  .founder-content_slider .founder-wrap,
  .founder-content_slider .founder-wrap._2 {
    padding: 24px;
  }
  .founder-content_slider .founder-grid_wrap {
    flex-direction: column;
    align-items: stretch;
    row-gap: 20px;
  }
  .founder-content_slider .founder-content_wrap {
    order: -1;
    flex: 0 0 auto;
    width: auto;
    align-self: flex-start;
  }
  .founder-content_slider .founder-content_wrap.align-right {
    align-self: flex-end;
  }
  .founder-content_slider .founder-image,
  .founder-content_slider .founder-image.height {
    width: 140px;
    height: 140px;
  }
  .founder-content_slider .founder-flex_wrap {
    flex: 0 0 auto;
  }
}

/* Home stats strip: no zoom on hover (user's request). Webflow's hover interaction (a-490) scaled each stat to
   107.5% and writes the transform inline, so !important is needed to cancel it. */
.section_stats-2 .stats-hero_wrap,
.section_stats-2 .stats-hero_wrap * {
  transform: none !important;
}

/* Home testimonials (index.html, ar/index.html; user: "better in height", "a better photo"). The background was
   a 500x346px photo stretched across the whole width; it is now the night photo of HighStar's finished Avant
   Garde tower (WebP, JPEG for browsers without image-set type()). The section is shorter: 96px padding instead of
   130px and the slider sizes to the quote instead of a fixed 350/460px, with every slide the same height. The quote
   starts on the content edge like the other sections; the arrows sit at the bottom on the side opposite the
   author (right in English, left in Arabic) and under the quote on phones. */
.section.with-paralax {
  padding-top: 96px;
  padding-bottom: 96px;
  background-image: linear-gradient(rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.72)), url('../images/avant-garde-tower-night-2.jpg');
  background-image: linear-gradient(rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.72)), image-set(url('../images/avant-garde-tower-night-2.webp') type('image/webp'), url('../images/avant-garde-tower-night-2.jpg') type('image/jpeg'));
  background-position: 0 0, 50% 40%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}
.section.with-paralax .testimonials-slider-holder {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.section.with-paralax .testimonials-slider-style {
  max-width: none;
  height: auto;
  padding-bottom: 0;
}
.section.with-paralax .testimonials-slider-mask-style {
  display: flex;
}
.section.with-paralax .slide-testimonials {
  flex: 0 0 100%;
  height: auto;
}
.section.with-paralax .testimonials-text {
  max-width: 900px;
  margin-top: 0;
}
.section.with-paralax .testimonials-text.al-right {
  margin-left: auto;
}
.section.with-paralax .slide-arrow-white {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  margin: 0;
}
.section.with-paralax .slide-arrow-white.left {
  right: 116px;
}
html[data-wf-site="6679079738a807f6fecacaee"] .section.with-paralax .slide-arrow-white {
  right: auto;
  left: 116px;
}
html[data-wf-site="6679079738a807f6fecacaee"] .section.with-paralax .slide-arrow-white.left {
  left: 0;
}
@media screen and (max-width: 991px) {
  .section.with-paralax {
    padding-top: 72px;
    padding-bottom: 72px;
    background-attachment: scroll, scroll;
  }
}
@media screen and (max-width: 767px) {
  .section.with-paralax {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .section.with-paralax .testimonials-slider-style {
    padding-bottom: 56px;
  }
}

/* "Major Clients" title box (home, both languages): mirror of "Our Partners" on the right. Text right-aligned on
   the content edge (user's request), box as wide as the text plus a 32px gap before the logos. */
.title-wrap_2 {
  justify-content: flex-end;
  width: auto;
  padding-left: 32px;
  padding-right: 0;
}
.title-wrap_2 .text-h5 {
  text-align: right;
}
@media screen and (max-width: 479px) {
  .title-wrap_2 {
    padding-left: 16px;
  }
}

/* "Major Clients" logo strip: 10 client logos added 2026-10-27/28 (19 per list instead of 9). The loop runs one list
   width per cycle, so Webflow's 30s would scroll about twice as fast; 63.5s keeps the original speed (~55px/s). Scoped to the
   clients strip because the page's inline marquee <style> comes later and would win over a bare .scroll-2. */
.marquee-conatiner-client .scroll-2 {
  animation-duration: 63.5s;
}

/* "Our Partners" (consultants) logo strip: 9 consultant logos from the client's "PQ Page 35-36" added 2026-10-28
   (29 per list instead of 20). 43.5s instead of Webflow's 30s keeps the original speed (~126px/s). */
.marquee-conatiner .scroll {
  animation-duration: 43.5s;
}

/* Testimonial arrows: Webflow's hover scales them to 110%, which on phones sticks after a tap and gets clipped at
   the slider edge. A light fill on hover instead; no size change. */
.section.with-paralax .slide-arrow-white:hover {
  transform: none;
  background-color: rgba(255, 255, 255, 0.14);
}

/* Project gallery video tile (Avant Garde, 2026-10-27): the video's thumbnail with the home page's play button
   centred on it; the tile opens the YouTube video in the same full-screen viewer as the photos. The gallery's "+"
   hover icon is hidden on video tiles so it doesn't sit on top of the play button. */
.lightbox-gallery_item .hs-gallery-play {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* same as inset: 0, for Safari before 14.1 */
  z-index: 1;
  width: 72px;
  height: 72px;
  margin: auto;
  pointer-events: none;
}
.lightbox-gallery_item .hs-gallery-play img {
  width: 32px;
  height: 32px;
}
.hs-video-tile .plus-gallery_icon {
  display: none;
}
@media screen and (max-width: 479px) {
  .lightbox-gallery_item .hs-gallery-play {
    width: 56px;
    height: 56px;
  }
}

/* Home Featured Projects (index.html, ar/index.html; user 2026-10-28: the big cards and the mouse-follow slide as
   before, but the slide must reach the 5th card). Webflow's slide (interaction a-409) moved the cards by a fixed
   +15vw..-30vw, which on laptops never brought the 5th card into view. On screens >= 992px the slide is now done by
   js/hs-featured-slider.js (mouse at the left edge: first card at the left; at the right edge: last card at the
   right, with the same smooth follow); a-409's transform on the cards is cancelled here so only the script moves the
   row. Tablets and phones keep Webflow's sideways swipe. */
@media screen and (min-width: 992px) {
  .home-hero_scroll-wrap .project-card_wrap {
    transform: none !important;
  }
  .home-hero_scroll-wrap {
    will-change: transform;
  }
}

/* News page (news.html, ar/news-ar.html): the Curator.io feed (connected to the company's Instagram since 2026-10-28)
   sits in a centred column and its box shrank to about 140px, so Curator laid the posts out in a 140px strip (text
   squeezed, no photos). The box now uses the full content width, so the feed shows its normal columns. */
.facebook-feed_embed {
  width: 100%;
}