/* ===== About: ILF at a Glance ===== */
body{
      font-family: "Roboto Condensed", "Open Sans Condensed", Arial, sans-serif;
}
.about-wrap{ padding: 28px 56px; color:#19324a; }
.crumbs{ font-size:.95rem; color:#6c7a89; margin-bottom: 16px; }
.crumbs a{ color:#0f5fa8; text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs .sep{ margin:0 .4rem; color:#9aa8b6; }

.about-title{
  font-weight:900; font-size: clamp(26px, 3.2vw, 38px);
  line-height:1.2; margin: 0 0 16px;
}

/* Left paragraphs */
.about-lead p{
  color:#24455f; line-height:1.7; margin-bottom: 1rem;
}

/* Right metrics column */
.metrics .num{
  font-weight:900; font-size: clamp(26px, 4.5vw, 42px); color:#1c3f66;
  letter-spacing:.3px; white-space:nowrap;
}
.metrics .label{
  display:block; margin-top:2px; color:#6a7b8e; font-weight:700;
  font-size: clamp(13px, 1.4vw, 15px);
}
.metrics .item{ margin-bottom: 18px; }

/* Bullet list (blue square + thin divider like screenshot) */
.bullet-list{ list-style:none; padding:0; margin: 18px 0 24px; }
.bullet-list li{
  display:flex; gap:12px; align-items:flex-start; padding:10px 0;
  border-top: 1px solid #e6eef6;
}
.bullet-list li:first-child{ border-top:0; }
.b-dot{ width:10px; height:10px; margin-top:.45rem; background:#1d5a93; border-radius:2px; }
.b-text{ color:#2a4a66; }

/* CEO image card at right under metrics */
.ceo-card{ border:1px solid #e6edf5; border-radius:8px; overflow:hidden; background:#fff; }
.ceo-card img{ display:block; width:100%; height:auto; }
.ceo-cap{ font-size:.85rem; color:#8b9aab; padding:.45rem .75rem; }

/* Downloads block */
.downloads h5{ font-weight:900; color:#1a3f64; margin: 18px 0 10px; }
.dl-item{ display:flex; align-items:center; gap:.55rem; padding:.25rem 0; }
.dl-item i{ color:#0f5fa8; }
.dl-item a{ font-weight:600; text-decoration:none; }
.dl-item a:hover{ text-decoration:underline; }

/* Spacing tweaks for lg+ to match screenshot layout */
@media (min-width: 992px){
  .about-body .col-left{ padding-right: 24px; }
  .about-body .col-right{ padding-left: 24px; }
}
.about-hero {
    position: relative;
    height: 60vh; /* অথবা আপনার নির্দিষ্ট উচ্চতা */
    width: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
   
}

.about-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* cover এর বদলে fill ব্যবহার করুন যাতে ইমেজটি stretch না হয়ে কন্টেইনারে ফিট হয় */
    object-fit: fill; 
    object-position: center;
    transition: none; /* GSAP এটি হ্যান্ডেল করবে */
    z-index: 1;
}


/* dark wash so white title pops */
/*.about-hero::after{*/
/*  content:"";*/
/*  position:absolute; inset:0;*/
/*  background: linear-gradient(0deg, rgba(0,0,0,.40), rgba(0,0,0,.10));*/
/*  z-index: 1;*/
/*}*/

/* title */
.about-hero__title{
  position: relative; z-index: 3;
  color: #fff; margin: 0;
  font-weight: 900; letter-spacing: .5px;
  text-transform: uppercase;
  font-size: clamp(26px, 6vw, 48px);
  padding: clamp(14px, 2vw, 22px) 0;
  line-height: 1.05;
  /* optional: subtle shadow */
  text-shadow: 0 3px 15px rgb(25 23 23 / 100%);
}

/* chevrons (two translucent angled bands on right) */
.about-hero__chevrons{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.ch{
  position: absolute; top: -10%; height: 140%; 
  transform: skewX(-20deg);
  background: rgba(255,255,255,.24);
  /* soft edge like screenshot */
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.ch-1{ right: -8%;  width: 32%;  }
.ch-2{ right: 8%;   width: 26%;  background: rgba(255,255,255,.14); }

/* responsive tweak so bands don’t overpower on small */
@media (max-width: 576px){
  .ch-1{ right: -12%; width: 42%; }
  .ch-2{ right: 4%;   width: 32%; }
}