/* =========================================================
   RUWWAD · About page
   Loaded after bootstrap.css. All custom classes use the
   .rw- prefix so they never collide with style.css (Home).
   ========================================================= */

:root {
  --rw-ink:    #00261F;   /* Extra Dark Green */
  --rw-green:  #003F33;   /* Ruwwad Green */
  --rw-forest: #006350;   /* Forest Green */
  --rw-mint:   #94D6C9;   /* Aqua / Mint */
  --rw-gold:   #CF9220;   /* Gold / Mustard */
  --rw-white:  #FFFFFF;

  --rw-font: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rw-ease: cubic-bezier(.2, .7, .1, 1);
}

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--rw-font);
  background: var(--rw-ink);
  color: var(--rw-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--rw-mint);
  outline-offset: 3px;
}

.rw-skip {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  padding: .7rem 1.1rem;
  border-radius: .6rem;
  background: var(--rw-mint);
  color: var(--rw-ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .2s;
}
.rw-skip:focus { transform: none; }

/* ---------- Shared: gold corner mark (brand shape) ---------- */
.rw-corner {
  display: block;
  width: clamp(46px, 6vw, 86px);
  aspect-ratio: 1;
  background: var(--rw-gold);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 40% 40%, 40% 100%, 0 100%);
}

/* ---------- Button ---------- */
.rw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.5rem;
  border: 2px solid var(--rw-gold);
  border-radius: .7rem;
  background: var(--rw-gold);
  color: var(--rw-ink);
  font-family: var(--rw-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s, border-color .25s, transform .25s var(--rw-ease);
}
.rw-btn:hover {
  background: var(--rw-mint);
  border-color: var(--rw-mint);
  color: var(--rw-ink);
  transform: translateY(-2px);
}

/* =========================================================
   NAVBAR
   ========================================================= */
.rw-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding: .9rem 0;
  transition: background-color .35s, padding .35s, box-shadow .35s;
}
.rw-nav .navbar { padding: 0; }

.rw-nav.is-scrolled {
  padding: .5rem 0;
  background: rgba(0, 38, 31, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(148, 214, 201, .2);
}

.rw-brand { padding: 0; margin-right: 1rem; }
.rw-brand img {
  display: block;
  width: auto;
  height: 46px;
  transition: height .35s;
}
.rw-nav.is-scrolled .rw-brand img { height: 38px; }

.rw-nav .nav-link {
  position: relative;
  padding: .5rem 1rem;
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  font-weight: 600;
  transition: color .2s;
}
.rw-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .15rem;
  height: 2px;
  background: var(--rw-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--rw-ease);
}
.rw-nav .nav-link:hover,
.rw-nav .nav-link:focus-visible,
.rw-nav .nav-link.active { color: #fff; }
.rw-nav .nav-link:hover::after,
.rw-nav .nav-link.active::after { transform: scaleX(1); }

/* Hamburger */
.rw-toggler {
  padding: .55rem .6rem;
  border: 1px solid rgba(148, 214, 201, .45);
  border-radius: .65rem;
  background: transparent;
}
.rw-toggler:focus { box-shadow: 0 0 0 .2rem rgba(148, 214, 201, .3); }
.rw-toggler span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .3s var(--rw-ease), opacity .2s;
}
.rw-toggler span + span { margin-top: 5px; }
.rw-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rw-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rw-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991.98px) {
  .rw-nav .navbar-collapse {
    margin-top: .75rem;
    padding: .75rem 1.25rem 1.25rem;
    border: 1px solid rgba(148, 214, 201, .2);
    border-radius: 1rem;
    background: var(--rw-ink);
  }
  .rw-nav .nav-link { padding: .8rem .25rem; }
  .rw-nav .nav-link::after { left: .25rem; right: auto; width: 1.75rem; bottom: .35rem; }
  .rw-nav .rw-btn { width: 100%; margin-top: .75rem; }
}

/* =========================================================
   SECTION 1 · HERO
   ========================================================= */
.rw-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--rw-ink);
}

/* Background image + readability veil */
.rw-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(90% 70% at 75% 100%, rgba(0, 99, 80, .85) 0%, rgba(0, 99, 80, 0) 65%),
    var(--rw-ink);
}
.rw-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/ruwwad%20back.webp") center / cover no-repeat;
}
.rw-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 38, 31, .88) 0%,
    rgba(0, 38, 31, .5) 38%,
    rgba(0, 38, 31, .78) 100%);
}

/* Drifting mint cube pattern */
.rw-hero__pattern {
  position: absolute;
  top: 8%;
  right: -10%;
  z-index: -2;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  background: url("assets/cube%20pattern%20mint.png") center / contain no-repeat;
  opacity: .3;
  pointer-events: none;
  will-change: transform;
}

.rw-hero__main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8.5rem 0 3.5rem;
}

/* Corner mark builds in first */
.rw-hero .rw-corner {
  margin-bottom: 1.75rem;
  transform-origin: 0 0;
  animation: rw-corner .9s var(--rw-ease) .1s both;
}

/* Headline: each line rises out of a mask */
.rw-title {
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  font-size: clamp(2.35rem, 6.2vw, 5.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #fff;
}
.rw-title__line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.rw-title__line > span {
  display: inline-block;
  text-wrap: balance;
  animation: rw-rise 1s var(--rw-ease) both;
  animation-delay: calc(.3s + var(--i, 0) * .13s);
}

.rw-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--rw-mint), rgba(148, 214, 201, .12));
  transform-origin: left;
  animation: rw-draw 1.3s var(--rw-ease) .85s both;
}

.rw-intro { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

.rw-lead {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
}

.rw-note {
  max-width: 38ch;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--rw-gold);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}

.rw-fade { animation: rw-fade .9s ease 1.15s both; }

/* Disciplines ticker */
.rw-marquee {
  display: flex;
  overflow: hidden;
  border-top: 1px solid rgba(148, 214, 201, .22);
  background: rgba(0, 38, 31, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rw-marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  animation: rw-marquee 42s linear infinite;
}
.rw-marquee:hover .rw-marquee__track { animation-play-state: paused; }

.rw-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 1.5rem 1.15rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, .9);
}
.rw-marquee__item::after {
  content: "";
  width: .65rem;
  height: .65rem;
  background: var(--rw-gold);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 40% 40%, 40% 100%, 0 100%);
}

/* =========================================================
   Scroll reveal utility (for the next sections)
   Add data-reveal to any element. Only active when JS runs.
   ========================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--rw-ease), transform .8s var(--rw-ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes rw-corner  { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes rw-rise    { from { transform: translateY(110%); } to { transform: none; } }
@keyframes rw-draw    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rw-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes rw-marquee { to { transform: translateX(-100%); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .rw-marquee { overflow-x: auto; }
  .rw-marquee__track[aria-hidden="true"] { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
  .rw-hero__main { padding-top: 7rem; }
  .rw-hero__pattern { right: -35%; width: 110vw; opacity: .22; }
  .rw-marquee__item { font-size: .98rem; }
}
/* ==========================================
   WHY RUWWAD EXISTS - LIGHT ELEGANT DESIGN
   ========================================== */

/* الخلفية بيضاء ناعمة ومشرقة جداً */
.why-ruwwad-light {
  background-color: #F8FAF9 !important; /* Soft Creamy White */
  border-top: 1px solid rgba(0, 38, 31, 0.08);
}

.light-pill-tag {
  background: #FFFFFF;
  border: 1px solid rgba(207, 146, 32, 0.4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.corner-accent-sm {
  width: 13px;
  height: auto;
}

.tracking-wider {
  letter-spacing: 1.8px;
}

/* درجات الألوان للنصوص بالخلفية الفاتحة */
.text-dark-green {
  color: #00261F !important; /* Extra Dark Green */
}

.text-forest-green {
  color: #006350 !important; /* Medium / Forest Green */
}

.text-gold-dark {
  color: #CF9220 !important; /* Gold */
}

/* الكروت البيضاء العصرية الشفافة */
.luxury-light-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 63, 51, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 38, 31, 0.05);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.luxury-light-card:hover {
  transform: translateY(-6px);
  border-color: #94D6C9 !important; /* Mint Border on hover */
  box-shadow: 0 18px 40px rgba(0, 63, 51, 0.1);
}

.card-num-gold-dark {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #CF9220;
  letter-spacing: 1.5px;
}

/* الأقواس الصغيرة جداً والناعمة */
.arrow-tiny-dark {
  width: 11px !important;
  height: auto;
  opacity: 0.7;
}

.flip-horizontal {
  transform: scaleX(-1);
}

/* الصندوق الأخير بخلفية بيضاء مميزة وحواف Mint */
.luxury-light-statement {
  background: #FFFFFF !important;
  border: 1px solid rgba(148, 214, 201, 0.6) !important;
  box-shadow: 0 20px 45px rgba(0, 38, 31, 0.07);
}

.border-top-light {
  border-top: 1px solid rgba(0, 38, 31, 0.1) !important;
}
/* Smooth Fade & Slide Transitions */
[data-aos] {
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hover Animation Effect for Cards */
.luxury-light-card {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.4s ease, 
              border-color 0.4s ease !important;
}
/* ==========================================
   RUWWAD VALUES BANNER (INFINITE MARQUEE)
   ========================================== */
.ruwwad-values-banner {
  background-color: #00261F !important; /* Extra Dark Green */
  border-top: 1px solid rgba(148, 214, 201, 0.2);
  border-bottom: 1px solid rgba(148, 214, 201, 0.2);
  white-space: nowrap;
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-content {
  display: flex;
  animation: marquee-scroll 25s linear infinite; /* تحكمي بالسرعة بتغيير 25s */
}

/* يتوقف الشريط مؤقتاً عند وضع الماوس عليه لسهولة القراءة */
.ruwwad-values-banner:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.value-dot {
  width: 8px;
  height: 8px;
  background-color: #CF9220; /* Gold */
  border-radius: 50%;
  display: inline-block;
}

/* ==========================================
   WHAT ECOSYSTEM ACTUALLY MEANS SECTION
   ========================================== */
.ecosystem-section {
  background-color: #F8FAF9 !important; /* Light & Clean Background */
}

.ecosystem-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 63, 51, 0.12) !important;
  box-shadow: 0 15px 35px rgba(0, 38, 31, 0.06);
  backdrop-filter: blur(10px);
}

.list-item-hover {
  background: rgba(148, 214, 201, 0.08);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.list-item-hover:hover {
  background: #FFFFFF;
  border-color: rgba(148, 214, 201, 0.4);
  transform: translateX(6px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.highlight-item {
  background: rgba(207, 146, 32, 0.08) !important;
  border: 1px solid rgba(207, 146, 32, 0.25) !important;
}

.check-icon-box {
  width: 28px;
  height: 28px;
  background: #006350; /* Forest Green */
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-icon-box.gold-box {
  background: #CF9220 !important; /* Gold */
}

/* زر Explore Our Expertise */
.btn-ruwwad-explore {
  background-color: #00261F !important; /* Extra Dark Green */
  color: #FFFFFF !important;
  border: 1px solid #00261F;
  transition: all 0.35s ease;
}

.btn-ruwwad-explore:hover {
  background-color: #CF9220 !important; /* Gold hover */
  color: #FFFFFF !important;
  border-color: #CF9220;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(207, 146, 32, 0.3) !important;
}
/* ==========================================
   GLOBAL DIRECT STYLES
   ========================================== */
.text-dark-green {
  color: #003F33 !important;
}

.text-gold {
  color: #CF9220 !important;
}

.text-gold-dark {
  color: #B27B13 !important;
}

.corner-icon {
  width: 14px;
  height: auto;
}

.arrow-icon {
  width: 14px;
  height: auto;
}

.btn-gold-solid {
  background-color: #CF9220 !important;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}

.btn-gold-solid:hover {
  background-color: #003F33 !important;
  color: #ffffff !important;
}

/* ==========================================
   SECTION 1: OUR CENTERS OF EXCELLENCE
   ========================================== */
.centers-excellence-section {
  background-color: #EAF5F2 !important; /* Soft Mint Background */
  min-height: 420px;
}

.cube-mint-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/cube pattern mint.png');
  background-repeat: repeat;
  background-size: 160px;
  opacity: 0.25;
  pointer-events: none;
}

@media (min-width: 992px) {
  .col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }
}

.center-pill-box {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 63, 51, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  transition: all 0.35s ease;
}

.center-pill-box:hover {
  background-color: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 63, 51, 0.1);
  border-color: #CF9220;
}

/* ==========================================
   WHAT WE VALUE (LOGO DARK GREEN & GRADIENTS)
   ========================================== */
.what-we-value-darkgreen {
  /* تدرج من الأخضر الغامق الخاص باللوغو مع درجات أعمق وأغمق */
  background: linear-gradient(135deg, #002720 0%, #003F33 50%, #001A15 100%) !important;
}

/* إضاءات خفيفة متدرجة بالخلفية */
.dark-green-glow-1 {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 85, 68, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.dark-green-glow-2 {
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(207, 146, 32, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* ألوان النصوص */
.text-gold-bright {
  color: #E5A93C !important;
}

.text-light-mint {
  color: #E2ECE9 !important;
}

/* تنسيق الأيقونات لتناسب الخلفية الداكنة */
.filter-gold {
  filter: brightness(0) saturate(100%) invert(67%) sepia(85%) saturate(390%) hue-rotate(357deg) brightness(92%) contrast(89%);
}

/* تصميم الصفوف بالخلفية المظلمة */
.value-dark-row {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #CF9220;
  backdrop-filter: blur(8px);
  transition: all 0.35s ease;
}

.value-dark-row:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(229, 169, 60, 0.4);
  border-left: 4px solid #E5A93C;
  transform: translateX(8px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.value-trust-dark-featured {
  background: rgba(207, 146, 32, 0.12);
  border: 1px solid rgba(207, 146, 32, 0.3);
  border-left: 5px solid #E5A93C;
}
/* فاصل ذهبي متدرج أعلى السيكشن الأخضر الغامق */
.what-we-value-darkgreen {
  border-top: 2px solid transparent;
  border-image: linear-gradient(to right, transparent, #CF9220, #E5A93C, #CF9220, transparent) 1;
  box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.25); /* ظل ناعم لخلق عمق بصري */
}
/* SECTION SPACER STRIP */
.section-spacer-strip {
  background-color: #f4f9f8 !important; /* لون محايد جداً وناعم بين المينت والأخضر الغامق */
  border-top: 1px solid rgba(0, 63, 51, 0.08);
  border-bottom: 1px solid rgba(0, 63, 51, 0.08);
}

.spacer-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, #CF9220, transparent);
}

.tracking-widest {
  letter-spacing: 0.25em;
}
/* ==========================================
   THE PEOPLE & CTA DUAL CARDS
   ========================================== */
.the-people-cards-section {
  background-color: #EAF5F2 !important; /* خلفية ناعمة تحضن الكارتين */
}

.text-dark-green {
  color: #003F33 !important;
}

.text-gold {
  color: #CF9220 !important;
}

.text-gold-bright {
  color: #E5A93C !important;
}

.text-light-mint {
  color: #E2ECE9 !important;
}

.corner-icon {
  width: 14px;
  height: auto;
}

/* Base Card Styling */
.people-card {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* CARD 1: LIGHT LUXURY STYLE */
.light-card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 63, 51, 0.12);
  box-shadow: 0 10px 30px rgba(0, 63, 51, 0.05);
}

.light-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 63, 51, 0.12);
  border-color: #CF9220;
}

/* CARD 2: DARK ROYAL GREEN STYLE */
.dark-card {
  background: linear-gradient(145deg, #002720 0%, #003F33 100%);
  border: 1px solid rgba(207, 146, 32, 0.3);
  box-shadow: 0 10px 30px rgba(0, 39, 32, 0.2);
}

.dark-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 39, 32, 0.4);
  border-color: #E5A93C;
}

.card-glow-bg {
  position: absolute;
  top: -30%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(207, 146, 32, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* BUTTON STYLES & HOVER ANIMATION */
.btn-gold-solid {
  background-color: #CF9220 !important;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}

.btn-gold-solid:hover {
  background-color: #003F33 !important;
  color: #ffffff !important;
}

.btn-gold-solid:hover i,
.btn-gold-bright-solid:hover i {
  transform: translateX(5px);
}

.btn-gold-solid i,
.btn-gold-bright-solid i {
  transition: transform 0.3s ease;
}

.btn-gold-bright-solid {
  background-color: #E5A93C !important;
  color: #002720 !important;
  border: none;
  transition: all 0.3s ease;
}

.btn-gold-bright-solid:hover {
  background-color: #ffffff !important;
  color: #003F33 !important;
}

/* ==========================================
   RUWWAD FRAMEWORK SECTION
   ========================================== */
.ruwwad-framework-section {
  position: relative;
  background-color: #F4F9F8 !important;
  z-index: 1;
  overflow: hidden;
}

/* خلفية متطابقة مع Our Expertise */
.ruwwad-framework-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/grid%20pattern.png') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: top right !important;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

/* ==========================================
   IMAGE ASSETS & ICONS SIZING (EXACT CONTROL)
   ========================================== */

/* 1. أيقونة الزاوية (Coner) */
.corner-img-icon {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* 2. أيقونة الأسهم المزدوجة الصغيرة (في العناوين القائمة) */
.arrow-img-icon {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* 3. أسهم العنوان الرئيسي الكبير */
.arrow-img-icon-lg {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* 4. الأسهم داخل الأزرار */
.btn-arrow-img {
  width: 12px !important;
  height: 12px !important;
  object-fit: contain;
  filter: brightness(0) invert(1); /* تجعل السهم باللون الأبيض الناصع */
  transition: transform 0.3s ease;
  display: inline-block;
  vertical-align: middle;
}

.btn-gold-solid:hover .btn-arrow-img {
  transform: translateX(4px);
}

/* ==========================================
   CARDS, STYLES & UTILITIES
   ========================================== */
.hww-light-card,
.scenario-light-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 63, 51, 0.08) !important;
  transition: all 0.35s ease;
}

.hww-light-card {
  border-left: 4px solid #CF9220 !important;
}

.scenario-light-card:hover {
  transform: translateY(-5px);
  border-color: #CF9220 !important;
  box-shadow: 0 15px 30px rgba(0, 63, 51, 0.08) !important;
}

.scenario-dark-card {
  background: linear-gradient(145deg, #002720 0%, #003F33 100%);
  border: 1px solid rgba(207, 146, 32, 0.3);
  transition: all 0.35s ease;
}

.scenario-dark-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 39, 32, 0.25) !important;
}

.problem-statement-box-dark {
  background: rgba(207, 146, 32, 0.15);
  border: 1px solid rgba(207, 146, 32, 0.3);
}

.border-bottom-subtle {
  border-bottom: 1px solid rgba(0, 63, 51, 0.1) !important;
}

/* COLORS */
.text-dark-green { color: #003F33 !important; }
.text-gold { color: #CF9220 !important; }
.text-gold-dark { color: #B57D18 !important; }
.text-gold-bright { color: #E5A93C !important; }
.text-light-mint { color: #E2ECE9 !important; }

/* BUTTONS */
.btn-gold-solid {
  background-color: #CF9220 !important;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}

.btn-gold-solid:hover {
  background-color: #003F33 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 63, 51, 0.15) !important;
}
/* ==========================================
   RUWWAD PROCESS SECTION (HORIZONTAL TIMELINE)
   ========================================== */
.ruwwad-process-section {
  background-color: #F8FAF9 !important; /* خلفية ناعمة ونظيفة */
  position: relative;
}

/* التقسيم لخمسة أعمدة متساوية للشاشات الكبيرة */
@media (min-width: 992px) {
  .col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }
}

/* الخط الأفقي الواصل بين الخطوات */
.timeline-line {
  position: absolute;
  top: 48px;
  left: 5%;
  width: 90%;
  height: 3px;
  background: linear-gradient(90deg, #003F33 0%, #CF9220 100%);
  z-index: 0;
  opacity: 0.25;
}

/* كروت الخطوات */
.timeline-step-card {
  border: 1px solid rgba(0, 63, 51, 0.08) !important;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
}

.timeline-step-card:hover {
  transform: translateY(-8px);
  border-color: #CF9220 !important;
  box-shadow: 0 15px 30px rgba(0, 63, 51, 0.1) !important;
}

/* دوائر الأرقام */
.step-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #003F33;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 63, 51, 0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.timeline-step-card:hover .step-circle {
  background-color: #CF9220;
  transform: scale(1.1);
}

/* النواحي الجمالية والألوان */
.step-tag {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: #CF9220;
}

.highlight-step {
  border-top: 3px solid #CF9220 !important;
}

.border-top-subtle {
  border-top: 1px solid rgba(0, 63, 51, 0.06);
}

.text-dark-green { color: #003F33 !important; }
.text-gold-dark { color: #B57D18 !important; }
.text-gold { color: #CF9220 !important; }

/* أزرار الواتساب */
.btn-gold-solid {
  background-color: #CF9220 !important;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}

.btn-gold-solid:hover {
  background-color: #003F33 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 63, 51, 0.15) !important;
}

.btn-arrow-img {
  width: 12px !important;
  height: 12px !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

.btn-gold-solid:hover .btn-arrow-img {
  transform: translateX(4px);
}

/* ==========================================
   ONE SPECIALIST OR AN ECOSYSTEM SECTION
   ========================================== */
.ecosystem-section {
  background-color: #F4F8F7 !important; /* خلفية المينت الفاتحة والناعمة */
  position: relative;
  z-index: 1;
}

/* خلفيات إضاءة مموهة متألقة (Glow Effects) */
.eco-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}

.eco-glow-1 {
  width: 400px;
  height: 400px;
  background: rgba(207, 146, 32, 0.1);
  top: -80px;
  left: -80px;
}

.eco-glow-2 {
  width: 450px;
  height: 450px;
  background: rgba(0, 63, 51, 0.06);
  bottom: -100px;
  right: -100px;
}

/* الألوان الأساسية */
.text-dark-green { color: #003F33 !important; }
.text-emerald { color: #005041 !important; }
.text-gold { color: #CF9220 !important; }

/* تصميم الكروت */
.eco-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 63, 51, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.eco-card-focused {
  border-top: 4px solid #CF9220 !important;
}

.eco-card-connected {
  border-top: 4px solid #005041 !important;
}

.eco-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0, 63, 51, 0.08) !important;
}

/* شارات الكروت (Badges) */
.eco-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(207, 146, 32, 0.12);
  color: #B57D18;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.eco-card-badge.badge-emerald {
  background: rgba(0, 80, 65, 0.1);
  color: #005041;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #CF9220;
}

.badge-dot.dot-emerald {
  background-color: #005041;
}

/* زخرفة هندسية خفيفة خلف الكروت */
.eco-card-pattern {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(207, 146, 32, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.pattern-emerald {
  background: radial-gradient(circle, rgba(0, 80, 65, 0.08) 0%, transparent 70%);
}

.leading-relaxed {
  line-height: 1.7;
}
/* ==========================================
   HOW WE CAN WORK TOGETHER (DARK GREEN & SIDE CUBE)
   ========================================== */
.work-together-green {
  background-color: #003f33 !important; /* الأخضر الداكن المريح والمميز للموقع */
  position: relative;
  z-index: 1;
}

/* صورة الكيوب باترن المنفردة على الجهة اليمنى */
.cube-pattern-side {
  position: absolute;
  top: 50%;
  right: -50px;
  transform: translateY(-50%);
  width: 380px;
  height: auto;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}

/* خطوط الفصل والتفاعل بين الخدمات */
.service-list-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 12px;
}

.service-list-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: #CF9220;
  transform: translateX(8px);
}

/* الألوان والنصوص */
.service-number {
  font-size: 1.25rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.3s ease;
}

.service-list-item:hover .service-number {
  color: #CF9220;
}

.service-title {
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.service-list-item:hover .service-title {
  color: #CF9220 !important;
}

.text-light-mint {
  color: #ebf3f1 !important;
  opacity: 0.85;
}

.text-gold {
  color: #CF9220 !important;
}

.leading-relaxed {
  line-height: 1.7;
}

/* الزر الرديف */
.btn-gold-solid {
  background-color: #CF9220 !important;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}

.btn-gold-solid:hover {
  background-color: #ffffff !important;
  color: #003f33 !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.btn-arrow-img {
  width: 12px !important;
  height: 12px !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.btn-gold-solid:hover .btn-arrow-img {
  transform: translateX(4px);
  filter: none;
}
/* ==========================================
   WHAT WE DON'T DO (CREATIVE EMERALD BOX & GRID)
   ========================================== */
.dont-do-creative-section {
  background-color: #EBF3F1 !important; /* خلفية النعناع الناعمة */
  position: relative;
}

/* المربع الرئيسي الداكن */
.emerald-manifesto-box {
  background-color: #003F33 !important; /* اللون الأخضر الزمردي الداكن الخاص بـ Ruwwad */
  box-shadow: 0 20px 40px rgba(0, 63, 51, 0.15) !important;
}

/* علامة اللوجو المائية في الخلفية */
.manifesto-logo-watermark {
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 320px;
  height: auto;
  opacity: 0.05;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 1;
}

.manifesto-small-logo {
  height: 35px;
  width: auto;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 6px 14px;
  border-radius: 20px;
}

/* مربعات الشبكة التفاعلية Inside Grid */
.dont-grid-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dont-grid-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #CF9220;
  transform: translateY(-4px);
}

/* المربع الخامس البارز */
.highlight-card {
  background: linear-gradient(135deg, rgba(207, 146, 32, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(207, 146, 32, 0.3);
}

/* الألوان والتنسيقات */
.text-dark-green { color: #003F33 !important; }
.text-gold { color: #CF9220 !important; }
.text-light-mint { color: #EBF3F1 !important; opacity: 0.8; }

.bg-gold-subtle {
  background-color: rgba(207, 146, 32, 0.12) !important;
}

.dont-tag {
  letter-spacing: 1px;
}
/* ==========================================
   YOUR FIRST CONVERSATION (TYPOGRAPHIC NO-CARDS DESIGN)
   ========================================== */
.first-conversation-modern {
  background-color: #EBF3F1 !important; /* لون النعناع النقي */
  position: relative;
}

/* 1. TICKER MARQUEE BAR (الأصلي بدون تغيير) */
.ticker-bar-wrapper {
  background-color: #003F33 !important;
  border-top: 1px solid rgba(207, 146, 32, 0.3);
  border-bottom: 1px solid rgba(207, 146, 32, 0.3);
  box-shadow: 0 4px 15px rgba(0, 63, 51, 0.1);
}

.ticker-track {
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

.whitespace-nowrap {
  white-space: nowrap;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 2. TYPOGRAPHY LIST STYLING */
.tell-us-row {
  border-bottom: 1px dashed rgba(0, 63, 51, 0.15);
  transition: all 0.3s ease;
}

.tell-us-row:hover {
  padding-left: 10px;
  border-bottom-color: #CF9220;
}

.tell-us-num {
  font-size: 1.1rem;
  opacity: 0.8;
}

.accent-arrow-img {
  width: 18px;
  height: auto;
  filter: invert(62%) sepia(85%) saturate(415%) hue-rotate(357deg) brightness(91%) contrast(88%);
}

/* 3. BUTTON STYLING (DARK GREEN SOLID WITH GOLD HOVER) */
.btn-dark-green-action {
  background-color: #003F33 !important;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}

.btn-dark-green-action:hover {
  background-color: #CF9220 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 63, 51, 0.2) !important;
}

.btn-arrow-img {
  width: 12px !important;
  height: 12px !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

.btn-dark-green-action:hover .btn-arrow-img {
  transform: translateX(4px);
}

/* الألوان */
.text-dark-green { color: #003F33 !important; }
.text-gold { color: #CF9220 !important; }
.leading-relaxed { line-height: 1.6; }
/* ==========================================
   GOLDEN & GREEN FINALE SECTION STYLING
   ========================================== */
.what-we-talk-golden-finale {
  background: linear-gradient(135deg, #003F33 0%, #00251F 50%, #1A150B 100%) !important;
  position: relative;
  overflow: hidden;
}

/* تنسيق وحركة البابلز الشفافة المتطايرة بالخلفية */
.bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(207, 146, 32, 0.08); /* لون ذهبي شفاف خفيف */
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 1;
  animation: floatBubble 12s infinite ease-in-out alternate;
}

.bubble-1 {
  width: 120px;
  height: 120px;
  top: 10%;
  left: 10%;
  animation-duration: 10s;
}

.bubble-2 {
  width: 200px;
  height: 200px;
  bottom: 15%;
  right: 5%;
  animation-duration: 15s;
  background: rgba(235, 243, 241, 0.04); /* لمسة مينت شفافة خفيفة */
}

.bubble-3 {
  width: 80px;
  height: 80px;
  top: 50%;
  left: 5%;
  animation-duration: 8s;
}

.bubble-4 {
  width: 150px;
  height: 150px;
  top: 20%;
  right: 15%;
  animation-duration: 13s;
}

.bubble-5 {
  width: 90px;
  height: 90px;
  bottom: 20%;
  left: 20%;
  animation-duration: 11s;
}

@keyframes floatBubble {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-25px) scale(1.05);
  }
  100% {
    transform: translateY(15px) scale(0.95);
  }
}

/* توزع الأشكال (Corner.png) بخلفية القسم */
.finale-shape-bg-1 {
  position: absolute;
  top: 5%;
  left: 3%;
  pointer-events: none;
  z-index: 1;
}

.finale-shape-bg-2 {
  position: absolute;
  bottom: 5%;
  right: 3%;
  pointer-events: none;
  z-index: 1;
}

.rotate-180 {
  transform: rotate(180deg);
}

/* اللوغو المركزي المتألق */
.finale-central-logo {
  height: 45px;
  width: auto;
  object-fit: contain;
}

.backdrop-blur {
  backdrop-filter: blur(10px);
}

/* كتل الجمل الفخمة */
.golden-fluid-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(207, 146, 32, 0.2);
  backdrop-filter: blur(15px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.golden-fluid-tile:hover {
  background: rgba(207, 146, 32, 0.07);
  border-color: #CF9220;
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.tile-number-accent {
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(207, 146, 32, 0.2);
  position: absolute;
  top: 15px;
  right: 25px;
  letter-spacing: -1px;
}

.text-light-opacity {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.text-gold-light {
  color: #E6C280 !important;
}

/* زر الإنستغرام الفاخر */
.golden-insta-pill {
  background: linear-gradient(135deg, #003F33 0%, #00251F 100%);
  border: 1px solid #CF9220;
  transition: all 0.3s ease;
}

.golden-insta-pill:hover {
  background: #CF9220 !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(207, 146, 32, 0.4);
}

.text-white { color: #ffffff !important; }
.text-gold { color: #CF9220 !important; }
/* =========================================================
   FOOTER — site-wide (copied from Your Terms page)
   ========================================================= */
.rw-tfooter {
  position: relative;
  background: var(--rw-ink);
  padding: 4rem 0 2.5rem;
  text-align: center;
  font-family: var(--rw-font);
}
.rw-tfooter .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.rw-tfooter__logo {
  display: inline-block;
  height: 34px;
  width: auto;
  margin-bottom: 1.1rem;
  opacity: .95;
}
.rw-tfooter__tagline {
  color: var(--rw-mint);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .03em;
  margin: 0 0 2rem;
}
.rw-tfooter__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.4rem 2.4rem;
  margin: 0 0 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rw-tfooter__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: color .3s var(--rw-ease);
}
a.rw-tfooter__item:hover {
  color: var(--rw-gold);
}
.rw-tfooter__item svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.rw-tfooter__item--static {
  color: rgba(255, 255, 255, .6);
}
.rw-tfooter__copy {
  color: rgba(255, 255, 255, .45);
  font-weight: 500;
  font-size: .82rem;
  margin: 0;
}
@media (max-width: 575.98px) {
  .rw-tfooter__contact {
    flex-direction: column;
    gap: 1rem;
  }
}