.company-banner {
  margin-top: 80px;
  position: relative;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* ✅ this is the key */
  z-index: 1;
  background: rgba(71, 74, 81, 0.5);
  backdrop-filter: blur(2px);
  pointer-events: none; /* optional: so it doesn’t block interaction */
}

@media (max-width: 576px) {
  .video-overlay {
    background: linear-gradient(to bottom, rgba(6, 57, 113, 0.4), rgba(0, 0, 0, 0.4));
  }
}

.about-main {
  background-color: #d9d9d9;
  padding: 3rem 2rem;
}

/* ───────── TIMELINE CORE ───────── */
.timeline{
  position:relative;
  margin:0 auto;
  padding:2rem 0;
}

/* centre spine */
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:100%;
  background:#063971;
}

/* one milestone */
.timeline-item{
  position:relative;
  width:50%;                 /* each card uses half the width */
  padding:0 2.5rem 3rem;      /* 2.5 rem leaves a safe gap around the circle */
  box-sizing:border-box;
  opacity:0;                  /* reveal anim. */
  transform:translateY(40px);
  transition:all .6s ease-out;
}
.timeline-item.visible{
  opacity:1;transform:translateY(0);
}

/* left‑hand vs right‑hand positioning */
.timeline-item.left { left:0;   text-align:right; }
.timeline-item.right{ left:50%; text-align:left; }

/* blue year circle */
.timeline-marker{
  position:absolute;
  top:0;
  right:-30px;                /* half marker width ⇒ hugs spine */
  width:60px; height:60px;
  border-radius:50%;
  background:#063971;
  color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px #fff inset;
}
.timeline-item.right .timeline-marker{
  left:-30px; right:auto;     /* flip side */
}

/* description card */
.timeline-content{
  background:#fff;            /* or #f5f5f5 for a subtle tint */
  border-radius:.5rem;
  padding:1.25rem 1.75rem;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  font-size:.95rem;
}

/* ─── mobile: stack everything ─── */
@media (max-width: 767.98px){
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right{
    width:100%; left:0; text-align:left;
    padding-left:4.5rem;        /* space for marker + spine */
  }
  .timeline-marker{ left:0 !important; right:auto; }
  .timeline::before{ left:30px; } /* spine shifts under markers */
}

/* SECTION BACKDROP ------------------------------------------------ */
.mv-section{
  background:#063971;               /* brand blue */
  overflow:hidden;
}

/* make every column stretch its child to full height */
.mv-section .row > [class^="col-"]{
  display:flex;
}

.mv-wave{
  position:absolute; top:-1px; left:0; width:100%; height:auto;
  fill:#fff2;                       /* subtle topographic “ripple” */
  pointer-events:none;
}

/* GLASS CARD ------------------------------------------------------ */
.mv-card{
  flex:1;              /* take the full column height */
  display:flex;        /* allows vertical spacing control if needed */
  flex-direction:column;
  position:relative;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:1.25rem;
  padding:5rem 2rem 2.5rem;
  color:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:transform .4s cubic-bezier(.19,1,.22,1);
}
.mv-card:hover{ transform:translateY(-6px); }

/* slim accent bar */
.mv-accent{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:6px;
  border-top-left-radius:1.25rem;
  border-top-right-radius:1.25rem;
  background:#ffcb05;               /* warm accent; adjust if needed */
}

/* circular icon bubble */
.mv-icon{
  width:72px; height:72px;
  position:absolute;
  top:-36px;
  left:50%;
  border-radius:50%;
  background:#fff;
  color:#063971;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  margin:0 auto;
  transform:translateX(-50%);
}
/* pull everything down to compensate */
.mv-card h5, .mv-card p, .mv-list{ margin-top: 0; }

.mv-card h5{
  font-size:1.35rem;
  font-weight:700;
  margin-bottom:.75rem;
}
.mv-card p,
.mv-list li{
  line-height:1.6;
  font-size:1rem;
}

/* list inside Values */
.mv-list{ list-style:none; padding-left:0; margin-bottom:0; }
.mv-list li{ margin-bottom:.35rem; }

/* simple fade‑up animation --------------------------------------- */
[data-aos]{opacity:0; transform:translateY(40px);}
[data-aos].aos-animate{opacity:1; transform:none;}


/* ---------- About Nesans block ---------- */
.about-nesans{
  background:#0b2e66;                   /* deep brand blue */
  color:#f1f5ff;
}
.about-accent{
  color:#ffcb05;                         /* warm highlight */
}
.about-list{
  margin:1.5rem 0 0; padding:0;
  list-style:none;
}
.about-list li{
  margin-bottom:.9rem;
  position:relative; padding-left:1.75rem;
}
.about-list li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:#ffcb05; font-weight:700;
}
.about-video{
  border-radius:1rem;
}

/* smooth fade‑up when block scrolls into view */
[data-aos]{opacity:0; transform:translateY(40px);}
[data-aos].aos-animate{opacity:1; transform:none;}