/* =========================================================================
   BUILDING RANK — BRAND 2026 DESIGN SYSTEM
   Loaded AFTER assets/css/aports.css + aports-responsive.css.
   Restyles the existing template to match the Building Rank brochure /
   product-sheet identity (dark engineering-green hero, node/line motif,
   accent-bordered cards, numbered process trackers, condition gauges).
   Structural/behavioural classes required by aports.js / index.js /
   new-faq.js / contact.js are left in place — this file is presentation
   only, plus a handful of new, additive components (br-*) for new content.
   ========================================================================= */

:root {
  /* ---- brand palette (derived from the Building Rank brochures) ---- */
  --br-black: #090c09;
  --br-black-soft: #0e1611;
  --br-forest-900: #11201a;
  --br-forest-800: #17311f;
  --br-forest-700: #1c3f23;
  --br-green: #55b83c;
  --br-green-mid: #3f9a2c;
  --br-green-deep: #1f4a17;
  --br-green-pale: #eef6ea;
  --br-green-line: rgba(85, 184, 60, 0.35);
  --br-white: #ffffff;
  --br-ink: #131813;
  --br-body: #4b564d;
  --br-body-soft: #6b756c;
  --br-border: #dfe8da;
  --br-border-soft: #e9f0e5;
  --br-shadow: 0 20px 45px -20px rgba(10, 30, 15, 0.35);
  --br-shadow-sm: 0 10px 25px -12px rgba(10, 30, 15, 0.25);
  --br-radius: 14px;
  --br-radius-sm: 8px;
  --br-font: "DM Sans", sans-serif;
}

/* -------------------------------------------------------------------
   0. Shared utility / typography
------------------------------------------------------------------- */
.br-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-green);
  margin-bottom: 14px;
}

.br-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--br-green);
  display: inline-block;
}

.br-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.br-section--tight {
  padding: 70px 0;
}

.br-section--dark {
  background: linear-gradient(160deg, var(--br-black) 0%, var(--br-forest-900) 62%, var(--br-forest-800) 100%);
  color: rgba(255, 255, 255, 0.82);
}

.br-section--pale {
  background: var(--br-green-pale);
}

.br-heading {
  font-family: var(--br-font);
  font-weight: 700;
  color: var(--br-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.br-section--dark .br-heading,
.br-section--dark .br-eyebrow-text {
  color: var(--br-white);
}

.br-lede {
  color: var(--br-body);
  font-size: 17px;
  line-height: 1.7;
  max-width: 700px;
}

.br-section--dark .br-lede {
  color: rgba(255, 255, 255, 0.68);
}

.br-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.br-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid transparent;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.br-btn--solid {
  background: var(--br-green);
  color: var(--br-white) !important;
  box-shadow: 0 12px 24px -10px rgba(85, 184, 60, 0.55);
}

.br-btn--solid:hover {
  background: var(--br-green-mid);
  transform: translateY(-2px);
  color: var(--br-white) !important;
}

.br-btn--ghost-dark {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--br-white) !important;
}

.br-btn--ghost-dark:hover {
  border-color: var(--br-green);
  background: rgba(85, 184, 60, 0.12);
  color: var(--br-white) !important;
}

.br-btn--ghost-light {
  border-color: var(--br-border);
  color: var(--br-ink) !important;
}

.br-btn--ghost-light:hover {
  border-color: var(--br-green);
  background: var(--br-green-pale);
  color: var(--br-green-deep) !important;
}

.br-btn--sm {
  padding: 10px 20px;
  font-size: 13px;
}

/* normalise every legacy .thm-btn instance (contact form, menu CTA, WhatsApp/
   call buttons, etc.) to the new pill shape so old + new buttons match */
.thm-btn {
  border-radius: 100px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  padding: 14px 30px !important;
  background-color: var(--br-green) !important;
}

.thm-btn:before {
  background: var(--br-black) !important;
}

/* signature node / constellation motif, reused across dark sections */
.br-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

.br-nodes svg {
  width: 100%;
  height: 100%;
}

.br-nodes line {
  stroke: var(--br-green);
  stroke-width: 1;
  opacity: 0.35;
}

.br-nodes circle {
  fill: var(--br-green);
}

/* -------------------------------------------------------------------
   1. Header / navigation
------------------------------------------------------------------- */
.main-header {
  background: transparent;
}

.main-menu {
  background: rgba(9, 12, 9, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.main-menu__wrapper-inner {
  padding: 14px 0;
}

.main-menu__logo img {
  /* filter: brightness(0) invert(1); */
  max-height: 65px;
}

.main-menu__list > li > a {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.main-menu__list > li:hover > a,
.main-menu__list > li.current > a {
  color: var(--br-green) !important;
}
/* 
.main-menu__list .shadow-box {
  background: var(--br-white);
  border-radius: var(--br-radius-sm);
  border-top: 3px solid var(--br-green);
  box-shadow: var(--br-shadow);
  padding: 10px 0;
}

.main-menu__list .shadow-box a {
  color: var(--br-ink) !important;
  font-weight: 500;
  padding: 9px 22px !important;
}

.main-menu__list .shadow-box a:hover {
  color: var(--br-green-deep) !important;
  background: var(--br-green-pale);
}

.main-menu__list .shadow-box li.br-nav-new > a {
  color: var(--br-green-deep) !important;
  font-weight: 700;
}

.main-menu__list .shadow-box li.br-nav-new > a::after {
  content: "NEW";
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--br-green);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-inline-start: 8px;
  vertical-align: middle;
}

.main-menu__list .shadow-box .br-nav-divider {
  border-top: 1px solid var(--br-border-soft);
  margin: 6px 16px;
} */

.main-menu__btn-box .thm-btn.main-menu__btn {
  background: var(--br-green);
  border-radius: 100px;
  padding: 12px 26px;
  font-weight: 700;
}

.main-menu__btn-box .thm-btn.main-menu__btn:hover {
  background: var(--br-white);
  color: var(--br-green-deep);
}

.flag-picker .flag-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  padding: 4px 8px !important;
}

.stricky-header.stricked-menu.main-menu.stricky-header--fixed .main-menu__wrapper-inner {
  background: rgba(9, 12, 9, 0.94);
}

/* -------------------------------------------------------------------
   2. Hero
------------------------------------------------------------------- */
.hero-image-banner {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: radial-gradient(120% 130% at 82% 8%, #1c3a22 0%, var(--br-forest-900) 42%, var(--br-black) 100%);
  overflow: hidden;
  padding: 190px 0 110px;
}

.hero-image-banner .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  mix-blend-mode: luminosity;
}

.hero-image-banner .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(9, 12, 9, 0.96) 0%, rgba(9, 12, 9, 0.72) 46%, rgba(17, 32, 26, 0.55) 100%);
}

.hero-shape.hero-shape-1,
.hero-shape.hero-shape-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(0);
  z-index: 0;
}

.hero-shape-1 {
  width: 620px;
  height: 620px;
  inset-inline-end: -160px;
  top: -180px;
  background: radial-gradient(circle at 30% 30%, rgba(85, 184, 60, 0.28), transparent 70%);
}

.hero-shape-2 {
  width: 420px;
  height: 420px;
  inset-inline-start: -140px;
  bottom: -160px;
  background: radial-gradient(circle at 60% 60%, rgba(85, 184, 60, 0.16), transparent 70%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero-content .br-eyebrow {
  color: var(--br-green);
}

.hero-title {
  font-family: var(--br-font);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.12;
  color: var(--br-white);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.hero-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 400;
  max-width: 620px;
  margin-bottom: 36px;
}

.hero-btn.thm-btn {
  background: var(--br-green);
  border-radius: 100px;
  padding: 17px 36px;
  font-weight: 700;
  box-shadow: 0 18px 34px -14px rgba(85, 184, 60, 0.6);
}

.hero-btn.thm-btn:hover {
  background: var(--br-white);
  color: var(--br-green-deep);
}

.br-hero-trust {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 820px;
}

.br-hero-trust__item {
  min-width: 120px;
}

.br-hero-trust__num {
  display: flex;
  justify-content: center;
  font-family: var(--br-font);
  font-weight: 800;
  font-size: 28px;
  color: var(--br-green);
  line-height: 1;
  margin-bottom: 6px;
}

.br-hero-trust__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.br-hero-graphic {
  position: absolute;
  inset-inline-end: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  z-index: 1;
  opacity: 0.9;
}

@media (max-width: 1199px) {
  .br-hero-graphic {
    display: none;
  }
}

/* -------------------------------------------------------------------
   3. Section title (shared component used site-wide)
------------------------------------------------------------------- */
.section-title__tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-green) !important;
  margin-bottom: 14px;
}

.section-title__tagline::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--br-green);
  display: inline-block;
}

.section-title__title {
  font-family: var(--br-font);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section-title__text {
  color: var(--br-body);
  font-size: 16px;
}

.services-accordion .section-title__text.text-white,
.br-section--dark .section-title__text {
  color: rgba(255, 255, 255, 0.66) !important;
}

/* -------------------------------------------------------------------
   4. Services section — rebuilt as a card grid
------------------------------------------------------------------- */
.services-accordion {
  background: linear-gradient(180deg, var(--br-black) 0%, var(--br-forest-900) 100%);
  padding: 110px 0;
  position: relative;
}

.services-accordion__bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(85, 184, 60, 0.18) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
}

.br-services-grid {
  position: relative;
  align-items: start;
  z-index: 1;
  display: block;
  column-count: 3; 
  column-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* gap: 24px; */
}

.br-service-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--br-radius);
  padding: 30px 26px;
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  vertical-align: top;
  box-sizing: border-box;
  transition: all 0.3s ease;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
}

.br-service-card:hover {
  border-color: var(--br-green);
  background: rgba(85, 184, 60, 0.06);
  transform: translateY(-4px);
}

.br-service-card__icon {
  min-width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(85, 184, 60, 0.14);
  border: 1px solid var(--br-green-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--br-green);
  font-size: 22px;
  margin-bottom: 20px;
}

.br-service-card--new {
  border-color: var(--br-green-line);
  background: rgba(85, 184, 60, 0.08);
}

.br-service-card__badge {
  position: absolute;
  margin-left: 8px;
  top: 18px;
  inset-inline-end: 18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--br-green);
  padding: 3px 8px;
  border-radius: 5px;
}

html[lang="en"] .br-service-card__badge {
  position: absolute;
  margin-right: 8px;
  top: 18px;
  inset-inline-end: 13px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--br-green);
  padding: 3px 8px;
  border-radius: 5px;
}

.br-service-card h3 {
  font-family: var(--br-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--br-white);
  margin-bottom: 10px;
  padding-inline-end: 30px;
  line-height: 1.35;
}

.br-service-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}

.br-service-card__stats {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.br-service-card__stats div {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.br-service-card__stats strong {
  display: block;
  color: var(--br-green);
  font-size: 15px;
  font-weight: 800;
}

.br-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--br-green) !important;
  font-weight: 700;
  font-size: 14px;
}

.br-service-card__link i {
  transition: transform 0.2s ease;
}

.br-service-card:hover .br-service-card__link i {
  transform: translateX(4px);
}

.br-services-more {
  text-align: center;
  margin-top: 44px;
}

/* -------------------------------------------------------------------
   5. Problem-to-service diagnostic guide teaser
------------------------------------------------------------------- */
.br-guide {
  background: var(--br-white);
}

.br-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-bottom: 46px;
}

.br-guide-card {
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  overflow: hidden;
  background: var(--br-white);
  transition: all 0.25s ease;
}

.br-guide-card:hover {
  box-shadow: var(--br-shadow);
  transform: translateY(-4px);
}

.br-guide-card__head {
  background: var(--br-ink);
  background: linear-gradient(120deg, var(--br-forest-900), var(--br-forest-800));
  color: #fff;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 180px;
}

.br-guide-card__head i {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(85, 184, 60, 0.22);
  color: var(--br-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.br-guide-card__head span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--br-green);
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.br-guide-card__head h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.br-guide-card__body {
  padding: 20px 22px 24px;
}

.br-guide-card__body p {
  font-size: 13.5px;
  color: var(--br-body);
  line-height: 1.6;
  margin-bottom: 12px;
}

.br-guide-card__body p strong {
  color: var(--br-ink);
}

/* -------------------------------------------------------------------
   6. What we inspect / tools (reskin — structure kept for JS)
------------------------------------------------------------------- */
.inspection-tools {
  background: var(--br-green-pale);
  padding: 100px 0;
}

.accordion-3d-item {
  background: var(--br-white);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  box-shadow: none;
  margin-bottom: 18px;
  overflow: hidden;
}

.accordion-3d-header {
  padding: 22px 26px;
  border-inline-start: 4px solid var(--br-green);
}

.accordion-3d-title h3 {
  font-family: var(--br-font);
  font-weight: 700;
  color: var(--br-ink);
  font-size: 17px;
}

.accordion-3d-count {
  color: var(--br-green-deep);
  background: var(--br-green-pale);
  border-radius: 100px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
}

.tool-card {
  background: var(--br-green-pale);
  border: 1px solid var(--br-border-soft);
  border-radius: var(--br-radius-sm);
}

.tool-card h4 {
  color: var(--br-ink);
  font-weight: 700;
}

.tool-card p {
  color: var(--br-body-soft);
}

.software-section {
  background: var(--br-white);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
}

/* -------------------------------------------------------------------
   7. Intelligence ecosystem (new — AIF / DIP / EIS / AI reports)
------------------------------------------------------------------- */
.br-ecosystem {
  background: linear-gradient(180deg, var(--br-forest-900) 0%, var(--br-black) 100%);
}

.br-ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.br-ecosystem-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--br-radius);
  padding: 34px 26px;
  text-align: start;
  transition: all 0.25s ease;
}

.br-ecosystem-card:hover {
  border-color: var(--br-green);
  background: rgba(85, 184, 60, 0.07);
}

.br-ecosystem-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--br-green);
  border: 1px solid var(--br-green-line);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 18px;
}

.br-ecosystem-card h3 {
  color: #fff;
  font-family: var(--br-font);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 12px;
}

.br-ecosystem-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
}

.br-ecosystem-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--br-green);
  font-size: 20px;
  opacity: 0.5;
}

@media (max-width: 991px) {
  .br-ecosystem-arrow {
    transform: rotate(90deg);
  }
}

/* -------------------------------------------------------------------
   8. Trusted-by / references strip (new — text based, no imagery needed)
------------------------------------------------------------------- */
.br-trustedby {
  background: var(--br-white);
  border-top: 1px solid var(--br-border-soft);
  border-bottom: 1px solid var(--br-border-soft);
  padding: 56px 0;
}

.br-trustedby__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.br-pill {
  border: 1px solid var(--br-border);
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--br-ink);
  background: var(--br-green-pale);
}

@media (max-width: 768px) {
  .br-trustedby__pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth; /* حركة انسيابية ملساء عند الانتقال */
    gap: 12px;
    
    /* إخفاء شريط السكرول */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .br-trustedby__pills::-webkit-scrollbar {
    display: none;
  }

  .br-pill {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.owl-nav {
  display: none !important;
}
/* -------------------------------------------------------------------
   9. Company overview / about teaser (reskin)
------------------------------------------------------------------- */
.company-overview {
  background: var(--br-white);
  padding: 100px 0;
}

.company-overview__card {
  background: linear-gradient(135deg, var(--br-forest-900), var(--br-black));
  border-radius: 22px;
  padding: 60px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.company-overview__badge {
  /* color: var(--br-green); */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.company-overview__title {
  color: #fff;
  font-family: var(--br-font);
  font-weight: 800;
  font-size: 30px;
  margin-bottom: 18px;
  /* max-width: 620px; */
}

.company-overview__text {
  color: rgba(255, 255, 255, 0.66);
  /* max-width: 640px; */
  line-height: 1.75;
}

.counter-one__list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 0;
  margin: 36px 0;
}

.counter-one__single {
  display: flex;
  align-items: center;
  gap: 14px;
}

.counter-one__icon img {
  width: 44px;
  height: 44px;
}

.count-text {
  color: var(--br-green);
  font-family: var(--br-font);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 2px;
}

.counter-one__text {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

/* -------------------------------------------------------------------
   10. Certifications / standards strip (new)
------------------------------------------------------------------- */
.br-certs {
  background: var(--br-green-pale);
  padding: 52px 0;
}

.br-certs__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.br-cert-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--br-white);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-sm);
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--br-ink);
}

.br-cert-chip i {
  color: var(--br-green);
}
@media (max-width: 768px) {
  .br-certs__row {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    cursor: grab; /* شكل المؤشر ليدل على إمكانية السحب */
    
    /* إخفاء شريط السكرول */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .br-certs__row:active {
    cursor: grabbing;
  }

  .br-certs__row::-webkit-scrollbar {
    display: none;
  }

  .br-cert-chip {
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none; /* يمنع تحديد النص أثناء سحب الشاشة */
  }
}

/* -------------------------------------------------------------------
   11. Testimonials (reskin)
------------------------------------------------------------------- */
.testimonials-carousel {
  background: var(--br-white);
  padding: 100px 0;
}

.testimonials-carousel__bg {
  display: none;
}

/* -------------------------------------------------------------------
   12. FAQ (reskin — ids/classes kept for faq.js / new-faq.js)
------------------------------------------------------------------- */
.faq-page {
  background: var(--br-green-pale);
  padding: 100px 0;
}

.faq-page input#faqSearch {
  border: 1px solid var(--br-border);
  border-radius: 100px;
  background: var(--br-white);
}

.faq-accordion .faq-item,
.faq-accordion .accordion-item {
  border: 1px solid var(--br-border) !important;
  border-radius: var(--br-radius-sm) !important;
  background: var(--br-white);
  margin-bottom: 12px;
  overflow: hidden;
}

/* -------------------------------------------------------------------
   13. Contact section (reskin — form ids kept for contact.js)
------------------------------------------------------------------- */
.contact-pro {
  background: linear-gradient(180deg, var(--br-black) 0%, var(--br-forest-900) 100%);
  padding: 100px 0;
  position: relative;
}

.contact-form-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--br-radius);
  padding: 40px;
}

.contact-form-box input,
.contact-form-box textarea,
.contact-form-box select {
  background: rgb(0 0 0 / 34%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  border-radius: var(--br-radius-sm) !important;
}

.contact-form-box #sendMessage.thm-btn {
  background: var(--br-green);
  border-radius: 100px;
  font-weight: 700;
}

.instant-help {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.instant-help p {
  color: rgba(255, 255, 255, 0.55);
  width: 100%;
  font-size: 13px;
}

.instant-help .thm-btn {
  border-radius: 100px;
  padding: 11px 22px;
  font-size: 14px;
}

.instant-help .thm-btn--alt {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* -------------------------------------------------------------------
   14. Footer (reskin — links/structure preserved)
------------------------------------------------------------------- */
.site-footer {
  background: var(--br-black);
}

.site-footer__shape-1 {
  display: none;
}

.footer-widget__title {
  color: var(--br-green);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 10px;
}

.footer-widget__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--br-green);
}

.footer-widget__about-text,
.footer-widget__find-text {
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  line-height: 1.75;
}

.footer-widget__Explore-list a {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 14px;
  line-height: 2.15;
  transition: color 0.2s ease;
}

.footer-widget__Explore-list a:hover {
  color: var(--br-green) !important;
}

.footer-widget__Explore-list li.br-footer-new a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
}

.site-footer__social a {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}

.site-footer__social a:hover {
  background: var(--br-green);
  border-color: var(--br-green);
}

.footer-widget__Contact-list .icon {
  background: rgba(85, 184, 60, 0.14);
  color: var(--br-green);
}

.footer-widget__Contact-list a,
.footer-widget__Contact-list p {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__bottom-text {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

.site-footer__bottom-text a {
  color: var(--br-green);
}

/* -------------------------------------------------------------------
   15. Inner-page header (about / contact / faq / services / new pages)
------------------------------------------------------------------- */
.page-header {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  background: radial-gradient(120% 160% at 85% -10%, #1c3a22 0%, var(--br-forest-900) 45%, var(--br-black) 100%);
  padding: 170px 0 60px;
  overflow: hidden;
}

.page-header-bg {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-size: cover;
  background-position: center;
  mix-blend-mode: luminosity;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(9, 12, 9, 0.9) 10%, rgba(9, 12, 9, 0.45) 100%);
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.thm-breadcrumb {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.thm-breadcrumb li,
.thm-breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
}

.thm-breadcrumb li:last-child {
  color: var(--br-green);
}

.page-header h1 {
  color: #fff;
  font-family: var(--br-font);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  /* max-width: 720px; */
}

.page-header__sub {
  color: rgba(255, 255, 255, 0.62);
  font-size: 16px;
  max-width: 620px;
  margin-top: 14px;
  line-height: 1.7;
}

/* -------------------------------------------------------------------
   16. Reusable content components for detail / new pages
------------------------------------------------------------------- */

/* process tracker */
.br-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
  counter-reset: br-step;
}

.br-process__step {
  position: relative;
  padding: 26px 22px;
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  background: var(--br-white);
}

.br-process__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--br-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 16px;
}

.br-process__step h4 {
  font-family: var(--br-font);
  font-weight: 700;
  color: var(--br-ink);
  font-size: 15.5px;
  margin-bottom: 8px;
}

.br-process__step p {
  color: var(--br-body-soft);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

/* problem / inspection / solution card (diagnostic guide) */
.br-diag-card {
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--br-white);
}

.br-diag-card__top {
  background: var(--br-green-pale);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--br-border);
}

.br-diag-card__top i {
  color: var(--br-green);
  font-size: 22px;
}

.br-diag-card__top h3 {
  font-family: var(--br-font);
  font-weight: 800;
  font-size: 18px;
  color: var(--br-ink);
  margin: 0;
}

.br-diag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.br-diag-row + .br-diag-row {
  border-top: 1px solid var(--br-border-soft);
}

.br-diag-cell {
  padding: 22px 24px;
}

.br-diag-cell + .br-diag-cell {
  border-inline-start: 1px solid var(--br-border-soft);
}

.br-diag-cell__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--br-body-soft);
  margin-bottom: 8px;
}

.br-diag-cell--problem .br-diag-cell__label {
  color: #b5551f;
}

.br-diag-cell--solution .br-diag-cell__label {
  color: var(--br-green-deep);
}

.br-diag-cell h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--br-ink);
  margin-bottom: 6px;
}

.br-diag-cell p {
  font-size: 13.5px;
  color: var(--br-body);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 767px) {
  .br-diag-row {
    grid-template-columns: 1fr;
  }
  .br-diag-cell + .br-diag-cell {
    border-inline-start: none;
    border-top: 1px solid var(--br-border-soft);
  }
}

/* condition gauge */
.br-gauge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.br-gauge svg {
  width: 132px;
  height: 132px;
}

.br-gauge__value {
  font-family: var(--br-font);
  font-weight: 800;
  font-size: 30px;
  fill: var(--br-ink);
}

.br-gauge__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--br-green-deep);
}

/* stat block */
.br-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}

.br-stat {
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-sm);
  padding: 20px;
  text-align: center;
  background: var(--br-white);
}

.br-stat strong {
  display: block;
  font-family: var(--br-font);
  font-weight: 800;
  font-size: 26px;
  color: var(--br-green-deep);
}

.br-stat span {
  font-size: 12px;
  color: var(--br-body-soft);
}

/* feature checklist */
.br-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
}

.br-checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--br-body);
  line-height: 1.55;
}

.br-checklist li i {
  color: var(--br-green);
  margin-top: 3px;
  flex: none;
}

/* spec / comparison table */
.br-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
}

table.br-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

table.br-table th {
  background: var(--br-forest-900);
  color: #fff;
  text-align: start;
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 14px 20px;
}

table.br-table td {
  padding: 14px 20px;
  border-top: 1px solid var(--br-border-soft);
  font-size: 14px;
  color: var(--br-body);
}

table.br-table tr:nth-child(even) td {
  background: var(--br-green-pale);
}

/* two column feature/media block */
.br-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 991px) {
  .br-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.br-split-panel {
  background: linear-gradient(150deg, var(--br-forest-900), var(--br-black));
  border-radius: 20px;
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.br-split-panel h4 {
  color: var(--br-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.br-split-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.br-split-panel li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}

.br-split-panel li:last-child {
  border-bottom: none;
}

.br-split-panel li strong {
  color: #fff;
  font-weight: 700;
}

/* CTA band (used at the end of every new/detail page) */
.cta-one {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(120deg, var(--br-green-deep), var(--br-green-mid));
  overflow: hidden;
  text-align: center;
}

.cta-one::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
}

.cta-one .container {
  position: relative;
  z-index: 1;
}

.cta-one h2 {
  color: #fff;
  font-family: var(--br-font);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 14px;
}

.cta-one p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto 30px;
}

.cta-one .br-btn--solid {
  background: #fff;
  color: var(--br-green-deep) !important;
  box-shadow: none;
}

.cta-one .br-btn--solid:hover {
  background: var(--br-black);
  color: #fff !important;
}

.cta-one .br-btn--ghost-dark:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* breadcrumb strip used at top of long detail pages, jump-nav */
.br-jumpnav {
  background: var(--br-white);
  border-bottom: 1px solid var(--br-border-soft);
  position: sticky;
  top: 0;
  z-index: 20;
}

.br-jumpnav__inner {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding: 16px 0;
}

.br-jumpnav__inner a {
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--br-body-soft) !important;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.br-jumpnav__inner a:hover {
  color: var(--br-green-deep) !important;
  border-color: var(--br-green);
}

/* related-page card grid, used at bottom of new pages */
.br-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.br-related-card {
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  padding: 24px;
  background: var(--br-white);
  transition: all 0.2s ease;
}

.br-related-card:hover {
  border-color: var(--br-green);
  box-shadow: var(--br-shadow-sm);
}

.br-related-card span.br-eyebrow {
  margin-bottom: 8px;
}

.br-related-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--br-ink);
  margin-bottom: 8px;
}

.br-related-card p {
  font-size: 13px;
  color: var(--br-body-soft);
  margin-bottom: 0;
}

/* -------------------------------------------------------------------
   19. About page — Vision/Mission, Managers, Values orbit, Engineers
------------------------------------------------------------------- */
.vision-mission {
  background: var(--br-white);
  padding: 100px 0 70px;
}

.vm-box {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 30px 0;
  border-bottom: 1px solid var(--br-border-soft);
}

.vm-box:last-child {
  border-bottom: none;
}

.vm-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--br-green-pale);
  border: 1px solid var(--br-green-line);
  color: var(--br-green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.vm-content p {
  color: var(--br-body);
  line-height: 1.75;
}

.managers-speech {
  background: var(--br-green-pale);
}

.ms-slide {
  display: flex;
  gap: 30px;
  align-items: center;
  background: var(--br-white);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  padding: 30px;
}

.ms-img-box img {
  /* width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--br-green-pale); */
}

.ms-quote-icon {
  color: var(--br-green);
  opacity: 0.5;
  font-size: 20px;
  margin-bottom: 8px;
}

.ms-text {
  color: var(--br-body);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 14px;
}

.ms-name {
  color: var(--br-ink);
  font-weight: 700;
  margin-bottom: 2px;
}

.ms-role {
  color: var(--br-green-deep);
  font-size: 13px;
  font-weight: 600;
}

.value-two {
  background: linear-gradient(180deg, var(--br-black) 0%, var(--br-forest-900) 100%);
  padding: 100px 0;
}

.value-two__right-content .value-two__text {
  color: rgba(255, 255, 255, 0.6);
}

.orbit-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.orbit-item i {
  color: var(--br-green);
}

.center-value {
  background: var(--br-green);
  color: #fff;
}

.engineers-holo {
  background: var(--br-white);
}

.department-title {
  color: var(--br-ink);
  font-family: var(--br-font);
  font-weight: 700;
}

.holo-card {
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  overflow: hidden;
  background: var(--br-white);
  transition: all 0.25s ease;
  position: relative;
}

.holo-card:hover {
  border-color: var(--br-green);
  box-shadow: var(--br-shadow-sm);
}

.corner-badge {
  background: var(--br-green) !important;
}

.holo-name {
  color: var(--br-ink);
  font-weight: 700;
}

.holo-title {
  color: var(--br-green-deep);
  font-size: 13px;
}

.holo-line {
  background: var(--br-border);
}

.info-header p {
  color: var(--br-ink);
  font-weight: 700;
}

.info-content ul.caret-arrow li,
.info-content ul.check li {
  color: var(--br-body);
}

.info-content ul.check li::marker,
.info-content ul.check li i {
  color: var(--br-green);
}

.show-more-btn {
  background: var(--br-green-pale);
  color: var(--br-green-deep);
  border: 1px solid var(--br-green-line);
  border-radius: 100px;
}

.show-more-btn:hover {
  background: var(--br-green);
  color: #fff;
}

/* Branches (Team Two, reused on About + Contact) */
/* .team-two {
  background: var(--br-green-pale);
  padding: 100px 0;
}

.team-two__single {
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  overflow: hidden;
  background: var(--br-white);
}

.team-two__name a,
.team-two__hover-name a {
  color: var(--br-ink) !important;
  font-weight: 700;
}

.team-two__sub-title a,
.team-two__hover-sub-title a {
  color: var(--br-body-soft) !important;
}

.team-two__hover {
  background: linear-gradient(180deg, rgba(9, 12, 9, 0.2), rgba(9, 12, 9, 0.94));
}

.team-two__social a {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.team-two__social a:hover {
  background: var(--br-green);
} */

/* -------------------------------------------------------------------
   20. Contact page
------------------------------------------------------------------- */
.contact-two {
  background: var(--br-white);
  padding: 100px 0;
}

.contact-two__text-1 {
  color: var(--br-body);
}

.contact-two__list .icon {
  background: var(--br-green-pale);
  border-radius: 12px;
}

.contact-two__list .content p {
  color: var(--br-body-soft);
}

.contact-two__list .content h3 a,
.contact-two__list .content h4 {
  color: var(--br-ink);
}

.contact-three__form-box {
  background: var(--br-green-pale);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  padding: 34px;
}

.contact-form__input-box input,
.contact-form__input-box textarea,
.contact-form__input-box select {
  background: var(--br-white) !important;
  border: 1px solid var(--br-border) !important;
  border-radius: var(--br-radius-sm) !important;
}

.contact-three__form .thm-btn {
  background: var(--br-green);
}

/* -------------------------------------------------------------------
   21. Service detail pages (apartment-details) + inline lead form
------------------------------------------------------------------- */
.apartment-details {
  background: var(--br-white);
  padding: 70px 0;
}

.apartment-details__content-box h2,
.apartment-details__content-box h3 {
  color: var(--br-ink);
  font-family: var(--br-font);
  font-weight: 700;
}

.apartment-details__content-box p,
.apartment-details__content-box li {
  color: var(--br-body);
  line-height: 1.75;
}

.apartment-details__content-box ul.caret-arrow li::before {
  color: var(--br-green);
}

.apartment-details__content-box a:not(.thm-btn) {
  color: var(--br-green-deep);
  text-decoration: underline;
}

.apartment-details__list-box {
  background: rgba(9, 12, 9, 0.72);
  backdrop-filter: blur(6px);
}

.apartment-details__list-box p {
  color: #fff !important;
}

.apartment-sidebar__form,
.contact-form-shadow,
.sidebar-form-box {
  background: var(--br-green-pale);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
}

.apartment-details input,
.apartment-details textarea,
.apartment-details select {
  border: 1px solid var(--br-border) !important;
  border-radius: var(--br-radius-sm) !important;
  background: var(--br-white) !important;
}

.service-details__sidebar-service-list li a {
  color: var(--br-body) !important;
  border-bottom: 1px solid var(--br-border-soft);
}

.service-details__sidebar-service-list li a:hover,
.service-details__sidebar-service-list li.active a {
  color: var(--br-green-deep) !important;
}

.news-details__social-list a {
  background: var(--br-green-pale);
  color: var(--br-green-deep);
}

.news-details__social-list a:hover {
  background: var(--br-green);
  color: #fff;
}

/* -------------------------------------------------------------------
   22. Blog listing (news-page / news-one) + blog post (news-details)
------------------------------------------------------------------- */
/* .news-page {
  background: var(--br-green-pale);
  padding: 90px 0;
}

.news-one__single {
  background: var(--br-white);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  overflow: hidden;
}

.news-one__date {
  background: var(--br-green) !important;
  color: #fff;
}

.news-one__title a {
  color: var(--br-ink) !important;
}

.news-one__title a:hover {
  color: var(--br-green-deep) !important;
}

.news-one__author {
  color: var(--br-body-soft);
}

.news-one__more {
  color: var(--br-green-deep) !important;
  font-weight: 700;
}

.news-details {
  background: var(--br-white);
  padding: 70px 0;
}

.news-details__date {
  background: var(--br-green) !important;
}

.news-details__title {
  color: var(--br-ink);
  font-family: var(--br-font);
  font-weight: 800;
}

.news-details__text-1 {
  color: var(--br-ink);
  font-weight: 600;
  line-height: 1.75;
}

.news-details__text-2 {
  color: var(--br-body);
  line-height: 1.75;
} */

/* -------------------------------------------------------------------
   17. Responsive
------------------------------------------------------------------- */
@media (max-width: 991px) {
  .br-section {
    padding: 70px 0;
  }
  .company-overview__card {
    padding: 40px 28px;
  }
  .br-diag-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .hero-image-banner {
    min-height: auto;
    padding: 160px 0 80px;
  }
  .br-hero-trust {
    gap: 22px;
  }
  .br-head-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .vm-box,
  .ms-slide {
    flex-direction: column;
  }
}

/* -------------------------------------------------------------------
   18. Accessibility
------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--br-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}



/* تنسيق هيدر الكارد وتهيئته للنقر */
.br-service-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.br-service-card__arrow {
  margin-right: auto; /* في بيئة RTL يدفع السهم لجهة اليسار */
  margin-left: 0;   /* مسافة بسيطة عن حافة الكارد اليسرى */
  font-size: 1rem;
  transition: transform 0.3s ease;
}
html[lang="en"] .br-service-card__arrow {
  margin-left: auto; 
  margin-right: 0;   
  font-size: 1rem;
  transition: transform 0.3s ease;
}

/* إخفاء المحتوى القابل للطي افتراضيًا */
.br-service-card__collapsible {
  max-height: 0;
  display: none;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease, margin 0.3s ease;
}

/* حالة الفتح */
.br-service-card.is-open .br-service-card__collapsible {
  max-height: 1000px; /* القيمة أقصى ارتفاع متوقع */
  opacity: 1;
  display: block;
  margin-top: 15px;
  transition: max-height 0.4s cubic-bezier(1, 0, 1, 0), opacity 0.3s ease, margin 0.3s ease;
}

/* تدويـر السهم عند الفتح */
.br-service-card.is-open .br-service-card__arrow {
  transform: rotate(180deg);
}
@media (max-width: 992px) {
  .br-services-grid {
    column-count: 2;
  }
}

@media (max-width: 576px) {
  .br-services-grid {
    column-count: 1;
  }
}








/* تنسيقات شبكة الخدمات في الشاشات الكبيرة */
@media (min-width: 992px) {
  .br-services-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* تتوزع إلى عمودين داخل العمود الرئيسي أو 4 حسب المساحة المتاحة */
    gap: 20px;
    align-items: start;
  }
  
  .br-accordion-header {
    font-size: 16px;
    font-weight: 700;
    color: #ebebeb;
    margin-bottom: 10px;
  }
  
  .br-accordion-icon {
    display: none; /* إخفاء الأيقونة في الشاشات الكبيرة */
  }
}

/* التكيف مع الموبايل والأجهزة الصغيرة */
@media (max-width: 991px) {
  .br-accordion-header {
    display: flex;
    color: #ebebeb;
    font-weight: 400;
    font-size: 16px;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .br-accordion-icon {
    display: inline-block;
    font-size: 16px;
    color: #64b200; /* اللون المميز لموقعك */
    transition: transform 0.3s ease;
  }

  .br-accordion-content {
    display: none;
    padding-top: 10px;
  }

  .br-accordion-item.is-open .br-accordion-content {
    display: block;
  }

  .br-accordion-item.is-open .br-accordion-icon {
    transform: rotate(45deg);
  }
}


.br-services-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start; /* keeps cards from stretching to row height */
}

.br-service-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--br-radius);
  padding: 30px 26px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  position: relative;
  /* remove: break-inside, display: inline-block, width: 100%, margin-bottom, vertical-align */
}

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

@media (max-width: 576px) {
  .br-services-grid {
    grid-template-columns: 1fr;
  }
}



.br-services-grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.br-services-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
}

.br-service-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--br-radius);
  padding: 30px 26px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  position: relative;
  /* removed: break-inside, display:inline-block, width:100%, margin-bottom, vertical-align, flex-direction (leftover typo) */
}

.br-service-card:hover {
  border-color: var(--br-green);
  background: rgba(85, 184, 60, 0.06);
  transform: translateY(-4px);
}

/* smooth open/close, no more max-height guesswork */
.br-service-card__collapsible {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

.br-service-card__collapsible-inner {
  overflow: hidden;
  min-height: 0;
}

.br-service-card.is-open .br-service-card__collapsible {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 15px;
}

.br-service-card__arrow {
  transition: transform 0.3s ease;
}

.br-service-card.is-open .br-service-card__arrow {
  transform: rotate(180deg);
}

/* column-count no longer used — column count is now set in JS at the same breakpoints */