@font-face {
  font-family: "GE SS Unique Light";
  src: url("../fonts/GE-SS-Unique-Light.otf");
}
@font-face {
  font-family: "GE SS Unique Bold";
  src: url("../fonts/GE_SS_Unique_Bold.otf");
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.ttf");
}
/* English digits only — Arabic text keeps GE SS Unique */
@font-face {
  font-family: "IBM Plex Digits";
  src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype");
  unicode-range: U+0030-0039;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  direction: rtl;
  background-color: #ffffff;
}

/* =========================
   HEADER
========================= */

.site-header {
  width: 100%;
  background-color: #333333;
  padding: 28px 0;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  transform: translateY(0);
  transition:
    transform 0.35s ease,
    padding 0.35s ease,
    background-color 0.35s ease;
}

.site-header.scrolled {
  background-color: #b49a6b;
  padding: 16px 0;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.container {
  width: 90%;
  max-width: 1500px;
  margin: auto;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* =========================
   LOGO
========================= */

.logo img {
  width: 180px;
  height: auto;
  transition: width 0.35s ease;
}

.site-header.scrolled .logo img {
  width: 150px;
}

/* =========================
   NAVIGATION
========================= */

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.main-nav a:not(.mobile-btn) {
  position: relative;
  color: #b49a6b;
  text-decoration: none;
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
  font-size: 17px;
  white-space: nowrap;
  transition: 0.3s ease;
}

.main-nav a:not(.mobile-btn):hover {
  opacity: 0.7;
}

.main-nav a.active {
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
}

.main-nav a.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
}

.site-header.scrolled .main-nav a {
  color: #333333;
}

.site-header.nav-gold .main-nav a:not(.mobile-btn) {
  color: #b49a6b;
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
}

/* =========================
   BUTTON
========================= */

.header-btn,
.mobile-btn {
  background-color: #b49a6b;
  color: #ffffff !important;
  padding: 14px 34px;
  text-decoration: none;
  font-size: 15px;
  transition:
    background-color 0.3s ease,
    padding 0.35s ease,
    opacity 0.3s ease;
}

.header-btn:hover,
.mobile-btn:hover {
  opacity: 0.85;
}

.site-header.scrolled .header-btn {
  background-color: #333333;
  padding: 11px 28px;
}

.mobile-btn {
  display: none;
}

/* =========================
   HAMBURGER
========================= */

.hamburger {
  display: none;
  width: 34px;
  height: 26px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #ffffff;
  margin-bottom: 7px;
  transition: 0.35s ease;
}

.site-header.scrolled .hamburger span {
  background-color: #333333;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}
/* Hero section */
.hero-section {
  width: 100%;
  height: 100vh;
  min-height: 650px;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  margin-top: 80px;
}

.hero-content h1 {
  color: #ffffff;
  font-size: 90px;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 45px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-btn {
  display: inline-block;
  background-color: #b49a6b;
  color: #ffffff;
  text-decoration: none;
  padding: 18px 55px;
  font-size: 18px;
  transition: 0.3s ease;
}

.hero-btn:hover {
  background-color: #333333;
}
/* Counter number section css */
.numbers-section {
  padding: 120px 0 100px;
  background-color: #ffffff;
}
/* Riyal sign */

.riyal-symbol {
  width: 28px;
  height: auto;
  margin-right: 8px;
  vertical-align: middle;
}

.numbers-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 120px;
}

.numbers-heading h2 {
  font-size: 42px;
  font-weight: 300;
  color: #333333;
}

.numbers-heading span {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 34px;
  letter-spacing: 8px;
  color: #333333;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  direction: rtl;
}

.number-item {
  text-align: center;
  padding: 0 35px;
  border-left: 1px solid #b49a6b;
}

.number-item:last-child {
  border-left: none;
}

.number-item h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: #333333;
  line-height: 1;
  margin-bottom: 18px;
}

.number-text {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 40px;
  font-weight: 600;
}

.number-item p {
  font-size: 22px;
  color: #333333;
}

.numbers-bottom-text {
  margin-top: 120px;
  text-align: center;
  font-size: 28px;
  color: #b8b8b8;
  font-style: italic;
}

/* About section */
.about-section {
  background-color: #f3f3f3;
  padding: 120px 0 140px;
}

.about-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 70px;
}

.about-heading h2 {
  font-size: 42px;
  font-weight: 300;
  color: #333333;
}

.about-heading span {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 34px;
  letter-spacing: 8px;
  color: #333333;
}

.about-year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 90px;
  margin-bottom: 95px;
}

.about-year .line {
  flex: 1;
  height: 1px;
  background-color: #333333;
}

.year-box {
  text-align: center;
  min-width: 220px;
}

.year-box p {
  font-size: 38px;
  color: #333333;
  margin-bottom: 10px;
}

.year-box h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 78px;
  font-weight: 700;
  color: #333333;
  line-height: 1;
}

.about-text {
  max-width: 1200px;
  margin: auto;
  text-align: center;
  font-size: 27px;
  line-height: 2;
  color: #333333;
}
/* Feature Section */
.featured-section {
  display: grid;
  grid-template-columns: 40% 60%;
  width: 100%;
  min-height: 760px;
  overflow: hidden;
}

.featured-left {
  display: grid;
  grid-template-rows: 50% 50%;
}

.bed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.red-box {
  position: relative;
  overflow: hidden;
}

.red-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.red-text {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  direction: rtl;

  color: #ffffff;
}

.red-text h2 {
  font-size: 62px;
  margin-bottom: 18px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: geometricPrecision;
}

.red-text p {
  font-size: 48px;
  font-weight: 300;
}

.featured-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Values section */
.values-section {
  background-color: #ffffff;
  padding: 120px 0 0;
}

.values-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 110px;
}

.values-heading h2 {
  font-size: 42px;
  font-weight: 300;
  color: #333333;
}

.values-heading span {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 34px;
  letter-spacing: 8px;
  color: #333333;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
}

.value-card {
  height: 530px;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #ffffff;
}

.value-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(51, 51, 51, 0.25);
  transition: 0.4s ease;
}

.value-card.light {
  color: #333333;
}

.value-card.light::before {
  background-color: rgba(255, 255, 255, 0.45);
}

.value-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 35px;
  position: relative;
  z-index: 2;
}

.value-card h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.value-card p {
  font-size: 25px;
  position: relative;
  z-index: 2;
}

.value-card:hover::before {
  background-color: rgba(180, 154, 107, 0.55);
}

.value-card:hover {
  transform: translateY(-8px);
  transition: 0.4s ease;
}

/* Project filter */
.projects-section {
  padding: 110px 0;
  background-color: #ffffff;
}

.projects-filter {
  display: grid;
  grid-template-columns: 2.3fr 1fr 1fr 1fr;
  gap: 35px;
  margin-bottom: 80px;
}

.search-box {
  position: relative;
}

.search-box input,
.projects-filter select {
  width: 100%;
  height: 48px;
  border: 1px solid #333333;
  background: #ffffff;
  color: #333333;
  padding: 0 18px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
}

.search-box input {
  padding-right: 45px;
}

.search-box span {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #333333;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 45px;
  direction: rtl;
}

.project-card {
  border: 1px solid rgba(180, 154, 107, 0.6);
  background-color: #ffffff;
  transition: 0.35s ease;
}

.project-card.hide {
  display: none;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
}

.project-image {
  height: 340px;
  background-color: #b49a6b;
  position: relative;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.project-image--shift-top img {
  height: calc(100% + 20px);
  object-fit: cover;
  object-position: top;
  transform: translateY(-20px);
}

.project-image--shift-top-40 img {
  height: calc(100% + 40px);
  object-fit: cover;
  object-position: top;
  transform: translateY(-40px);
}

.project-image span {
  position: absolute;
  top: 25px;
  right: 25px;
  border: 1px solid rgba(51, 51, 51, 0.35);
  padding: 8px 16px;
  font-size: 13px;
  color: #333333;
  background-color: rgba(180, 154, 107, 0.8);
}

.project-info {
  padding: 30px 28px 35px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  direction: rtl;
  text-align: right;
}

.project-info h3 {
  font-size: 22px;
  color: #333333;
  margin-bottom: 22px;
  font-weight: 600;
}

.project-info p {
  font-size: 15px;
  color: #333333;
  margin-bottom: 10px;
}

.project-info > a {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  border: 1px solid #333333;
  color: #333333;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s ease;
}

.project-info > a:hover {
  background-color: #333333;
  color: #ffffff;
}

.load-more-btn {
  display: block;
  margin: 90px auto 0;
  background: transparent;
  border: none;
  color: #333333;
  font-family: inherit;
  font-size: 24px;
  cursor: pointer;
  position: relative;
}

.load-more-btn::after {
  content: "⌄";
  display: block;
  font-size: 28px;
  line-height: 1;
  margin-top: 5px;
}

.project-meta {
  margin-top: 15px;
  width: 100%;
}

.meta-item {
  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 10px;
  margin-bottom: 14px;
}

.meta-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-top: 2px;
}

.meta-item span {
  font-size: 15px;
  color: #333333;

  text-align: right;
  direction: rtl;
}

.meta-location-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}
/* Contact us */
.interest-section {
  padding: 130px 0 120px;
  background: url("../images/contact-bg.jpg") center/cover no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.interest-form select {
  margin-bottom: 25px;
  appearance: none;
  cursor: pointer;

  background-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.interest-form select option {
  background-color: #b49a6b;
  color: #ffffff;
}
.interest-form input[type="tel"] {
  direction: ltr;
  text-align: right;
}
.interest-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 110px;
}

.interest-heading h2 {
  font-size: 42px;
  font-weight: 300;
  color: #ffffff;
}

.interest-heading span {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 34px;
  letter-spacing: 8px;
  color: #ffffff;
}

.interest-form {
  max-width: 850px;
  margin: auto;
  direction: rtl;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 25px;
}

.interest-form input,
.interest-form select,
.interest-form textarea {
  width: 100%;
  border: none;
  outline: none;
  background-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  padding: 18px 22px;
}

.interest-form input::placeholder,
.interest-form textarea::placeholder {
  color: #ffffff;
}

.interest-form select {
  margin-bottom: 25px;
  appearance: none;
  cursor: pointer;
}

.interest-form textarea {
  height: 150px;
  resize: none;
  margin-bottom: 28px;
}

.interest-form button {
  display: block;
  margin: auto;
  border: none;
  background-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-family: inherit;
  font-size: 18px;
  padding: 16px 48px;
  cursor: pointer;
  transition: 0.3s ease;
}

.interest-form button:hover {
  background-color: #333333;
}
/* Contact info section */
/* Contact Info Section */

.contact-info-section {
  background-color: #ffffff;
  padding: 130px 0;
}

.contact-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 130px;
}

.contact-heading h2 {
  font-size: 42px;
  font-weight: 300;
  color: #333333;
}

.contact-heading span {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 34px;
  letter-spacing: 8px;
  color: #333333;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px;

  direction: rtl;
}

.contact-box {
  text-align: right;
}

.contact-box h3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  font-size: 28px;
  color: #333333;
  margin-bottom: 30px;
  font-weight: 400;
}

.contact-box h3 img {
  width: 28px;
  height: 28px;
  background-color: #eeeeee;
  padding: 6px;
}

.contact-box-content {
  border-right: 1px solid #b49a6b;
  padding-right: 24px;

  text-align: right;
}

.contact-box-content strong {
  display: block;
  font-size: 18px;
  color: #333333;
  margin-bottom: 10px;
}

.contact-box-content p {
  font-size: 18px;
  color: #666666;
  line-height: 1.9;
  margin-bottom: 8px;
}

.contact-box-content a {
  display: block;
  color: #333333;
  text-decoration: none;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}

.social-icons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

.social-icons a {
  width: 42px;
  height: 42px;
  background-color: #eeeeee;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.3s ease;
}

.social-icons a:hover {
  background-color: #b49a6b;
}

.social-icons img {
  width: 18px;
  height: 18px;
}
.contact-item {
  margin-bottom: 24px;
}

.contact-item p {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 10px;
}

.contact-item p img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.ibm-number {
  font-family: "IBM Plex Sans", sans-serif !important;
  letter-spacing: 0.5px;
}

.contact-box-content a {
  font-family: "IBM Plex Sans", sans-serif;
}
.partners-section {
  padding: 100px 0;
  background-color: #f1f1f1;
}

.partners-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 70px;
}

.partners-heading span {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 34px;
  letter-spacing: 8px;
  color: #333333;
}

.partners-heading h2 {
  font-size: 42px;
  font-weight: 300;
  color: #333333;
}

.partners-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.partners-logos img {
  max-height: 60px;
  max-width: 150px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.partners-logos img:hover {
  transform: scale(1.1);
}

/* =========================
   TABLET
========================= */

@media (max-width: 991px) {
  .main-nav {
    gap: 18px;
  }

  .main-nav a {
    font-size: 13px;
  }

  .header-btn {
    padding: 12px 22px;
    font-size: 13px;
  }

  .logo img {
    width: 150px;
  }

  .hero-content h1 {
    font-size: 70px;
  }
  .numbers-section {
    padding: 90px 0;
  }
  .numbers-heading {
    margin-bottom: 80px;
  }
  .numbers-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 60px;
  }

  .number-item:nth-child(2) {
    border-left: none;
  }
  .about-section {
    padding: 90px 0 110px;
  }

  .about-heading span {
    font-size: 26px;
    letter-spacing: 6px;
  }

  .about-heading h2 {
    font-size: 36px;
  }

  .about-year {
    gap: 45px;
  }

  .year-box h3 {
    font-size: 68px;
  }

  .about-text {
    font-size: 23px;
  }
  /* Feature section */
  .featured-section {
    grid-template-columns: 1fr;
  }

  .featured-right {
    height: 650px;
  }

  .red-text h2 {
    font-size: 48px;
  }

  .red-text p {
    font-size: 38px;
  }
  /* Values section */
  .values-section {
    padding-top: 90px;
  }

  .values-heading {
    margin-bottom: 75px;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-card {
    height: 430px;
  }

  .value-card:last-child {
    grid-column: span 2;
  }
  /* Project Filter */
  .projects-filter {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Contact us  */
  .interest-section {
    padding: 100px 0;
  }

  .interest-heading {
    margin-bottom: 75px;
  }

  .interest-heading h2 {
    font-size: 36px;
  }

  .interest-heading span {
    font-size: 26px;
    letter-spacing: 6px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-info-section {
    padding: 100px 0;
  }

  .contact-heading {
    margin-bottom: 85px;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .partners-logos {
    gap: 30px;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {
  .site-header {
    padding: 20px 0;
  }

  .site-header.scrolled {
    padding: 12px 0;
  }

  .hamburger {
    display: block;
  }

  .header-btn {
    display: none;
  }

  .logo img {
    width: 140px;
    position: relative;
    z-index: 1001;
  }

  .site-header.scrolled .logo img {
    width: 120px;
  }

  .main-nav {
    position: fixed;
    top: 92px;
    left: 0;
    right: 0;
    width: 100%;

    background-color: #333333;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;

    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transform: translateY(-15px);

    transition:
      max-height 0.5s ease,
      opacity 0.35s ease,
      transform 0.35s ease;

    z-index: 998;
  }

  .site-header.scrolled .main-nav {
    background-color: #b49a6b;
    top: 70px;
  }

  .main-nav.active {
    max-height: 620px;
    opacity: 1;
    transform: translateY(0);
    padding: 18px 0;
    overflow-y: auto;
  }

  .main-nav a:not(.mobile-btn) {
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
    font-size: 20px;
    color: #b49a6b;
  }

  .site-header.scrolled .main-nav a {
    color: #333333;
  }

  .mobile-btn {
    display: inline-block;
    width: auto !important;
    margin-top: 15px;
    padding: 16px 34px !important;
    color: #ffffff !important;
  }

  .hero-section {
    height: 90vh;
    min-height: 550px;
    background-position: center;
  }

  .hero-content {
    margin-top: 60px;
    padding: 0 20px;
  }

  .hero-content h1 {
    font-size: 48px;
    margin-bottom: 30px;
  }

  .hero-btn {
    font-size: 16px;
    padding: 15px 40px;
  }
  .numbers-heading {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 60px;
  }

  .numbers-heading h2 {
    font-size: 34px;
  }

  .numbers-heading span {
    font-size: 24px;
    letter-spacing: 6px;
  }

  .numbers-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .number-item {
    border-left: none;
    border-bottom: 1px solid #b49a6b;
    padding-bottom: 35px;
  }

  .number-item:last-child {
    border-bottom: none;
  }

  .number-item h3 {
    font-size: 48px;
  }

  .number-item p {
    font-size: 20px;
  }

  .numbers-bottom-text {
    margin-top: 70px;
    font-size: 22px;
    line-height: 1.8;
  }
  .about-section {
    padding: 70px 0 85px;
  }

  .about-heading {
    flex-direction: column-reverse;
    gap: 15px;
    margin-bottom: 55px;
  }

  .about-heading h2 {
    font-size: 34px;
  }

  .about-heading span {
    font-size: 22px;
    letter-spacing: 5px;
  }

  .about-year {
    gap: 20px;
    margin-bottom: 60px;
  }

  .year-box {
    min-width: 150px;
  }

  .year-box p {
    font-size: 28px;
  }

  .year-box h3 {
    font-size: 54px;
  }

  .about-text {
    font-size: 20px;
    line-height: 2;
    padding: 0 10px;
  }
  /* Feature section */
  .bed-image,
  .red-box {
    height: 320px;
  }

  .featured-right {
    height: 500px;
  }

  .red-text h2 {
    font-size: 38px;
  }

  .red-text p {
    font-size: 28px;
  }
  /* Values section */
  .values-section {
    padding-top: 70px;
  }

  .values-heading {
    flex-direction: column-reverse;
    gap: 15px;
    margin-bottom: 55px;
  }

  .values-heading h2 {
    font-size: 34px;
  }

  .values-heading span {
    font-size: 22px;
    letter-spacing: 5px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-card,
  .value-card:last-child {
    grid-column: auto;
    height: 360px;
  }

  .value-card img {
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
  }

  .value-card h3 {
    font-size: 21px;
  }

  .value-card p {
    font-size: 23px;
  }
  /* Project Filter */
  .projects-section {
    padding: 75px 0;
  }

  .projects-filter {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 55px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .project-image {
    height: 300px;
  }

  .load-more-btn {
    margin-top: 55px;
    font-size: 22px;
  }
  .interest-section {
    padding: 75px 0 85px;
  }

  .interest-heading {
    flex-direction: column-reverse;
    gap: 15px;
    margin-bottom: 55px;
    text-align: center;
  }

  .interest-heading h2 {
    font-size: 34px;
  }

  .interest-heading span {
    font-size: 20px;
    letter-spacing: 4px;
  }

  .interest-form input,
  .interest-form select,
  .interest-form textarea {
    font-size: 15px;
    padding: 16px 18px;
  }

  .interest-form textarea {
    height: 140px;
  }
  .contact-info-section {
    padding: 75px 0 85px;
  }

  .contact-heading h2 {
    font-size: 34px;
  }

  .contact-heading span {
    font-size: 22px;
    letter-spacing: 5px;
  }

  .contact-box h3 {
    font-size: 24px;
  }

  .contact-box-content p,
  .contact-box-content a {
    font-size: 16px;
  }
  .partners-section {
    padding: 70px 0;
  }

  .partners-heading {
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    margin-bottom: 45px;
    text-align: center;
  }

  .partners-heading h2 {
    font-size: 24px;
  }

  .partners-heading span {
    font-size: 16px;
    letter-spacing: 3px;
  }

  .partners-logos {
    gap: 20px;
    row-gap: 30px;
  }

  .partners-logos img {
    max-height: 50px;
    max-width: 110px;
    flex: 0 1 calc(33.333% - 20px);
  }
}
/* =========================
   FOOTER
========================= */
.arfont {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
}
/* =========================
   FOOTER
========================= */

.site-footer {
  position: relative;
  padding: 80px 0 50px;
  background-color: #333333;
  overflow: hidden;
  direction: rtl;
}

.footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 70px;
}

/* --- Column shared --- */
.footer-col {
  flex: 1;
}

/* --- Col 1: Nav --- */
.footer-col-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-right: 1px solid #b49a6b;
  padding-right: 40px;
}

.footer-logo img {
  width: 60px;
  margin-bottom: 50px;
}

.footer-links {
  display: flex;
  gap: 50px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-column a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 300;
  transition: 0.3s ease;
}

.footer-column a:hover {
  color: #b49a6b;
}

/* --- Col 2: Location --- */
.footer-col-location {
  border-right: 1px solid #b49a6b;
  border-left: 1px solid #b49a6b;
  padding: 0 40px;
}

/* --- Col heading (icon + title) --- */
.footer-col-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.footer-col-heading h4 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.footer-col-icon {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

/* Location info */
.footer-location-info {
  margin-bottom: 28px;
}

.footer-location-info p {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
}

.footer-location-name {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 16px !important;
}

/* Hours */
.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-hours-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-hours-label {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.footer-hours-time {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-family: "IBM Plex Sans", sans-serif;
  direction: rtl;
  text-align: right;
}

/* --- Col 3: Contact --- */
.footer-col-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  direction: rtl;
}

.footer-contact-icon {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  flex-shrink: 0;
}

.footer-contact-label {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  margin: 0 0 2px;
}

.footer-contact-value {
  color: #ffffff;
  font-size: 15px;
  font-family: "IBM Plex Sans", sans-serif;
  margin: 0;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-contact-value:hover {
  opacity: 0.75;
}

/* Social icons */
.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  background-color: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
}

.footer-social a:hover {
  background-color: #b49a6b;
}

.footer-social img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* CTA button */
.footer-cta-btn {
  display: inline-block;
  background-color: #b49a6b;
  color: #ffffff;
  border: none;
  padding: 12px 32px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s ease;
}

.footer-cta-btn:hover {
  background-color: #ffffff;
  color: #333333;
}

/* --- Bottom --- */
.footer-bottom {
  padding-top: 30px;
  text-align: center;
}

.footer-bottom p {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-family: "IBM Plex Sans", sans-serif;
}

.footer-bottom strong { color: #ffffff; }
.footer-bottom span   { color: #ffffff; }
.footer-bottom a      { text-decoration: none; color: inherit; }

.m-icon {
  width: 13px;
  height: 13px;
  vertical-align: middle;
  margin-right: 4px;
}
/* =========================
   TABLET
========================= */

@media (max-width: 991px) {
  .footer-wrapper {
    flex-wrap: wrap;
    gap: 50px;
  }

  .footer-col-location {
    border: none;
    border-top: 1px solid #b49a6b;
    border-bottom: 1px solid #b49a6b;
    padding: 40px 0;
    flex: 1 1 100%;
    order: 2;
  }

  .footer-col-nav  { flex: 1 1 45%; order: 1; }
  .footer-col-contact { flex: 1 1 45%; order: 3; }
}

@media (max-width: 767px) {
  .footer-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .footer-col-nav,
  .footer-col-contact { flex: 1 1 100%; }

  .footer-col-contact { align-items: flex-start; }

  .footer-links { gap: 30px; }

  .footer-bottom p { font-size: 12px; line-height: 1.8; }
}
@media (max-width: 480px) {
  .partners-heading {
    gap: 10px;
    margin-bottom: 35px;
  }

  .partners-heading h2 {
    font-size: 20px;
  }

  .partners-heading span {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .partners-logos {
    gap: 15px;
    row-gap: 25px;
  }

  .partners-logos img {
    max-height: 40px;
    max-width: calc(50% - 15px);
    flex: 0 1 calc(50% - 15px);
  }
}
/* Full-screen map section */
.projects-map-section {
  width: 100vw;
  height: 70vh;
  position: relative;
  overflow: hidden;
}

.projects-map-section .map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.projects-map-section .map-wrapper .map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Almnfthon map image lightbox */
.map-image-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.map-image-popup.active {
  opacity: 1;
  visibility: visible;
}

.map-image-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.map-image-popup-dialog {
  position: relative;
  z-index: 1;
  max-width: min(920px, 94vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 10px;
  overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: scale(0.92) translateY(16px);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}

.map-image-popup.active .map-image-popup-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.map-hotspot-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
  background: #f3efe6;
}

.map-hotspot-wrap > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
}

/* HTML text overlays on map (replace image with textless version later) */
.map-hotspots {
  position: absolute;
  inset: 0;
}

.map-hotspot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  z-index: 2;
}

.map-hotspot-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  line-height: normal;
}

.map-hotspot-labels a {
  color: #1f1f1f;
  text-decoration: none;
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
  font-size: clamp(8px, 1.2vw, 12px);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.map-hotspot-labels a:hover {
  color: #7a6438;
}

.map-hotspot-leader {
  display: block;
  width: 1.5px;
  background: #1f1f1f;
  margin-top: 1px;
  position: relative;
}

.map-hotspot-leader::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(14px, 2.4vw, 20px);
  height: clamp(14px, 2.4vw, 20px);
  border-radius: 0;
  background: url("../images/map-icon@4x.png") center / contain no-repeat;
  /* Sit fully below the stem with a small gap */
  transform: translate(-50%, calc(100% + 3px));
}

/* Positions matched to Almnfthon-Map.jpg dark-label regions */
.map-hotspot--rawabi {
  left: 47%;
  top: 12%;
  z-index: 5;
}

.map-hotspot--rawabi .map-hotspot-leader {
  height: clamp(22px, 4.2vw, 48px);
}

/* Cluster menu: open on text hover, stay open across invisible bridge to dots */
.map-cluster {
  --orbit-size: clamp(120px, 20vw, 150px);
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Invisible bridge — only active while menu is open, so nearby labels stay clickable */
.map-cluster::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-size);
  height: var(--orbit-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.map-hotspot--cluster.is-open .map-cluster::before {
  pointer-events: auto;
}

.map-cluster-trigger {
  position: relative;
  z-index: 3;
  border: none;
  background: transparent;
  color: #1f1f1f;
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
  font-size: clamp(10px, 1.4vw, 13px);
  font-weight: 700;
  line-height: 1;
  padding: 4px 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.map-cluster-trigger:hover,
.map-hotspot--cluster.is-open .map-cluster-trigger {
  background: transparent;
  color: #b49a6b;
}

.map-cluster-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-size);
  height: var(--orbit-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.map-hotspot--cluster.is-open .map-cluster-orbit {
  pointer-events: auto;
}

.map-cluster-item {
  --count: 7;
  --angle: calc(var(--i) * (360deg / var(--count)));
  --radius: clamp(38px, 6.5vw, 58px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(26px, 4vw, 34px);
  height: clamp(26px, 4vw, 34px);
  margin: calc(clamp(26px, 4vw, 34px) / -2) 0 0 calc(clamp(26px, 4vw, 34px) / -2);
  border-radius: 50%;
  background: #333333;
  color: #fff;
  text-decoration: none;
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: rotate(var(--angle)) translateY(0) rotate(calc(-1 * var(--angle))) scale(0.4);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    background 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.map-cluster--count-3 .map-cluster-item {
  --count: 3;
}

.map-cluster--count-1 .map-cluster-item {
  --count: 1;
}

.map-hotspot--azdehar {
  z-index: 4;
}

.map-hotspot--cluster.is-open .map-cluster-item {
  opacity: 1;
  pointer-events: auto;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--radius)))
    rotate(calc(-1 * var(--angle))) scale(1);
}

.map-cluster-item:nth-child(1) { transition-delay: 0.02s; }
.map-cluster-item:nth-child(2) { transition-delay: 0.04s; }
.map-cluster-item:nth-child(3) { transition-delay: 0.06s; }
.map-cluster-item:nth-child(4) { transition-delay: 0.08s; }
.map-cluster-item:nth-child(5) { transition-delay: 0.1s; }
.map-cluster-item:nth-child(6) { transition-delay: 0.12s; }
.map-cluster-item:nth-child(7) { transition-delay: 0.14s; }

.map-cluster-item:hover {
  background: #b49a6b;
  color: #fff;
}

.map-hotspot--azdehar {
  left: 36.5%;
  top: 19%;
}

.map-hotspot--azdehar .map-hotspot-leader {
  height: clamp(22px, 4vw, 42px);
}

.map-hotspot--qasoor {
  left: 54.5%;
  top: 27%;
  z-index: 4;
}

.map-hotspot--qasoor .map-hotspot-leader {
  height: clamp(18px, 3.2vw, 34px);
}

.map-hotspot--dhahran {
  left: 54.5%;
  top: 36.5%;
  z-index: 4;
}

.map-hotspot--dhahran .map-cluster-trigger {
  font-size: clamp(9px, 1.25vw, 12px);
}

.map-hotspot--dhahran .map-hotspot-leader {
  height: clamp(20px, 3.6vw, 40px);
}

.map-hotspot--shabili {
  left: 81%;
  top: 81.5%;
}

.map-hotspot--shabili .map-hotspot-leader {
  height: clamp(16px, 2.8vw, 30px);
}

@media (max-width: 640px) {
  .map-hotspot-labels a {
    font-size: 7px;
  }

  .map-hotspot--rawabi .map-hotspot-leader {
    height: 28px;
  }

  .map-hotspot--azdehar .map-hotspot-leader,
  .map-hotspot--qasoor .map-hotspot-leader {
    height: 22px;
  }

  .map-hotspot--dhahran .map-hotspot-leader {
    height: 24px;
  }

  .map-hotspot--shabili .map-hotspot-leader {
    height: 18px;
  }
}

.map-image-popup-close {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #1f1f1f;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease;
}

.map-image-popup-close:hover {
  background: transparent;
  color: #b49a6b;
}

body.map-popup-open {
  overflow: hidden;
}

/* Legacy map side-panel styles (unused) */
.popup-projects-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.popup-project-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  margin-bottom: 10px;
}

.popup-project-item h4 {
  font-size: 18px;
  margin-bottom: 5px;
}

.popup-project-item p {
  font-size: 14px;
  margin-bottom: 8px;
}

.popup-btn {
  display: inline-block;
  padding: 6px 12px;
  background: #b49a6b;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: 0.3s ease;
}

.popup-btn:hover {
  background: #333333;
}
/* Map area numbers use IBM Plex Sans for clarity */
.map-area {
  position: absolute;
  z-index: 4;
  background: rgba(6, 4, 0, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 50%;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background 0.3s ease;

  font-family: "IBM Plex Sans", sans-serif;
  font-size: 18px;
}

.map-area--popup {
  z-index: 8;
}

/* Project pins on main Saudi map — all inside Eastern Province dashed zone */
.main-map-hotspots {
  position: absolute;
  top: 50%;
  left: 57%;
  width: min(200px, 18vw);
  height: min(200px, 28vh);
  z-index: 6;
  pointer-events: none;
}

.main-map-hotspots .map-hotspots {
  position: absolute;
  inset: 0;
}

.main-map-hotspots .map-hotspot {
  pointer-events: auto;
  z-index: 2;
}

.main-map-hotspots .map-cluster {
  --orbit-size: clamp(88px, 14vw, 120px);
}

.main-map-hotspots .map-cluster-trigger {
  font-size: clamp(9px, 1.15vw, 12px);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.main-map-hotspots .map-cluster-trigger:hover,
.main-map-hotspots .map-hotspot--cluster.is-open .map-cluster-trigger {
  color: #b49a6b;
}

.main-map-hotspots .map-hotspot-leader {
  width: 1px;
  background: #ffffff;
}

.main-map-hotspots .map-cluster-item {
  --radius: clamp(28px, 4.5vw, 42px);
  width: clamp(22px, 3.2vw, 28px);
  height: clamp(22px, 3.2vw, 28px);
  margin: calc(clamp(22px, 3.2vw, 28px) / -2) 0 0 calc(clamp(22px, 3.2vw, 28px) / -2);
  font-size: clamp(9px, 1.1vw, 11px);
}

.main-map-hotspots .map-hotspot-leader::after {
  width: clamp(11px, 1.8vw, 16px);
  height: clamp(11px, 1.8vw, 16px);
}

/* Spread around المنطقة الشرقية / 3 — still inside dashed boundary */
.main-map-hotspots .map-hotspot--azdehar {
  left: 8%;
  top: -22%;
}

.main-map-hotspots .map-hotspot--azdehar .map-hotspot-leader {
  height: clamp(10px, 1.5vw, 16px);
}

.main-map-hotspots .map-hotspot--rawabi {
  left: -18%;
  top: -56%;
}

.main-map-hotspots .map-hotspot--rawabi .map-hotspot-leader {
  height: clamp(10px, 1.5vw, 16px);
}

.main-map-hotspots .map-hotspot--qasoor {
  left: -2%;
  top: 14%;
}

.main-map-hotspots .map-hotspot--qasoor .map-hotspot-leader {
  height: clamp(10px, 1.5vw, 16px);
}

.main-map-hotspots .map-hotspot--dhahran {
  left: 122%;
  top: 42%;
}

.main-map-hotspots .map-hotspot--dhahran .map-cluster-trigger {
  font-size: clamp(7px, 0.85vw, 9px);
}

.main-map-hotspots .map-hotspot--dhahran .map-hotspot-leader {
  height: clamp(10px, 1.5vw, 16px);
}

.main-map-hotspots .map-hotspot--shabili {
  left: 22%;
  top: 72%;
}

.main-map-hotspots .map-hotspot--shabili .map-hotspot-leader {
  height: clamp(8px, 1.3vw, 14px);
}

@media (max-width: 767px) {
  .main-map-hotspots {
    top: 54%;
    left: 68%;
    width: min(140px, 36vw);
    height: min(150px, 24vh);
  }

  .main-map-hotspots .map-cluster-trigger {
    font-size: 7px;
  }

  .main-map-hotspots .map-hotspot--dhahran .map-cluster-trigger {
    font-size: 6px;
  }

  .main-map-hotspots .map-hotspot--qasoor {
    left: 18%;
  }

  .main-map-hotspots .map-hotspot--dhahran {
    left: 102%;
  }

  .main-map-hotspots .map-hotspot--shabili {
    top: 52%;
  }
}

.map-area:hover {
  transform: scale(1.3);
  background: rgba(180, 154, 107, 1);
}

.map-area--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

.map-area--disabled:hover {
  transform: none;
  background: rgba(6, 4, 0, 0.85);
}

.map-area--popup:hover {
  transform: scale(1.35);
  background: rgba(180, 154, 107, 1);
}

.map-area p.map-label {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none; /* so it doesn’t block clicks */
}
/* Desktop */
/* NORTH */
.map-area[data-area="north"] {
  top: 39%; /* adjust to fit mobile screen */
  left: 39%;
}

/* CENTRAL */
.map-area[data-area="central"] {
  top: 58%;
  left: 49%;
}

/* EAST */
.map-area[data-area="east"] {
  top: 60%;
  left: 60%;
}

/* WEST */
.map-area[data-area="west"] {
  top: 60%;
  left: 42%;
}

/* SOUTH */
.map-area[data-area="south"] {
  top: 76%;
  left: 50%;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  /* NORTH */
  .map-area[data-area="north"] {
    top: 41%; /* adjust to fit mobile screen */
    left: 20%;
  }

  /* CENTRAL */
  .map-area[data-area="central"] {
    top: 55%;
    left: 50%;
  }

  /* EAST */
  .map-area[data-area="east"] {
    top: 60%;
    left: 78%;
  }

  /* WEST */
  .map-area[data-area="west"] {
    top: 55%;
    left: 20%;
  }

  /* SOUTH */
  .map-area[data-area="south"] {
    top: 67%;
    left: 50%;
  }

  /* Optional: adjust number circle size */
  .map-area {
    width: 30px;
    height: 30px;
    line-height: 14px;
    font-size: 12px;
  }

  /* Optional: adjust label font size */
  .map-area p.map-label {
    font-size: 10px;
    top: -28px; /* distance above the circle */
    white-space: normal; /* allow wrapping if text is long */
  }
}

/* =========================
   ABOUT PAGE - HERO SECTION
========================= */
.about-hero-section {
  position: relative;
  min-height: 60vh;
  padding: 160px 0 100px;
  background-color: #0a0a0a;
  background-image: url("../images/about-hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.about-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  transform: none;
}

.about-hero-year {
  width: min(100%, 260px);
  max-width: 260px;
  height: auto;
  display: block;
  image-rendering: auto;
}

.about-hero-title {
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  max-width: 900px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.about-hero-text {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 22px;
  line-height: 1.9;
  color: #ffffff;
  margin: 0;
  max-width: 980px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* =========================
   ABOUT PAGE - JOURNEY SLIDER
========================= */
.about-journey-section {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.about-journey-stage {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
}

.about-journey-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-journey-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.about-journey-bg-slide.active {
  opacity: 1;
}

.about-journey-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.about-journey-layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  min-height: 50vh;
  padding: 40px 0;
  direction: ltr;
  box-sizing: border-box;
}

.about-journey-nav {
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
  padding: 0;
}

.about-journey-nav:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

.about-journey-nav[hidden] {
  display: none;
}

.about-journey-content {
  flex: 1;
  width: 100%;
  max-width: 820px;
  direction: rtl;
}

.about-journey-text-wrap {
  position: relative;
  padding: 0;
  direction: rtl;
}

.about-journey-slide-content {
  display: none;
  direction: rtl;
  text-align: right;
}

.about-journey-slide-content.active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  animation: aboutJourneyFade 0.8s ease;
}

.about-journey-slide-content--center.active {
  align-items: center;
  text-align: center;
}

.about-journey-slide-content--center .about-journey-year-row {
  justify-content: center;
}

.about-journey-slide-content--center .about-journey-desc {
  text-align: center;
}

.about-journey-slide-content--center .about-journey-badge-wrap {
  justify-content: center;
}

.about-journey-slide-content--center .about-journey-range-label {
  text-align: center;
}

.about-journey-section[data-theme="light"] .about-journey-overlay {
  opacity: 0;
}

.about-journey-section[data-theme="light"] .about-journey-year,
.about-journey-section[data-theme="light"] .about-journey-label,
.about-journey-section[data-theme="light"] .about-journey-desc,
.about-journey-section[data-theme="light"] .about-journey-range-sep,
.about-journey-section[data-theme="light"] .about-journey-range-label,
.about-journey-section[data-theme="light"] .about-journey-nav {
  color: #333333;
}

.about-journey-section[data-theme="light"] .about-journey-desc {
  color: #333333;
}

@keyframes aboutJourneyFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-journey-year-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  width: 100%;
  margin-bottom: 28px;
  direction: rtl;
}

.about-journey-label {
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  text-align: right;
}

.about-journey-year {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  flex-shrink: 0;
}

.about-journey-desc {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 36px;
  text-align: right;
  width: 100%;
}

.about-journey-badge-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  direction: rtl;
}

.about-journey-year-row--range {
  flex-wrap: nowrap;
  gap: 12px 24px;
  align-items: center;
}

.about-journey-range-sep {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 22px;
  color: #ffffff;
  line-height: 1;
  align-self: center;
}

.about-journey-range-label {
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  text-align: right;
  align-self: center;
}

.about-journey-badge-wrap--multi {
  gap: 16px;
  justify-content: center;
}

.about-journey-badge-wrap--multi.about-journey-badge-wrap--dark .about-journey-badge {
  background-color: #333333;
}

.about-journey-badge-wrap--glass .about-journey-badge {
  background-color: rgba(184, 151, 104, 0.55);
}

.about-journey-year-row--today {
  justify-content: center;
  align-items: center;
  gap: 16px 28px;
}

.about-journey-today-word {
  font-family: "IBM Plex Digits", "GE SS Unique Bold", sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.about-journey-badge-wrap--quad {
  flex-wrap: wrap;
  gap: 12px;
}

.about-journey-badge {
  display: inline-block;
  background-color: #b89768;
  color: #ffffff;
  padding: 12px 32px;
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 16px;
}

.about-journey-thumbs {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 36px 0 48px;
  direction: ltr;
  background: transparent;
}

.about-journey-thumbs-track {
  display: flex;
  width: max-content;
  animation: aboutJourneyThumbsScroll var(--about-journey-marquee-duration, 50s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.about-journey-thumbs:hover .about-journey-thumbs-track {
  animation-play-state: paused;
}

@keyframes aboutJourneyThumbsScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--about-journey-marquee-distance, 50%)), 0, 0);
  }
}

.about-journey-thumbs-group {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
}

.about-journey-thumb {
  width: 280px;
  height: 180px;
  background-color: transparent;
  flex-shrink: 0;
  overflow: hidden;
  margin-right: 28px;
}

.about-journey-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.video-play-btn:hover {
  background-color: #ffffff;
  transform: translate(-50%, -50%) scale(1.08);
}

.video-play-btn span {
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 22px solid #333333;
  margin-right: -4px;
}

@media (max-width: 767px) {
  .video-play-btn {
    width: 70px;
    height: 70px;
  }

  .video-play-btn span {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 14px solid #333333;
  }
}

/* =========================
   ABOUT PAGE - STATS / ROOTS SECTION
========================= */
.about-stats-section {
  position: relative;
  padding: 110px 0;
  background-image: url("../images/about-stats-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.about-stats-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(20, 40, 30, 0.92) 0%,
    rgba(33, 58, 45, 0.75) 45%,
    rgba(70, 90, 70, 0.35) 100%
  );
  z-index: 1;
}

.about-stats-section .container {
  position: relative;
  z-index: 2;
}

.stats-heading {
  text-align: center;
  margin-bottom: 90px;
}

.stats-heading h2 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 36px;
  font-weight: 300;
  color: #ffffff;
  line-height: 1.5;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  direction: rtl;
}

.stat-item {
  text-align: center;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.stat-item:last-child {
  border-left: none;
}

.stat-item h3 {
  direction: ltr;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 15px;
}

.stat-plus {
  color: #b49a6b;
}

.stat-item p {
  font-size: 18px;
  color: #e6e6e6;
}

@media (max-width: 991px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 50px;
  }

  .stat-item {
    border-left: none;
  }

  .about-hero-section {
    min-height: 70vh;
    padding: 180px 0 110px;
  }

  .about-hero-year {
    width: min(100%, 240px);
  }

  .about-hero-title {
    font-size: 30px;
  }

  .about-hero-text {
    font-size: 18px;
    line-height: 1.85;
  }

  .about-journey-layout {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    min-height: 50vh;
    padding: 40px 0;
  }

  .about-journey-content {
    order: 1;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-journey-nav {
    order: 2;
  }

  .about-journey-year {
    font-size: 56px;
  }

  .about-journey-label {
    font-size: 18px;
  }

  .about-journey-thumb {
    width: 220px;
    height: 150px;
  }
}

@media (max-width: 767px) {
  .about-hero-section {
    min-height: 65vh;
    padding: 150px 0 90px;
  }

  .about-hero-content {
    gap: 20px;
  }

  .about-hero-year {
    width: min(100%, 200px);
  }

  .about-hero-title {
    font-size: 24px;
  }

  .about-hero-text {
    font-size: 16px;
    line-height: 1.8;
  }

  .about-journey-stage {
    min-height: 50vh;
  }

  .about-journey-layout {
    min-height: 50vh;
    padding: 24px 20px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .about-journey-year-row {
    gap: 16px;
    margin-bottom: 20px;
  }

  .about-journey-year {
    font-size: 44px;
  }

  .about-journey-label {
    font-size: 16px;
  }

  .about-journey-range-sep {
    font-size: 16px;
  }

  .about-journey-range-label {
    font-size: 16px;
  }

  .about-journey-year-row--range {
    flex-wrap: wrap;
    justify-content: center;
  }

  .about-journey-today-word {
    font-size: 40px;
  }

  .about-journey-badge-wrap--quad {
    gap: 10px;
  }

  .about-journey-desc {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 20px;
  }

  .about-journey-badge {
    font-size: 14px;
    padding: 8px 18px;
  }

  .about-journey-thumb {
    width: 180px;
    height: 120px;
  }

  .about-journey-thumbs {
    padding: 24px 0 32px;
  }

  .stats-heading {
    margin-bottom: 50px;
  }

  .stats-heading h2 {
    font-size: 22px;
    line-height: 1.5;
  }

  .stats-grid {
    row-gap: 36px;
  }

  .stat-item:last-child {
    grid-column: 1 / -1;
  }

  .stat-item h3 {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .stat-item p {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* =========================
   ABOUT PAGE - VISION & MISSION
========================= */
.vision-mission-section {
  position: relative;
  padding: 130px 0;
  background-image: url("../images/about-vision-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.vision-mission-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(60, 30, 25, 0.55) 0%,
    rgba(60, 30, 25, 0.25) 100%
  );
  z-index: 1;
}

.vision-mission-section .container {
  position: relative;
  z-index: 2;
}

.vision-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
  direction: rtl;
}

.vm-box h3 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 30px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 25px;
}

.vm-box p {
  font-size: 18px;
  line-height: 2;
  color: #f1f1f1;
}

.vm-box p strong {
  display: block;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}

/* =========================
   ABOUT PAGE - OUR VALUES HEADING
========================= */
.our-values-heading-section {
  background-color: #ffffff;
  padding: 110px 0 70px;
  text-align: center;
}

.our-values-heading-section h2 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 38px;
  font-weight: 300;
  color: #333333;
  letter-spacing: 4px;
}

/* =========================
   ABOUT PAGE - OUR VALUES GRID
========================= */
.our-values-section {
  background-color: #ffffff;
  padding: 0 0 0;
}

.our-values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
}

.ov-card {
  height: 360px;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #ffffff;
}

.ov-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(51, 51, 51, 0.3);
  transition: 0.4s ease;
}

.ov-card img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}

.ov-card h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.ov-card p {
  font-size: 18px;
  position: relative;
  z-index: 2;
}

.ov-card:hover::before {
  background-color: rgba(180, 154, 107, 0.55);
}

.ov-card:hover {
  transform: translateY(-8px);
  transition: 0.4s ease;
}

.ov-info {
  height: 220px;
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 25px;
}

.ov-info h4 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 12px;
}

.ov-info p {
  font-size: 15px;
  color: #777777;
  line-height: 1.8;
}

.ov-info.ov-info-light h4 {
  color: #ffffff;
}

.ov-info.ov-info-light p {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 991px) {
  .vision-mission-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .our-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ov-info {
    order: 1;
  }
}

@media (max-width: 767px) {
  .our-values-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   COMPETENCIES PAGE - HERO SECTION
========================= */
.comp-hero-section {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
}

.comp-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(20, 15, 10, 0.75) 0%,
    rgba(20, 15, 10, 0.15) 45%,
    rgba(20, 15, 10, 0) 75%
  );
  z-index: 1;
}

.comp-hero-text {
  position: absolute;
  bottom: 60px;
  right: 60px;
  left: 60px;
  z-index: 2;
}

.comp-hero-text p {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.7;
  color: #ffffff;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* =========================
   COMPETENCIES PAGE - OUR TEAM SECTION
========================= */
.comp-team-section {
  background-color: #ffffff;
  padding: 120px 0;
  text-align: center;
}

.comp-team-heading {
  margin-bottom: 45px;
}

.comp-team-heading h2 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 42px;
  font-weight: 300;
  color: #333333;
  margin-bottom: 8px;
}

.comp-team-heading h3 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 30px;
  font-weight: 300;
  color: #b49a6b;
}

.comp-team-text {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  line-height: 2.1;
  color: #555555;
}

/* =========================
   COMPETENCIES PAGE - CHAIRMAN MESSAGE
========================= */
.ceo-message-section {
  position: relative;
  padding: 110px 0 70px;
  background-image: url("../images/ceo-section-bg.jpg");
  background-size: cover;
  background-position: center;
  overflow: visible;
}

.ceo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.ceo-message-section .container {
  position: relative;
  z-index: 2;
}

.ceo-grid {
  display: flex;
  align-items: flex-end;
}

/* Photo and text each take half the section's width */
.ceo-photo {
  position: relative;
  bottom: -70px; /* cancels the section's bottom padding so it reaches the section edge */
  width: 50%;
  z-index: 3;
  overflow: hidden;
}

.ceo-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

.ceo-content {
  width: 50%;
  padding-bottom: 30px;
}

.ceo-heading {
  margin-bottom: 30px;
}

.ceo-heading h3 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 30px;
  font-weight: 300;
  color: #333333;
  line-height: 1.4;
}

.ceo-content p {
  font-size: 17px;
  line-height: 2;
  color: #4a4a4a;
  margin-bottom: 20px;
}

.ceo-signature {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ceo-signature strong {
  font-size: 18px;
  color: #333333;
}

.ceo-signature span {
  font-size: 15px;
  color: #6b6b6b;
}

/* =========================
   COMPETENCIES PAGE - RESPONSIVE
========================= */
@media (max-width: 991px) {
  .comp-hero-section {
    height: 520px;
  }

  .comp-hero-text {
    right: 40px;
    left: 40px;
    bottom: 40px;
  }

  .comp-hero-text p {
    font-size: 22px;
    max-width: 100%;
  }

  .comp-team-section {
    padding: 90px 0;
  }

  .comp-team-heading h2 {
    font-size: 34px;
  }

  .comp-team-heading h3 {
    font-size: 24px;
  }

  .comp-team-text {
    font-size: 18px;
    line-height: 1.9;
  }

  .ceo-message-section {
    padding: 60px 0 60px;
  }

  .ceo-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Photo stays fully inside the section on tablet/mobile - no overflow,
     shown after the text, full width and centered */
  .ceo-photo {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto -60px;
    overflow: visible;
  }

  .ceo-photo img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .ceo-content {
    width: 100%;
  }

  .ceo-signature {
    align-items: center;
  }
}

@media (max-width: 767px) {
  .comp-hero-section {
    height: 420px;
  }

  .comp-hero-text p {
    font-size: 18px;
    line-height: 1.6;
  }

  .comp-team-heading h2 {
    font-size: 28px;
  }

  .comp-team-heading h3 {
    font-size: 20px;
  }

  .comp-team-text {
    font-size: 16px;
    line-height: 1.8;
  }

  .ceo-heading h3 {
    font-size: 24px;
  }

  .ceo-content p {
    font-size: 15px;
    line-height: 1.9;
  }

}

@media (max-width: 480px) {
  .comp-hero-section {
    height: 360px;
  }

  .comp-hero-text {
    right: 25px;
    left: 25px;
    bottom: 25px;
  }

  .comp-hero-text p {
    font-size: 16px;
  }

  .comp-team-heading h2 {
    font-size: 24px;
  }

}

/* =========================
   COMMUNITIES PAGE - INTRO SECTION
========================= */
.communities-intro-section {
  background-color: #ffffff;
  /* Extra top padding so the content clears the fixed site header
     instead of sitting underneath it (this section has no tall
     hero image above it like the other pages do). */
  padding: 190px 0 70px;
  text-align: center;
}

.communities-intro-section h2 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #5b6650;
  margin-bottom: 25px;
}

.communities-intro-section p {
  max-width: 950px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 2;
  color: #5b6650;
}

/* =========================
   COMMUNITIES PAGE - CITY TIMELINE SECTION
========================= */
.city-timeline-section {
  position: relative;
  background-color: #5b6650;
  padding: 80px 0 110px;
  overflow: hidden;
}

.city-name {
  text-align: center;
  padding: 0;
  margin: 0 0 40px 0;
  overflow: visible;
}

.city-name h2 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 42px;
  font-weight: 300;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 767px) {
  .city-name h2 {
    margin-top: 30px;
  }
}

.timeline {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
  /* Force a fixed left->right column order regardless of the page's RTL
     direction, so side-left/side-right always land on the physical side
     their name implies (RTL grid placement was flipping them before). */
  direction: ltr;
}

/* Rounded vertical bracket linking each row's LEFT-column heading down to
   the next row's LEFT-column heading — the curved connector you sketched
   (e.g. "1996-2002" flowing down into "2004"). Drawn as a left-side
   rounded "[" bracket using borders, sized to always land exactly on the
   next row's heading regardless of how tall the content is. */
/* Rows 1 & 3: rounded bracket on the LEFT side (e.g. "1996-2002" -> "2004",
   "2016-2019" -> "2020-2024"). Rows 2 & 4: same bracket mirrored on the
   RIGHT side (e.g. "1995" -> "2006", "2008-2015" -> "2024-2024"). */
.timeline-row:nth-child(1)::after,
.timeline-row:nth-child(2)::after,
.timeline-row:nth-child(3)::after,
.timeline-row:nth-child(4)::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 46px;
  height: calc(100% + 80px);
  border: 2px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.timeline-row:nth-child(1)::after,
.timeline-row:nth-child(3)::after {
  left: -110px;
  border-right: none;
  border-radius: 32px 0 0 32px;
}

.timeline-row:nth-child(2)::after,
.timeline-row:nth-child(4)::after {
  right: -110px;
  border-left: none;
  border-radius: 0 26px 26px 0;
}

/* Straight connecting line between the two items of each row, sitting in
   the central gap (60px) with an exact 20px clearance from each item's
   facing edge — i.e. a 20px line centered in the gap. Aligned vertically
   with the year heading. */
.timeline-row::before {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% - 150px);
  width: 300px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.55);
}

.timeline-row.single::before {
  display: none;
}

/* Hide the straight horizontal center line and bracket connectors for الدمام section */
.city-timeline-section .timeline-slider .timeline-row::before,
.city-timeline-section .timeline-slider .timeline-row::after {
  display: none !important;
  content: none !important;
}

/* Chevron arrow in the center gap — replaces the straight line */
.city-timeline-section .timeline-slider .timeline-row {
  overflow: visible;
}

.city-timeline-section .timeline-slider .timeline-row .timeline-chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 155px;
  height: 155px;
  pointer-events: none;
  display: block;
  z-index: 1;
  object-fit: contain;
}

.timeline-row.single {
  grid-template-columns: 1fr 1fr;
}

.timeline-row.single .timeline-item {
  max-width: 420px;
}

/* Three-column row — plain side-by-side cards, no connecting lines/brackets,
   each centered in its own column (matches the "إيوان / الشبيلي / اليرموك"
   reference layout). */
.timeline-row.triple {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.timeline-row.triple::before,
.timeline-row.triple::after {
  display: none;
}

.timeline-row.triple .timeline-item {
  grid-column: auto;
  justify-self: stretch;
  text-align: center;
}

.timeline-row.triple .timeline-year,
.timeline-row.triple .timeline-item h4,
.timeline-row.triple .timeline-item p {
  text-align: center;
  width: auto;
}

.timeline-item {
  position: relative;
  direction: rtl;
  text-align: right;
  color: #ffffff;
}

/* Note: physical placement is intentionally swapped relative to the class
   name — "side-right" content renders on the physical LEFT and "side-left"
   on the physical RIGHT — to match the reference design's column layout
   (e.g. "1996-2002" sits on the left, "1995" on the right). */
/* justify-self: stretch (the default) makes every item fill its full grid
   column — combined with text-align: right, this guarantees all headings
   within the same column line up on the exact same right edge, regardless
   of how short/long the year text is (fixes "2004" sitting out of line
   with "1996-2002" / "2016-2019" / "2020-2024"). */
.timeline-item.side-left {
  grid-column: 2;
  justify-self: stretch;
  text-align: right;
}

.timeline-item.side-right {
  grid-column: 1;
  justify-self: start;
  text-align: right;
}

.timeline-item.side-left .timeline-year,
.timeline-item.side-right .timeline-year {
  position: relative;
}

.timeline-year {
  /* Give every year heading the same fixed box width and right-align the
     text inside it — this is what truly locks "1996-2002", "2004",
     "2016-2019", "2020-2024" (and the matching right-side years) onto one
     shared edge, regardless of how short or long the year text is. Relying
     on the surrounding item's box alone wasn't enough because that box
     shrinks to fit its own (varying-length) text. */
  display: block;
  width: 230px;
  max-width: 100%;
  text-align: right;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.timeline-year .ar {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
}

.timeline-item h4 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.timeline-item p {
  font-size: 13px;
  line-height: 1.8;
  color: #d8dcd2;
  margin-top: 8px;
}

.timeline-block {
  margin-bottom: 18px;
}

.timeline-block:last-child {
  margin-bottom: 0;
}

/* Marker hidden — the reference design has no center spine/dot, just
   evenly spaced, centered text blocks in two columns. */
.timeline-marker {
  display: none;
}

/* =========================
   CITY TIMELINE SECTION — LIGHT VARIANT
   White background + green text, reusing the exact same layout/
   structure as the original (dark) timeline section.
========================= */
.city-timeline-section.light {
  background-color: #ffffff;
}

.city-timeline-section.light .city-name h2 {
  color: #5b6650;
}

.city-timeline-section.light .timeline-item {
  color: #5b6650;
}

/* The bracket connector normally links a row's heading down to the next
   row's heading — on this section's last row (the "2025" row) there is no
   following row to connect to, so the dangling curve is removed. */
.city-timeline-section.light .timeline-row:last-child::after {
  display: none;
}

.city-timeline-section.light .timeline-year,
.city-timeline-section.light .timeline-item h4 {
  color: #5b6650;
}

.city-timeline-section.light .timeline-item p {
  color: #6e7a64;
}

.city-timeline-section.light .timeline-row::before {
  background-color: rgba(91, 102, 80, 0.45);
}

.city-timeline-section.light .timeline-row:nth-child(1)::after,
.city-timeline-section.light .timeline-row:nth-child(2)::after,
.city-timeline-section.light .timeline-row:nth-child(3)::after,
.city-timeline-section.light .timeline-row:nth-child(4)::after {
  border-color: rgba(91, 102, 80, 0.35);
}

/* =========================
   CITY TIMELINE SECTION — BROWN VARIANT
   Background #7D4937 + white text, reusing the exact same layout/
   structure as the original timeline section.
========================= */
.city-timeline-section.brown {
  background-color: #7d4937;
}

.city-timeline-section.brown .city-name h2 {
  color: #ffffff;
}

.city-timeline-section.brown .timeline-item {
  color: #ffffff;
}

.city-timeline-section.brown .timeline-year,
.city-timeline-section.brown .timeline-item h4 {
  color: #ffffff;
}

.city-timeline-section.brown .timeline-item p {
  color: #f0e2dc;
}

.city-timeline-section.brown .timeline-row::before {
  background-color: rgba(255, 255, 255, 0.55);
}

.city-timeline-section.brown .timeline-row:nth-child(1)::after,
.city-timeline-section.brown .timeline-row:nth-child(2)::after,
.city-timeline-section.brown .timeline-row:nth-child(3)::after,
.city-timeline-section.brown .timeline-row:nth-child(4)::after {
  border-color: rgba(255, 255, 255, 0.45);
}

/* =========================
   COMMUNITIES PAGE - RESPONSIVE
========================= */
@media (max-width: 991px) {
  .communities-intro-section {
    /* Keep clearance below the fixed header on tablet/mobile too */
    padding: 130px 0 55px;
  }

  .communities-intro-section h2 {
    font-size: 22px;
  }

  .communities-intro-section p {
    font-size: 15px;
    line-height: 1.9;
  }

  .city-name h2 {
    font-size: 42px;
  }

  .timeline-row {
    gap: 30px;
  }
}

@media (max-width: 991px) {
  /* The row-connecting line and curved brackets only make sense in the
     2-column desktop layout — hide them once it collapses to a single
     column on mobile/tablet. */
  .timeline-row::before,
  .timeline-row::after {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .city-name {
    text-align: center;
    margin: 0 0 20px;
  }

  .city-name h2 {
    font-size: 36px;
    margin-right: 0;
    padding-right: 0;
    white-space: normal;
  }

  .timeline-row,
  .timeline-row.single,
  .timeline-row.triple {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 50px;
  }

  .timeline-row.triple {
    flex-direction: column;
    gap: 30px;
  }

  .timeline-row.triple .timeline-item,
  .timeline-row.triple .timeline-year,
  .timeline-row.triple .timeline-item h4,
  .timeline-row.triple .timeline-item p {
    text-align: center;
  }

  .timeline-item,
  .timeline-row.single .timeline-item {
    max-width: 100%;
    text-align: center;
    justify-self: stretch;
    margin-bottom: 40px;
  }

  /* With column-reverse, the visually-last (bottom) item is the
     DOM-first item — so remove its bottom margin instead of the
     DOM-last item's. */
  .timeline-item:first-child {
    margin-bottom: 0;
  }

  /* Row 2 ("2004" / "2006") should keep its NATURAL order — "2004"
     (already first in the HTML) on top, then "2006" below — unlike
     Row 1, which is reversed. So switch this row back to normal
     column direction and flip the margin rule to match. */
  .timeline-row:nth-child(2) {
    flex-direction: column;
  }

  .timeline-row:nth-child(2) .timeline-item:first-child {
    margin-bottom: 40px;
  }

  .timeline-row:nth-child(2) .timeline-item:last-child {
    margin-bottom: 0;
  }

  .timeline-item.side-left,
  .timeline-item.side-right {
    text-align: center;
  }

  /* On mobile every item stacks full-width and centered (matching the
     reference brown "triple" layout), so the year heading no longer
     needs a fixed right-aligned box — just center it like the rest. */
  .timeline-year {
    display: block;
    width: 100%;
    text-align: center;
  }

  .timeline-year {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .city-name h2 {
    font-size: 30px;
  }

  .communities-intro-section h2 {
    font-size: 19px;
  }

  .timeline-item h4 {
    font-size: 15px;
  }

  .timeline-item p {
    font-size: 13px;
  }
}

/* =========================
   COMMUNITIES PAGE - BANNER SECTION
   Full-width image with a warm brown gradient overlay and right-aligned
   text, sitting between the "الخبر" timeline and the project status list.
========================= */
.communities-banner-section {
  position: relative;
  width: 100%;
  min-height: 800px;
  background-image: url("../images/communities-banner-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  /* RTL: flex-start lands on the visual RIGHT side, where the darker
     part of the overlay gradient sits — flex-end would push the text to
     the left edge, over the brightest part of the photo, where white
     text disappears. */
  justify-content: flex-start;
  overflow: hidden;
}

.communities-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(125, 73, 55, 0.55) 0%,
    rgba(125, 73, 55, 0.15) 45%,
    rgba(125, 73, 55, 0) 75%
  );
  z-index: 1;
}

.communities-banner-content {
  position: relative;
  z-index: 2;
  text-align: right;
  padding: 0 100px 0 160px;
}

.communities-banner-content h2 {
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.communities-banner-content h2:first-child {
  font-weight: 400;
}

@media (max-width: 767px) {
  .communities-banner-section {
    min-height: 480px;
    justify-content: center;
  }

  .communities-banner-content {
    text-align: center;
    padding: 0 24px;
  }

  .communities-banner-content h2 {
    font-size: 26px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .communities-banner-content {
    padding: 0 60px 0 100px;
  }

  .communities-banner-content h2 {
    font-size: 34px;
  }
}

/* =========================
   COMMUNITIES PAGE - PROJECT STATUS SECTION
========================= */
.project-status-section {
  background-color: #ececec;
  padding: 90px 0 110px;
}

.status-group-mahroon {
  background: linear-gradient(to top, transparent 0%, rgba(180, 154, 107, 0.25) 60%, rgba(180, 154, 107, 0.45) 100%);
  padding: 50px 40px;
  margin-bottom: 90px;
}

.status-group {
  margin-bottom: 90px;
}

.status-group:last-child {
  margin-bottom: 0;
}

.status-title {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #7d4937;
  text-align: right;
  margin-bottom: 35px;
}

.status-group-mahroon .status-title {
  color: #3a1a0e;
}

.status-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  direction: rtl;
}

.status-group-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  direction: rtl;
}

.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-right: 20px;

  display: flex;
  flex-direction: column;
  gap: 18px;

  direction: rtl;
  text-align: right;

  border-right: 1px solid #b49a6b;
}

.status-list li {
  position: relative;
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
}

.status-group-mahroon .status-list li {
  color: #3a1a0e;
}

.status-list li a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease;
}

.status-list li a:hover,
.status-list li a:active,
.status-list li a.active {
  font-weight: 700;
  color: #b49a6b;
}

/* =========================
   PROJECT STATUS SECTION - RESPONSIVE
========================= */
@media (max-width: 991px) {
  .project-status-section {
    padding: 70px 0 80px;
  }

  .status-group {
    margin-bottom: 65px;
  }

  .status-columns {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 35px;
  }

  .status-group-split {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .status-title {
    font-size: 26px;
    margin-bottom: 28px;
  }
}

@media (max-width: 767px) {
  .project-status-section {
    padding: 55px 0 65px;
  }

  .status-group {
    margin-bottom: 50px;
  }

  .status-columns {
    grid-template-columns: 1fr;
    row-gap: 44px;
    gap: 0;
  }

  .status-title {
    font-size: 22px;
    margin-bottom: 22px;
  }

  .status-title {
    text-align: center;
  }

  .status-list {
    text-align: center;
    padding-right: 0;
    border-right: none;
  }

  .status-list li {
    font-size: 14px;
    padding-right: 0;
  }

  .status-item-spaced {
    margin-top: 15px;
  }
}

@media (max-width: 480px) {
  .status-title {
    font-size: 20px;
  }

  .status-list li {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* =========================
   PROJECT PAGE (e.g. tharwa17.html) — HERO BANNER
   Full-width project image with a play button, a bottom-right info block
   (type/location) and a large project title on the right edge.
========================= */
.project-hero-section {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
}

.project-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 35%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 1;
}

.project-hero-section .video-play-btn {
  z-index: 2;
}

.project-hero-info {
  position: absolute;
  z-index: 2;
  bottom: 36px;
  left: 50px;
  text-align: right;
}

.project-hero-info p {
  color: #ffffff;
  font-size: 24px;
  line-height: 1.6;
  margin: 0;
}

.project-hero-title {
  position: absolute;
  z-index: 2;
  bottom: 30px;
  right: 50px;
  color: #ffffff;
  font-size: 56px;
  font-weight: 700;
  margin: 0;
}

/* =========================
   PROJECT PAGE — INTRO SECTION
   Heading + description + two action buttons, mirroring the about page's
   intro layout and typography.
========================= */
.project-intro-section {
  background-color: #ffffff;
  padding: 100px 0;
  text-align: center;
}

.project-intro-heading h2 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 32px;
  font-weight: 300;
  color: #b49a6b;
  line-height: 1.5;
  margin: 0;
}

.project-intro-text {
  max-width: 900px;
  margin: 30px auto 40px;
  text-align: center;
  font-size: 20px;
  line-height: 2.1;
  color: #555555;
}

.project-intro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.project-btn-filled,
.project-btn-outline {
  display: inline-block;
  text-decoration: none;
  padding: 16px 40px;
  font-size: 15px;
  transition: 0.3s ease;
}

.project-btn-filled {
  background-color: #5b6650;
  color: #ffffff;
}

.project-btn-filled:hover {
  background-color: #333333;
}

.project-btn-outline {
  background-color: transparent;
  color: #333333;
  border: 1px solid #333333;
}

.project-btn-outline:hover {
  background-color: #333333;
  color: #ffffff;
}

@media (max-width: 991px) {
  .project-hero-section {
    height: 520px;
  }

  .project-hero-title {
    font-size: 44px;
  }
}

@media (max-width: 767px) {
  .project-hero-section {
    height: 420px;
  }

  .project-hero-info {
    left: 0;
    right: 0;
    width: 100%;
    bottom: 22px;
    text-align: center;
  }

  .project-hero-info p {
    font-size: 22px;
  }

  .project-hero-title {
    display: none;
  }

  .project-intro-section {
    padding: 70px 0;
  }

  .project-intro-heading h2 {
    font-size: 24px;
  }

  .project-intro-text {
    font-size: 14px;
    line-height: 1.9;
  }

  .project-intro-actions {
    flex-direction: column;
    gap: 14px;
  }

  .project-btn-filled,
  .project-btn-outline {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .project-hero-title {
    font-size: 26px;
  }

  .project-hero-info p {
    font-size: 18px;
  }
}

/* =========================
   SERVICES PAGE — HERO BANNER
   Same structure as the competencies hero (full-bleed image + dark
   gradient overlay), with centered two-line text matching the reference.
========================= */
.services-hero-section {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
}

.services-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.services-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(20, 15, 10, 0.55) 0%,
    rgba(20, 15, 10, 0.25) 50%,
    rgba(20, 15, 10, 0.45) 100%
  );
  z-index: 1;
}

.services-hero-text {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.services-hero-text p {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #ffffff;
  margin: 0 0 6px;
}

.services-hero-text h2 {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

/* =========================
   SERVICES PAGE — INTRO TEXT
========================= */
.services-intro-section {
  background-color: #ffffff;
  padding: 90px 0 60px;
}

.services-intro-text {
  max-width: 1100px;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 17px;
  line-height: 2.1;
  color: #555555;
}

.services-intro-text:last-child {
  margin-bottom: 0;
}

/* =========================
   SERVICES PAGE — SERVICE CARDS
   Three solid-color cards reusing the brand palette already used
   elsewhere (green / gold / brown).
========================= */
.services-cards-section {
  background-color: #ffffff;
  padding: 30px 0 120px;
}

.services-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  padding: 55px 40px;
  text-align: center;
  color: #ffffff;
}

.service-card h3 {
  font-family: "IBM Plex Digits", "GE SS Unique Light", sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
}

.service-card p {
  font-size: 14px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
}

.service-card-green {
  background-color: #5b6650;
}

.service-card-gold {
  background-color: #b49a6b;
}

.service-card-brown {
  background-color: #7d4937;
}

.service-card-dark {
  background-color: #333333;
}

@media (max-width: 991px) {
  .services-hero-section {
    height: 520px;
  }

  .services-hero-text h2 {
    font-size: 26px;
  }

  .services-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .services-hero-section {
    height: 420px;
  }

  .services-hero-text p {
    font-size: 16px;
  }

  .services-hero-text h2 {
    font-size: 22px;
  }

  .services-intro-section {
    padding: 60px 0 40px;
  }

  .services-intro-text {
    font-size: 14px;
    line-height: 1.9;
  }

  .services-cards-section {
    padding: 20px 0 80px;
  }

  .service-card {
    padding: 45px 30px;
  }

  .service-card h3 {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .services-hero-text h2 {
    font-size: 19px;
  }
}

/* =========================
   OUR QUALITY PAGE — IMAGE CARD GRID
   6 image cards with a bottom gradient overlay and Arabic heading +
   description, using the brand palette (#686F53 / #BAA06C / #7D4937).
========================= */
.quality-section {
  background-color: #ffffff;
  padding: 180px 0 100px;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.quality-card {
  position: relative;
  height: 640px;
  overflow: hidden;
}

.quality-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.quality-card:hover img {
  transform: scale(1.06);
}

.quality-card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(20, 15, 10, 0.6) 0%, rgba(20, 15, 10, 0) 70%),
    linear-gradient(to top, var(--quality-tint, #686f53) 0%, transparent 75%);
  opacity: 0.75;
}

/* Rotate the brand accent colors across the grid for visual variety. */
.quality-card:nth-child(6n + 1),
.quality-card:nth-child(6n + 4) {
  --quality-tint: #686f53;
}

.quality-card:nth-child(6n + 2),
.quality-card:nth-child(6n + 5) {
  --quality-tint: #baa06c;
}

.quality-card:nth-child(6n + 3),
.quality-card:nth-child(6n + 6) {
  --quality-tint: #7d4937;
}

.quality-card-content {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  right: 28px;
  left: 28px;
  text-align: right;
}

.quality-card-content h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  margin-bottom: 10px;
}

.quality-card-content p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 320px;
}

@media (max-width: 991px) {
  .quality-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quality-card {
    height: 540px;
  }
}

@media (max-width: 767px) {
  .quality-section {
    padding: 140px 0 70px;
  }

  .quality-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .quality-card {
    height: 460px;
  }

  .quality-card-content h3 {
    font-size: 19px;
  }

  .quality-card-content p {
    font-size: 13px;
  }
}

/* =========================
   JOIN OUR FAMILY PAGE
========================= */
.join-section {
  background-color: #f1f1f1;
  padding: 110px 0;
  text-align: center;
}

.join-section-top {
  padding-top: 200px;
}

.join-heading {
  max-width: 760px;
  margin: 0 auto 60px;
}

.join-subtitle {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #b49a6b;
  margin-bottom: 14px;
}

.join-heading h2 {
  font-size: 38px;
  font-weight: 700;
  color: #686f53;
  margin: 0 0 30px;
}

.join-divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e0ddd6;
}

.join-text {
  max-width: 760px;
  margin: 0 auto 50px;
}

.join-text h3 {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  margin: 0 0 16px;
}

.join-text p {
  font-size: 16px;
  line-height: 2.1;
  color: #555555;
  margin: 0;
}

.join-cta {
  margin-top: 40px;
}

.join-cta h3 {
  font-size: 24px;
  font-weight: 700;
  color: #b49a6b;
  margin: 0 0 30px;
}

.join-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 991px) {
  .join-section {
    padding: 90px 0;
  }

  .join-heading h2 {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .join-section {
    padding: 70px 0;
  }

  .join-section-top {
    padding-top: 130px;
  }

  .join-heading {
    margin-bottom: 40px;
  }

  .join-heading h2 {
    font-size: 24px;
  }

  .join-text {
    margin-bottom: 36px;
  }

  .join-text h3 {
    font-size: 18px;
  }

  .join-text p {
    font-size: 14px;
    line-height: 1.9;
  }

  .join-cta h3 {
    font-size: 20px;
  }

  .join-cta-actions {
    flex-direction: column;
    gap: 14px;
  }

  .join-cta-actions a {
    width: 100%;
    text-align: center;
  }
}

/* =========================
   REGISTER INTEREST PAGE
========================= */
.register-interest-section {
  min-height: 100vh;
  padding: 160px 0 120px;
  background-color: #5b6650;
  display: flex;
  align-items: center;
}

.register-interest-card {
  width: 100%;
  margin: 0 auto;
  padding: 50px 45px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.12);
}

.register-interest-message {
  margin-bottom: 24px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.6;
}

.register-interest-message--success {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.register-interest-message--error {
  background-color: rgba(180, 60, 60, 0.35);
  color: #ffffff;
}

.interest-modal-heading {
  margin-bottom: 40px;
}

.interest-modal-heading span {
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  letter-spacing: 6px;
  color: #ffffff;
  opacity: 0.7;
  margin-bottom: 12px;
}

.interest-modal-heading h2 {
  font-size: 32px;
  font-weight: 300;
  color: #ffffff;
  margin: 0;
}

.interest-modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  direction: rtl;
}

.interest-modal-form input,
.interest-modal-form textarea {
  width: 100%;
  border: none;
  outline: none;
  background-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  padding: 16px 22px;
}

.interest-modal-form input::placeholder,
.interest-modal-form textarea::placeholder {
  color: #ffffff;
}

.interest-modal-form input[type="tel"] {
  direction: rtl;
  text-align: right;
}

.interest-modal-form textarea {
  height: 120px;
  resize: none;
}

.interest-modal-form button {
  display: block;
  margin: 8px auto 0;
  border: none;
  background-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-family: inherit;
  font-size: 18px;
  padding: 16px 48px;
  cursor: pointer;
  transition: 0.3s ease;
}

.interest-modal-form button:hover {
  background-color: #333333;
}

@media (max-width: 767px) {
  .register-interest-section {
    padding: 120px 0 80px;
  }

  .register-interest-card {
    padding: 40px 22px 36px;
  }

  .interest-modal-heading {
    margin-bottom: 28px;
  }

  .interest-modal-heading span {
    font-size: 12px;
    letter-spacing: 4px;
  }

  .interest-modal-heading h2 {
    font-size: 24px;
  }

  .interest-modal-form {
    gap: 14px;
  }

  .interest-modal-form input,
  .interest-modal-form textarea {
    font-size: 14px;
    padding: 14px 16px;
  }

  .interest-modal-form textarea {
    height: 100px;
  }

  .interest-modal-form button {
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
  }
}

/* ── Timeline Slider (الدمام section) ── */
.timeline-slider {
  position: relative;
  overflow: hidden;
  direction: rtl;
  max-width: 980px;
  margin: 0 auto;
}

.timeline-slider-track {
  display: flex;
  direction: rtl;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.timeline-slide {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
  direction: rtl;
  padding: 20px 0;
}

.timeline-slide .timeline-row {
  margin-bottom: 0;
}

/* Navigation */
.timeline-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}

.slider-btn {
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.8);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.slider-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.9);
}

.slider-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.slider-dots {
  display: flex;
  gap: 10px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.slider-dot.active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.3);
}

@media (max-width: 767px) {
  .timeline-slide .timeline-chevron {
    display: none;
  }

  .timeline-slide .timeline-item {
    grid-column: auto !important;
    width: 100%;
    text-align: center;
    direction: rtl;
  }

  .timeline-slide .timeline-row {
    display: block;
  }
}

/* Mobile slider: ensure items are full-width with no stray borders or pseudo-elements */
@media (max-width: 767px) {
  .timeline-slide .timeline-item.side-right,
  .timeline-slide .timeline-item.side-left {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    text-align: center !important;
  }

  .timeline-slide .timeline-item.side-right::before,
  .timeline-slide .timeline-item.side-right::after,
  .timeline-slide .timeline-item.side-left::before,
  .timeline-slide .timeline-item.side-left::after,
  .timeline-slide .timeline-year::before,
  .timeline-slide .timeline-year::after {
    display: none !important;
  }
}

/* Clip any stray pseudo-element lines inside الدمام slider */
.timeline-slider .timeline-row {
  overflow: hidden;
}

.timeline-slider .timeline-row::before,
.timeline-slider .timeline-row::after,
.timeline-slider .timeline-row *::before,
.timeline-slider .timeline-row *::after {
  display: none !important;
  content: none !important;
}

/* Hide slider dots */
.slider-dots {
  display: none !important;
}

@media (max-width: 767px) {
  .city-timeline-section:not(.light):not(.brown) {
    padding-bottom: 20px;
  }

  .timeline-slider-nav {
    margin-top: 4px;
  }

  .timeline-slide {
    min-height: unset;
  }
}

/* Hard-clip slide to prevent bracket pseudo-elements from bleeding through */
.timeline-slide {
  clip-path: inset(0);
}

/* Green nav buttons and chevron for الظهران (light) slider */
.city-timeline-section.light .slider-btn {
  border-color: rgba(91, 102, 80, 0.5);
  color: rgba(91, 102, 80, 0.9);
}

.city-timeline-section.light .slider-btn:hover {
  background: rgba(91, 102, 80, 0.1);
  border-color: #5b6650;
}

.city-timeline-section.light .timeline-slider .timeline-row .timeline-chevron {
  filter: invert(35%) sepia(15%) saturate(500%) hue-rotate(60deg) brightness(70%);
}

.status-block-green {
  background: linear-gradient(to top, transparent 0%, rgba(104, 111, 83, 0.25) 60%, rgba(104, 111, 83, 0.45) 100%);
  padding: 30px 40px;
}

.status-block-green .status-title {
  color: #7d4937;
}

.status-block-green .status-list li {
  color: #7d4937;
}

.status-block-green .status-list li a {
  color: #7d4937;
}

.status-block-mahroon {
  background: linear-gradient(to top, transparent 0%, rgba(125, 73, 55, 0.25) 60%, rgba(125, 73, 55, 0.45) 100%);
  padding: 30px 40px;
}

.status-block-mahroon .status-title {
  color: #7d4937;
}

.status-block-mahroon .status-list li {
  color: #7d4937;
}

.status-block-mahroon .status-list li a {
  color: #7d4937;
}

/* =========================
   WHATSAPP FLOAT BUTTON
========================= */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  z-index: 1002;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
}

@media (max-width: 767px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 18px;
    right: 18px;
  }

  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}