/* ============================================================
   CAWFA — About page styles (dark corporate + red accents)
   Works with or without Bootstrap; uses Bootstrap icons if loaded.
============================================================ */
:root{
  --about-bg1:#0b0b0b; 
  --about-bg2:#141414;
  --about-bd:rgba(255,255,255,.06);
  --about-tx:#fff; 
  --about-dim:rgba(255,255,255,.78);
  --about-red:#D90404;
}

/* ------------------------------------------------------------
   GLOBAL LAYOUT
------------------------------------------------------------ */

.about-wrap{
  background: linear-gradient(180deg,var(--about-bg1) 0%, var(--about-bg2) 100%);
  color: var(--about-tx);
  min-height: 100vh;
}

/* ------------------------------------------------------------
   PAGE HEADER
------------------------------------------------------------ */

.about-header .about-kicker{
  font-size:.85rem; 
  letter-spacing:.08em; 
  text-transform:uppercase;
  color:var(--about-dim);
  display:inline-block; 
  border:1px solid var(--about-bd);
  padding:.25rem .6rem; 
  border-radius:999px;
}

.about-title{ 
  font-weight:800; 
  font-size:2rem; 
  color:#fff;
}

.about-divider{
  width:72px; 
  height:3px; 
  background:var(--about-red);
  margin-inline:auto; 
  border-radius:3px;
}

.about-subtitle{ 
  max-width:920px; 
  margin:0 auto; 
  color:var(--about-dim);
}

/* ------------------------------------------------------------
   CARD STRUCTURE
------------------------------------------------------------ */

.about-card{
  background:#111; 
  border:1px solid var(--about-bd);
  border-radius:14px; 
  padding:18px 20px;
  box-shadow:0 0 16px rgba(0,0,0,.45);
}

.about-card.gradient{
  background: linear-gradient(145deg, #171717, #0e0e0e);
  border:1px solid var(--about-bd);
}

/* --- Business Model: enhanced corporate card --- */
.about-card--bm{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(217,4,4,.38) 0, rgba(217,4,4,0) 55%),
    linear-gradient(150deg, #181818, #0b0b0b);
  border:1px solid rgba(217,4,4,.6);
  box-shadow:
    0 0 0 1px rgba(217,4,4,.28),
    0 18px 40px rgba(0,0,0,.75);
}

.about-card--bm::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(217,4,4,.35), transparent 40%, rgba(217,4,4,.35));
  opacity:.18;
  pointer-events:none;
}

.about-card--bm > *{
  position:relative;
}

/* ------------------------------------------------------------
   HEADINGS
------------------------------------------------------------ */

.about-h2{
  font-weight:800; 
  font-size:1.35rem; 
  display:flex; 
  align-items:center; 
  gap:.6rem;
  color:#fff;
}

.about-h2 i,
.about-h2 .bi{
  color:var(--about-red);
  font-size:1.1rem;
}

.about-h3{
  font-weight:700; 
  font-size:1rem; 
  color:#fff;
}

.about-card--bm .about-h3{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.9rem;
  color:var(--about-red);
}

.about-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--about-dim);
}

/* ------------------------------------------------------------
   BULLETS & STEPS
------------------------------------------------------------ */

.about-bullets{
  margin:0; 
  padding-left:1.3rem; 
  list-style:disc;
}

.about-bullets li{
  margin:.35rem 0; 
  color:#fff;
}

.about-bullets li::marker{
  color:var(--about-red);
}

.about-bullets .text-dim{
  color:var(--about-dim);
}

.about-steps{
  counter-reset: stp; 
  list-style:none; 
  padding:0; 
  margin:0;
}

.about-steps li{
  position:relative; 
  padding-left:44px; 
  margin:.75rem 0; 
  color:#fff;
}

.about-steps li::before{
  counter-increment: stp; 
  content: counter(stp);
  position:absolute; left:0; top:0;
  width:30px; height:30px;
  border-radius:8px; 
  background:var(--about-red); 
  color:#fff;
  display:grid; 
  place-items:center; 
  font-weight:700;
}

.about-step-sub{
  display:block;
  color:var(--about-dim);
  margin-top:2px;
  font-size:.9rem;
}

/* ------------------------------------------------------------
   CTA BUTTONS
------------------------------------------------------------ */

.about-ctas{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:.6rem; 
}

.about-ctas .about-btn{
  border-radius:12px; 
  padding:.6rem 1.2rem;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:.45rem;
  font-weight:500;
  transition:.2s ease;
}

/* Primary red button */
.btn-about-primary{
  background:linear-gradient(135deg, #D90404, #730707);
  border:none;
  color:#fff;
}

.btn-about-primary:hover{
  opacity:.92;
  color:#fff;
}

/* Outline button - no white hover background */
.about-ctas .btn-outline-light{ 
  border-color:var(--about-bd);
  color:#fff;
  background:transparent;
  transition:.2s ease;
}

.about-ctas .btn-outline-light:hover{
  border-color:var(--about-red);
  background:rgba(255,255,255,.04);
  color:#fff !important;
}

/* ------------------------------------------------------------
   UTILITIES
------------------------------------------------------------ */

.text-white-50{ 
  color:rgba(255,255,255,.65)!important; 
}

.about-wrap .bi{
  vertical-align:-.1em;
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 575.98px){

  .about-title{ font-size:1.6rem; }
  .about-h2{ font-size:1.15rem; }
  .about-card,
  .about-card--bm{ padding:14px; }

  .about-steps li{ padding-left:40px; }
  .about-steps li::before{ width:28px; height:28px; }

  /* MOBILE: CTA buttons full-width block */
  .about-ctas{
    flex-direction:column;
  }

  .about-ctas .about-btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}