/* ==========================================================
   about.css — About page ONLY  (style.css loads first)
   ==========================================================

   Sections:
   1. Team photo + red bar below
   2. Red statement block
   3. Success in numbers (4 bordered cards)
   4. Our Foundation (founder circle)
   5. Built on belief (3 bordered cards)
   ========================================================== */

/* ── 1. TEAM PHOTO ───────────────────────────────────────── 
   Screenshot (about.jpg):
   · White sides visible (photo doesn't bleed to edges)
   · Photo is B&W, subject floats on white bg with red area
     covering the lower ~40% of the section as a background
   · Photo itself is transparent/cut-out style sitting above red
   ──────────────────────────────────────────────────────── */
.ab-team {
  position: relative;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}
/* Red fills the lower portion as background */
.ab-team::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 44%;
  background: var(--red);
  z-index: 0;
}
.ab-team-img-wrap {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 900px;
  width: 100%;
  padding-inline: var(--px);
}
.ab-team-img-wrap img {
  width: 100%;
  display: block;
  filter: grayscale(100%);
}

/* ── 2. RED STATEMENT ─────────────────────────────────────── 
   Screenshot (about.jpg bottom): solid red bg, white centred
   italic-weight text paragraph.
   ──────────────────────────────────────────────────────── */
.ab-statement {
  background: var(--red);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.ab-statement p {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  font-style: italic;
  color: var(--white);
  max-width: 726px;
  margin-inline: auto;
  padding-inline: var(--px);
}

/* MOBILE FIX */
@media (max-width: 600px) {
  section.ab-statement p {
    font-size: 20px;
    line-height: 30px;
  }
}


/* ── 3. SUCCESS IN NUMBERS ───────────────────────────────── 
   Screenshot (services-4.jpg):
   · "Our success in numbers" title centred
   · 4 cards in a row, each with thin border all sides
   · Large red number (e.g. "14+") bold
   · Small grey label below (e.g. "Years of experience")
   · No icon, no bg fill — just border + number + label
   ──────────────────────────────────────────────────────── */
.ab-numbers { background: var(--white); }
.ab-numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.ab-num-card {
  border: 1px solid var(--border);
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ab-num-val {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  letter-spacing: -.01em;
}
.ab-num-label {
  font-size: 20px;
  color: var(--grey-text);
}

/* ── 4. OUR FOUNDATION ───────────────────────────────────── 
   Screenshot (services-5.jpg):
   · "Our Foundation" title centred
   · Founder photo in a circle, inside a red solid circle (background)
   · "VARUN BHATT" bold uppercase below
   · "CEO of VB event" grey below that
   · Large " " double-quote icon centred
   · Bio paragraph centred, max-width
   ──────────────────────────────────────────────────────── */
.ab-foundation { background: var(--white); text-align: center; }
.ab-founder-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.5rem;
}
/* Red circle background for photo */
.ab-founder-circle {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 300 / 338;
  background: none;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.ab-founder-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ab-founder-name {
  font-size: 20px;
  font-weight: 700;
  margin-top: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
}
.ab-founder-role {
  font-size: 20px;
  color: var(--grey-text);
}
/* Double-quote icon */
.ab-quote-mark {
  font-size: 80px;
  font-weight: 700;
  color: var(--black);
  font-family: 'Figtree', sans-serif;
  line-height: 0;
  margin-top: 92px;
  margin-bottom: 32px;
  display: inline-block;
}
.ab-founder-bio {
  font-size: 20px;
  color: var(--black);
  line-height: 1.75;
  max-width: 692px;
  margin-inline: auto;
  padding-inline: var(--px);
  text-align: center;
  font-weight: 600;
}

/* ── 5. BUILT ON BELIEF ──────────────────────────────────── 
   Screenshot (services-6.jpg):
   · "Built on belief" title centred
   · 3 bordered cards — thin border, white bg
   · Icon top-LEFT inside card (no circle, just icon ~1.6rem)
   · Generous gap below icon, then "Our Vision" bold
   · Body text below
   ──────────────────────────────────────────────────────── */
.ab-beliefs { background: var(--white); }
.ab-beliefs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  max-width: 1054px;
  margin-left: auto;
  margin-right: auto;
}
.ab-belief-card {
  border: 1px solid var(--border);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.ab-belief-icon {
  font-size: 1.5rem;
  color: var(--black);
  line-height: 1;
  margin-bottom: 48px;
}
.ab-belief-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 18px;
}
.ab-belief-body {
  font-size: 20px;
  font-weight: 500;
  color: var(--black);
  line-height: 36px;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:760px){

.ab-beliefs-grid{
  grid-template-columns:1fr;
}

}

@media (max-width: 480px) {

  .ab-statement p {
  font-size: 20px;
  line-height: 30px;
}


.ab-numbers-grid{
  grid-template-columns:1fr 1fr;
}

}