/* =========================================================================
   FAISAL PREMIUM 2026 — About (عن الشركة) page — premium corporate-fintech
   Two-column split sections, floating arrow animation, glass feature blocks,
   SVG icons, trust indicators. Scoped to .faisal-page-content. RTL-safe.
   ========================================================================= */

.faisal-page-content .about-hero{text-align:center}

/* ---- Two-column split ---- */
.faisal-page-content .about-split__grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;
}
.faisal-page-content .about-split__grid--reverse{grid-template-columns:.9fr 1.1fr}
.faisal-page-content .about-split__grid--reverse .about-split__media{order:-1}
@media(max-width:900px){
  .faisal-page-content .about-split__grid,
  .faisal-page-content .about-split__grid--reverse{grid-template-columns:1fr;gap:2.25rem}
  .faisal-page-content .about-split__grid--reverse .about-split__media{order:0}
}

.faisal-page-content .about-split__content{text-align:start}
[dir="rtl"] .faisal-page-content .about-split__content{text-align:right}
.faisal-page-content .about-split__content > p{color:var(--text-muted,#647067);line-height:1.95;margin:0 0 1.1rem;font-size:1rem}
.faisal-page-content .about-split__content strong{color:var(--text,#17231D)}

/* ---- License badges ---- */
.faisal-page-content .about-badges{display:flex;flex-wrap:wrap;gap:.7rem;margin:.6rem 0 1.25rem}
.faisal-page-content .about-badge{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;color:var(--primary,#006837);
  background:rgba(0,104,55,.07);border:1px solid rgba(0,104,55,.18);border-radius:999px;padding:.5rem 1rem;
  transition:background .25s ease,transform .25s ease;
}
.faisal-page-content .about-badge:hover{background:rgba(0,104,55,.13);transform:translateY(-2px);color:var(--primary,#006837)}
.faisal-page-content .about-badge .faisal-ico{width:17px;height:17px}

/* ---- Feature blocks (glass, icon + text) ---- */
.faisal-page-content .about-feature{
  display:flex;align-items:flex-start;gap:1rem;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(247,244,239,.7));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(226,216,202,.8);border-radius:16px;padding:1.2rem 1.3rem;margin-bottom:1rem;
  transition:transform .35s cubic-bezier(.4,0,.2,1),border-color .35s ease,box-shadow .35s ease;
}
@media (hover:hover) and (pointer:fine){
  .faisal-page-content .about-feature:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.5);box-shadow:0 18px 40px rgba(6,20,16,.1)}
  .faisal-page-content .about-feature:hover .about-feature__icon{transform:scale(1.1) rotate(-5deg);background:linear-gradient(140deg,var(--primary,#006837),var(--primary-light,#008f4a));color:#fff;border-color:transparent}
}
.faisal-page-content .about-feature__icon{
  flex:0 0 auto;width:48px;height:48px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(0,104,55,.14),rgba(0,104,55,.05));
  border:1px solid rgba(0,104,55,.16);color:var(--primary,#006837);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .35s ease,color .35s ease;
}
.faisal-page-content .about-feature__icon .faisal-ico{width:24px;height:24px;background-color:currentColor}
.faisal-page-content .about-feature h3{font-size:1.1rem;font-weight:800;color:var(--text,#17231D);margin:0 0 .35rem}
.faisal-page-content .about-feature p{color:var(--text-muted,#647067);line-height:1.85;margin:0;font-size:.95rem}

/* ---- Mini data table ---- */
.faisal-page-content .about-table{margin:.85rem 0;border:1px solid rgba(226,216,202,.85);border-radius:12px;overflow:hidden}
.faisal-page-content .about-table__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;background:#fff}
.faisal-page-content .about-table__row:nth-child(odd){background:var(--bg-alt,#F7F4EF)}
.faisal-page-content .about-table__row span{color:var(--text-muted,#647067);font-size:.9rem}
.faisal-page-content .about-table__row strong{color:var(--primary,#006837);font-size:.95rem}

/* ---- Media card with image ---- */
.faisal-page-content .about-split__media{position:relative}
.faisal-page-content .about-media-card{
  position:relative;border-radius:22px;overflow:visible;
}
.faisal-page-content .about-media-img{
  width:100%;height:auto;display:block;border-radius:22px;
  border:1px solid rgba(226,216,202,.85);
  box-shadow:0 26px 60px rgba(6,20,16,.16);
  background:#fff;
}

/* ---- Floating gold arrow (GPU-accelerated) ---- */
.faisal-page-content .about-arrow{
  position:absolute;width:clamp(110px,22%,180px);height:auto;
  inset-inline-start:-6%;top:-9%;z-index:2;pointer-events:none;
  filter:drop-shadow(0 14px 24px rgba(201,168,76,.4));
  animation:faisalAboutFloat 5.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes faisalAboutFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-16px,0) rotate(-3deg)}
}
@media(max-width:560px){.faisal-page-content .about-arrow{width:90px;inset-inline-start:auto;inset-inline-end:2%;top:-7%}}
@media (prefers-reduced-motion:reduce){
  .faisal-page-content .about-arrow{animation:none!important}
  .faisal-page-content .about-feature,.faisal-page-content .about-feature__icon,.faisal-page-content .about-badge{transition:none!important}
}

/* =========================================================================
   ABOUT PAGE — hero-gradient background + larger GOLD titles (premium)
   The whole page uses the homepage hero gradient; sections become transparent
   bands; cards turn to dark glass for contrast. Scoped via about-* classes.
   ========================================================================= */
/* Page background = clean white; ONLY the hero keeps the dark premium colors. */
.faisal-page-content:has(.about-hero){
  --hero-1:#061410;--hero-2:#0D2518;--hero-3:#0F1E16;
  background:#ffffff;color:var(--text,#17231D);
}

/* ---- HERO: keep the existing dark premium gradient + gold typography ---- */
.faisal-page-content .about-hero{
  background:linear-gradient(135deg,#061410,#0D2518 55%,#0F1E16)!important;
  color:#fff;
}
.faisal-page-content .about-hero .section__title{
  color:var(--gold,#C9A84C)!important;font-weight:800!important;line-height:1.18!important;
}
.faisal-page-content .about-hero .section__tag{color:var(--gold-light,#f5d169)!important}
.faisal-page-content .about-hero .section__desc,
.faisal-page-content .about-hero p{color:var(--gold-muted,#BFA06A)!important}
.faisal-page-content .about-hero .about-badge{
  background:rgba(201,168,124,.1)!important;border-color:rgba(201,168,124,.3)!important;color:var(--gold,#C9A84C)!important;
}

/* ---- REMAINING SECTIONS: white background, dark text, modern light cards ---- */
.faisal-page-content:has(.about-hero) section:not(.about-hero){background:#ffffff!important}
.faisal-page-content:has(.about-hero) section.about-split:nth-of-type(even){background:#F9FBFA!important}

.faisal-page-content:has(.about-hero) section:not(.about-hero) .section__title{
  color:var(--text,#17231D)!important;font-size:clamp(1.7rem,3.4vw,2.6rem)!important;font-weight:800!important;line-height:1.25!important;
}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .section__tag{
  color:var(--primary,#006837)!important;background:rgba(0,104,55,.08);border:1px solid rgba(0,104,55,.16);border-radius:999px;padding:.35rem .9rem;display:inline-block;
}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .section__desc,
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-split__lead,
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-split__content > p,
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-feature p{color:var(--text-muted,#5a6b62)!important}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-split__content strong,
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-feature h3{color:var(--text,#17231D)!important}

/* Feature blocks → modern white cards with soft shadow + green accent icon. */
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-feature{
  background:#ffffff!important;border:1px solid #E9E3D8!important;border-radius:16px;
  box-shadow:0 8px 24px rgba(6,20,16,.06)!important;
}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-feature__icon{
  background:linear-gradient(140deg,rgba(0,104,55,.14),rgba(0,104,55,.05))!important;
  border-color:rgba(0,104,55,.16)!important;color:var(--primary,#006837)!important;
}
/* License badges + mini table on white. */
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-badge{
  background:rgba(0,104,55,.07)!important;border-color:rgba(0,104,55,.18)!important;color:var(--primary,#006837)!important;
}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-table{border:1px solid #E9E3D8!important;border-radius:14px;overflow:hidden}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-table__row{background:#fff!important}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-table__row:nth-child(odd){background:#F7F4EF!important}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-table__row span{color:var(--text-muted,#647067)!important}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-table__row strong{color:var(--primary,#006837)!important}
.faisal-page-content:has(.about-hero) section:not(.about-hero) .about-media-img{border:1px solid #E9E3D8!important;box-shadow:0 12px 30px rgba(6,20,16,.1)!important}

/* =========================================================================
   ABOUT — compact hero + premium gold section titles + بنك فيصل smart cards
   ========================================================================= */
/* Compact hero: reduced height, vertically-centered content, tidy spacing. */
.faisal-page-content .about-hero{
  min-height:auto!important;padding-block:clamp(2.5rem,5vw,4rem)!important;
  display:flex!important;flex-direction:column;justify-content:center;
}
.faisal-page-content .about-hero .container{display:flex;flex-direction:column;justify-content:center}
/* Hero page title "من نحن" — prominent gold, balanced (not oversized). */
.faisal-page-content:has(.about-hero) .about-hero .section__title{
  font-size:clamp(2.2rem,4.4vw,3.2rem)!important;line-height:1.2!important;font-weight:800!important;
}
/* Company + Bank section titles → smaller, ONE LINE, premium gold gradient. */
.faisal-page-content #about-company-title,
.faisal-page-content #about-bank-title{
  font-size:clamp(1.5rem,3vw,2.15rem)!important;line-height:1.3!important;font-weight:800!important;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(100deg,var(--gold-dark,#a8883d),var(--gold,#C9A84C) 50%,var(--gold-light,#f5d169))!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
  color:var(--gold,#C9A84C)!important;display:inline-block;
}
@media(max-width:560px){
  .faisal-page-content:has(.about-hero) .about-hero .section__title{font-size:clamp(1.9rem,7vw,2.4rem)!important}
  .faisal-page-content #about-company-title,
  .faisal-page-content #about-bank-title{white-space:normal;font-size:clamp(1.3rem,6vw,1.7rem)!important}
}
.faisal-page-content:has(.about-hero) .about-split__lead{
  color:var(--text-muted,#5a6b62)!important;font-size:1.08rem;line-height:1.9;margin:.25rem 0 0;
}

/* ---- Smart cards grid (بنك فيصل) ---- */
.about-cards-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;
}
@media(max-width:980px){.about-cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.about-cards-grid{grid-template-columns:1fr}}
.about-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(201,168,124,.22);border-radius:18px;padding:1.7rem 1.5rem;
  box-shadow:0 14px 34px rgba(0,0,0,.3);overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.about-card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold,#C9A84C),transparent);
  opacity:0;transition:opacity .35s ease;z-index:1;
}
@media (hover:hover) and (pointer:fine){
  .about-card:hover{transform:translateY(-8px);border-color:rgba(201,168,124,.55);box-shadow:0 28px 60px rgba(0,0,0,.45)}
  .about-card:hover::before{opacity:1}
  .about-card:hover .about-card__icon{transform:scale(1.1) rotate(-5deg);background:linear-gradient(140deg,var(--gold,#C9A84C),var(--gold-light,#f5d169));color:var(--dark,#061410)}
}
.about-card__icon{
  width:54px;height:54px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(201,168,124,.2),rgba(201,168,124,.06));
  border:1px solid rgba(201,168,124,.28);color:var(--gold,#C9A84C);margin-bottom:1rem;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .35s ease,color .35s ease;
}
.about-card__icon .faisal-ico{width:26px;height:26px;background-color:currentColor}
.about-card__title{font-size:1.18rem;font-weight:800;color:#fff;margin:0 0 .6rem}
.about-card__text{color:var(--gold-muted,#BFA06A);font-size:.95rem;line-height:1.9;margin:0}
.about-card__text strong{color:var(--gold,#C9A84C);font-weight:700}
@media (prefers-reduced-motion:reduce){.about-card,.about-card__icon{transition:none!important}}

/* =========================================================================
   بنك فيصل SECTION — Islamic-banking visual identity (white/green/gold)
   Faisal Bank style: clean white band, white cards, green accent borders,
   gold highlights, premium banking layout. Overrides the dark about theme
   for THIS section only so it reads as an official banking presentation.
   ========================================================================= */
.faisal-page-content:has(.about-hero) .about-cards-section,
.faisal-page-content .about-cards-section{
  background:linear-gradient(180deg,#ffffff 0%, #f5f9f6 100%)!important;
}
.faisal-page-content .about-cards-section .section__tag{color:var(--primary,#006837)!important;background:rgba(0,104,55,.08);border:1px solid rgba(0,104,55,.16);border-radius:999px;padding:.35rem .9rem;display:inline-block}
.faisal-page-content .about-cards-section .section__title{color:var(--primary-dark,#00552c)!important}
.faisal-page-content .about-cards-section .section__desc{color:var(--text-muted,#647067)!important}

/* Banking white cards with green top accent + gold hover line. */
.faisal-page-content .about-cards-section .about-card{
  background:#ffffff!important;
  border:1px solid var(--border,#E2D8CA)!important;border-top:3px solid var(--primary,#006837)!important;
  box-shadow:0 1px 2px rgba(6,20,16,.04),0 12px 30px rgba(0,104,55,.07)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.faisal-page-content .about-cards-section .about-card::before{
  background:linear-gradient(90deg,transparent,var(--gold,#C9A84C),transparent)!important;
}
@media (hover:hover) and (pointer:fine){
  .faisal-page-content .about-cards-section .about-card:hover{
    border-color:rgba(0,104,55,.4)!important;
    box-shadow:0 8px 18px rgba(6,20,16,.06),0 30px 60px rgba(0,104,55,.14)!important;
  }
}
/* Green icon badge with gold hover. */
.faisal-page-content .about-cards-section .about-card__icon{
  background:linear-gradient(140deg,rgba(0,104,55,.12),rgba(0,104,55,.04))!important;
  border:1px solid rgba(0,104,55,.18)!important;color:var(--primary,#006837)!important;
}
@media (hover:hover) and (pointer:fine){
  .faisal-page-content .about-cards-section .about-card:hover .about-card__icon{
    background:linear-gradient(140deg,var(--primary,#006837),var(--primary-light,#008f4a))!important;color:#fff!important;
  }
}
.faisal-page-content .about-cards-section .about-card__title{color:var(--primary-dark,#00552c)!important}
.faisal-page-content .about-cards-section .about-card__text{color:var(--text-muted,#647067)!important}
.faisal-page-content .about-cards-section .about-card__text strong{color:var(--primary,#006837)!important}