/* ============================================================
   BANNER SLIDER — banner.css
   ============================================================ */

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  --navy:  #03174a;
  --blue:  #0057b8;
  --blue2: #0074e8;
  --cyan:  #00b4d8;
  --gold:  #f5a800;
  --gold2: #ffcc33;
  --white: #ffffff;
  --dur:   7000ms;
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { background: #000; font-family: 'Barlow', sans-serif; }

/* ── SLIDER SHELL ──────────────────────────────────────────── */
.slider       { position: relative; width: 100%; overflow: hidden; background: var(--navy); }
.slider-track { display: flex; transition: transform .85s cubic-bezier(.77,0,.18,1); }
.slide        { min-width: 100%; width: 100%; position: relative; overflow: hidden; }

.slide-inner  { position: relative; width: 100%; aspect-ratio: 1440/500; }

/* ── SHARED BACKGROUND OVERLAY ─────────────────────────────── */
.b3-skygrad, .b1-grad, .b2-grad {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(3,23,74,.10) 35%, rgba(3,23,74,.35) 55%, rgba(3,23,74,.65) 75%, rgba(3,23,74,.92) 100%),
    linear-gradient(0deg,  rgba(3,23,74,.65) 0%, rgba(3,23,74,.22) 18%, transparent 32%);
}

/* ── SHARED BACKGROUND IMAGE LAYER ─────────────────────────── */
.b3-photo, .b1-sky, .b2-sky {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  animation: none;
  animation-play-state: paused;
}
.b3-photo { background-image: url('slider3.webp'); }
.b1-sky   { background-image: url('slider1.webp'); }
.b2-sky   { background-image: url('slider2.webp'); }

.slide.active .b3-photo,
.slide.active .b1-sky,
.slide.active .b2-sky {
  animation: zoomOut 2.8s cubic-bezier(.25,.46,.45,.94) forwards;
  animation-play-state: running;
}

/* ── SLIDE 1 — MEP & CIVIL BIM ─────────────────────────────── */
.b1 { background: var(--navy); }

.b1-content {
  position: absolute; left: 60%; top: 40%; transform: translateY(-50%);
  width: 44%;
}
.b1-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(10px,1.1vw,15px); font-weight: 700; letter-spacing: 4px;
  text-transform: none; color: var(--cyan);
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.b1-tag::before { content: ''; display: block; width: 24px; height: 2px; background: var(--cyan); }

.b1-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(36px,5.5vw,80px); font-weight: 800; line-height: .88;
  color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.b1-title span { color: #efc364; }

.b1-subtitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px,1.6vw,24px); font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--cyan); margin-bottom: clamp(8px,1.2vw,16px);
  padding: 4px 14px; background: rgba(0,180,216,.12); border-left: 3px solid var(--cyan);
  display: inline-block;
}
.b1-desc {
  font-size: clamp(10px,1.3vw,20px); color: rgba(255,255,255,.65); line-height: 1.6;
  max-width: 360px;
}

.b1-25years {
  position: absolute; left: 10px; top: 288px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 100px; font-weight: 800; line-height: .8;
  color: #efc364; opacity: .85;
}
.b1-25years span { font-size: 40px; vertical-align: top; }

.b1-excellence {
  position: absolute; left: 100px; top: 328px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 700;
  line-height: 1.1; letter-spacing: 2px;
  color: #ffffff; opacity: .85;
}

/* ── SLIDE 2 — BIM MODELING ────────────────────────────────── */
.b2 { background: var(--navy); }

.b2-content {
  position: absolute; left: 70%; top: 40%; transform: translateY(-50%);
  width: 50%;
}
.b2-bim-word {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(72px,12vw,180px); font-weight: 800; line-height: .85;
  color: #efc364; letter-spacing: -4px;
  text-shadow: 0 0 60px rgba(245,168,0,.4);
  position: absolute; top: 50%; left: 150px;
  transform: translateY(-50%);
}
.b2-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(26px,4.2vw,62px); font-weight: 800; line-height: .92;
  color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.b2-heading .pink { color: #efc364; }

.b2-gulf-bar {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(10px,1.3vw,18px); font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: #fff;
  background: var(--blue2); padding: 5px 20px; margin-bottom: 14px;
}
.b2-disciplines { display: flex; flex-direction: column; gap: clamp(4px,.6vw,8px); margin-bottom: 14px; }
.b2-discipline {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(10px,1.3vw,18px); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #fff;
}
.b2-discipline::before { content: ''; display: block; width: 3px; height: clamp(14px,1.6vw,22px); background: var(--gold); flex-shrink: 0; }

.b2-cert-strip {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 24px; gap: clamp(12px,2.8vw,40px);
  flex-wrap: nowrap;
}
.b2-cert-logo {
  display: block; flex-shrink: 0;
  height: clamp(42px,5vw,58px); width: clamp(42px,5vw,58px);
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition: transform .22s ease, filter .22s ease;
  border-radius: 3px;
}
.b2-cert-logo:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 4px 14px rgba(0,180,216,.6)) brightness(1.1);
}

/* ── SLIDE 3 — OUR HIGHLIGHTS ──────────────────────────────── */
.b3 { background: var(--navy); }

.b3-content {
  position: absolute; left: 65%; top: 50%; transform: translateY(-50%);
  width: 52%;
}
.b3-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(24px,4vw,58px); font-weight: 800; text-transform: uppercase;
  color: #fff; letter-spacing: 1px; margin-bottom: clamp(10px,1.5vw,20px); line-height: .95;
}
.b3-head span { color: #efc364; }

.b3-items { display: flex; flex-direction: column; gap: 4px; }

.b3-item {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue2) 100%);
  padding: clamp(4px,.6vw,8px) clamp(12px,1.5vw,20px);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  width: 100%; max-width: 430px;
}
.b3-item-icon {
  width: clamp(16px,1.8vw,24px); height: clamp(16px,1.8vw,24px); flex-shrink: 0;
  border-radius: 50%; background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
}
.b3-item-icon svg { width: clamp(9px,1vw,13px); height: clamp(9px,1vw,13px); }

.b3-item-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(10px,1.3vw,17px); font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}

.b3-logos {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50px;
  background: rgba(0,20,60,.6); border-top: 1px solid rgba(0,116,232,.3);
  display: flex; align-items: center; padding: 0 6%; gap: clamp(3px,1.5vw,7px);
}
.b3-logos img { height: 60px; width: 55px; object-fit: contain; }

/* ── SLIDER CONTROLS ───────────────────────────────────────── */
.ctrl-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.ctrl-wrap > * { pointer-events: auto; }

.arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(3,23,74,.45); border: 1.5px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.arrow:hover { background: var(--blue2); border-color: var(--blue2); }
.arrow--prev  { left: 14px; }
.arrow--next  { right: 14px; }

.dots { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; align-items: center; }
.dot  { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer; transition: width .3s, background .3s, border-radius .3s; }
.dot.on { width: 26px; border-radius: 4px; background: var(--gold); }

.progress { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.1); }
.pbar     { height: 100%; background: linear-gradient(90deg, var(--blue2), var(--gold)); width: 0%; transition: width linear; }
.pbar.run { width: 100%; transition-duration: var(--dur); }

.count       { position: absolute; top: 16px; right: 20px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,.5);visibility: hidden; }
.count span  { color: #fff; font-size: 20px; }

/* ── KEYFRAME ANIMATIONS ───────────────────────────────────── */
@keyframes zoomOut {
  0%   { transform: scale(1.18); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1.04); }
}
@keyframes textFadeUp    { 0% { opacity:0; transform:translateY(32px)  scale(.96); } 100%{ opacity:1; transform:translateY(0)    scale(1);   } }
@keyframes textFadeLeft  { 0% { opacity:0; transform:translateX(-40px);             } 100%{ opacity:1; transform:translateX(0);     } }
@keyframes textFadeRight { 0% { opacity:0; transform:translateX(40px);              } 100%{ opacity:1; transform:translateX(0);     } }
@keyframes textZoomIn    { 0% { opacity:0; transform:scale(.7);                     } 100%{ opacity:1; transform:scale(1);           } }
@keyframes textSlideDown { 0% { opacity:0; transform:translateY(-28px);             } 100%{ opacity:1; transform:translateY(0);      } }
@keyframes itemSlideIn   { 0% { opacity:0; transform:translateX(-36px);             } 100%{ opacity:1; transform:translateX(0);      } }
@keyframes itemPopIn     { 0% { opacity:0; transform:scale(.4);                     } 100%{ opacity:1; transform:scale(1);           } }
@keyframes itemFlyRight  { 0% { opacity:0; transform:translateX(28px);              } 100%{ opacity:1; transform:translateX(0);      } }

/* ── TEXT ANIMATION — INITIAL HIDDEN STATES ────────────────── */
.b3-head, .b3-item,
.b1-tag, .b1-title, .b1-subtitle, .b1-desc, .b1-vis-circle, .b1-cert-badge, .b1-course,
.b2-badge, .b2-heading, .b2-bim-word, .b2-gulf-bar, .b2-discipline, .b2-pill-row, .b2-cert-strip, .b2-tag-right {
  opacity: 0;
}

/* ── SLIDE 3 — TEXT ANIMATIONS ─────────────────────────────── */
.slide.active .b3-head { animation: textFadeLeft .6s cubic-bezier(.22,1,.36,1) .1s forwards; }
.slide.active .b3-item:nth-child(1) { animation: itemSlideIn .5s cubic-bezier(.22,1,.36,1) .35s  forwards; }
.slide.active .b3-item:nth-child(2) { animation: itemSlideIn .5s cubic-bezier(.22,1,.36,1) .75s  forwards; }
.slide.active .b3-item:nth-child(3) { animation: itemSlideIn .5s cubic-bezier(.22,1,.36,1) 1.15s forwards; }
.slide.active .b3-item:nth-child(4) { animation: itemSlideIn .5s cubic-bezier(.22,1,.36,1) 1.55s forwards; }
.slide.active .b3-item:nth-child(5) { animation: itemSlideIn .5s cubic-bezier(.22,1,.36,1) 1.95s forwards; }
.slide.active .b3-item:nth-child(6) { animation: itemSlideIn .5s cubic-bezier(.22,1,.36,1) 2.35s forwards; }

/* ── SLIDE 1 — TEXT ANIMATIONS ─────────────────────────────── */
.slide.active .b1-tag      { animation: textSlideDown .5s ease-out .10s forwards; }
.slide.active .b1-title    { animation: textFadeUp    .6s cubic-bezier(.22,1,.36,1) .45s forwards; }
.slide.active .b1-subtitle { animation: textFadeLeft  .5s ease-out .85s forwards; }
.slide.active .b1-desc     { animation: textFadeUp    .5s ease-out 1.15s forwards; }

/* ── SLIDE 2 — TEXT ANIMATIONS ─────────────────────────────── */
.slide.active .b2-heading    { animation: textFadeUp    .7s cubic-bezier(.22,1,.36,1) .3s  forwards; }
.slide.active .b2-gulf-bar   { animation: textFadeLeft  .55s ease-out .55s forwards; }
.slide.active .b2-bim-word   { animation: textZoomIn    .8s cubic-bezier(.22,1,.36,1) .2s  forwards; }
.slide.active .b2-tag-right  { animation: textFadeRight .55s ease-out .9s  forwards; }
.slide.active .b2-cert-strip { animation: textFadeUp    .5s ease-out 1.7s  forwards; }
.slide.active .b2-discipline:nth-child(1) { animation: itemSlideIn .45s cubic-bezier(.22,1,.36,1) .70s forwards; }
.slide.active .b2-discipline:nth-child(2) { animation: itemSlideIn .45s cubic-bezier(.22,1,.36,1) .90s forwards; }
.slide.active .b2-discipline:nth-child(3) { animation: itemSlideIn .45s cubic-bezier(.22,1,.36,1) 1.10s forwards; }
.slide.active .b2-discipline:nth-child(4) { animation: itemSlideIn .45s cubic-bezier(.22,1,.36,1) 1.30s forwards; }
.slide.active .b2-pill-row                { animation: textFadeUp  .55s ease-out 1.55s forwards; }

/* ── TABLET (≤900px) ───────────────────────────────────────── */
@media (max-width: 900px) {
  .slide-inner { aspect-ratio: 4/3; }
  .b3-content  { width: 62%; }
  .b1-content  { width: 48%; }

  .b2-bim-word     { top: 54%; left: 0; }
  .b2-disciplines  { margin-left: 150px;}

  .b2-content {
    position: absolute;
    left: 59%;
    top: 59%;
    transform: translateY(-50%);
    width: 50%;
}
  
}



/* ── MOBILE (≤600px) ───────────────────────────────────────── */
@media (max-width: 600px) {
  .slide-inner { aspect-ratio: 9/14; min-height: 520px; }
 .b2-disciplines  {padding-top:9px; }

  .b3-skygrad, .b1-grad, .b2-grad {
    background: linear-gradient(180deg, rgba(3,23,74,.30) 0%, rgba(3,23,74,.72) 40%, rgba(3,23,74,.88) 100%) !important;
  }

  /* Slide 3 */
  .b3-content { width: 92%; left: 4%; top: auto; bottom: clamp(48px,10%,80px); transform: none; }
  .b3-head    { font-size: clamp(26px,8vw,38px); margin-bottom: 10px; }
  .b3-items   { gap: 6px; }
  .b3-item    { padding: 7px 12px; width: 100%; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
  .b3-item-text { font-size: clamp(9px,3vw,13px); white-space: normal; letter-spacing: .5px; }
  .b3-logos   { position: absolute !important; bottom: 8px !important; top: auto !important; left: 0; right: 0; display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; padding: 6px !important; height: auto; }

  /* Slide 1 */
  .b1-content  { width: 92%; left: 4%; top: 300px; transform: none; }
  .b1-tag      { font-size: 12px; letter-spacing: 2px; margin-bottom: 6px; }
  .b1-tag::before { width: 16px; }
  .b1-title    { font-size: clamp(30px,9.5vw,46px); margin-bottom: 8px; }
  .b1-subtitle { font-size: 12px; letter-spacing: 1.5px; margin-bottom: 8px; }
  .b1-desc     { font-size: 11px; line-height: 1.5; }
  .b1-sky      { background-position: 15% center !important; }

  .b1-25years  { left: 8px !important; top: 195px !important; font-size: 78px !important; }
  .b1-25years span { font-size: 24px !important; }
  .b1-excellence   { left: 82px !important; top: 226px !important; font-size: 15px !important; line-height: 1.1 !important; }

  /* Slide 2 */
  .b2-content  { left: 8% !important; width: 60% !important; top: 60% !important; transform: translateY(-50%) !important; }
  /* .b2-bim-word { left: 100px !important; top: 115px; font-size: 100px !important; }  */
    .b2-bim-word {
        left: 28px !important;
        top: 135px;
        font-size: 100px !important;
    }
  .b2-heading  { font-size: clamp(34px,9vw,52px) !important; line-height: .95 !important; }
  .b2-cert-strip { position: absolute !important; bottom: 0 !important; height: 64px !important; padding: 4px 8px !important; gap: clamp(8px,3vw,16px) !important; justify-content: center !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .b2-cert-logo  { height: 38px !important; width: 38px !important; }

  /* Controls */
  .arrow      { width: 32px; height: 32px; top: 38% !important; }
  .arrow--prev { left: 8px; }
  .arrow--next { right: 8px; }
  .count      { display: none; }
  .dots       { bottom: 10px; }
  .dot        { width: 6px; height: 6px; }
  .dot.on     { width: 20px; }
}

/* ── SMALL MOBILE (≤380px) ─────────────────────────────────── */
@media (max-width: 380px) {
  .slide-inner { aspect-ratio: 9/16; min-height: 560px; }
  .b3-head  { font-size: clamp(22px,7vw,32px); }
  .b1-title { font-size: clamp(26px,8.5vw,38px); }
}

/* ── LARGE DESKTOP (≥1440px) ───────────────────────────────── */
@media (min-width: 1440px) {
  .b3-item { width: min(430px,100%) !important; max-width: 430px !important; }
}