/* Simple Wix-like timeline style */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;900&family=Playfair+Display:wght@400;700&display=swap');
:root{
  --accent:#0f6cf2;
  --muted:#6b7280;
  --bg:#f7f7fb;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Montserrat,system-ui,Arial,sans-serif; background:var(--bg); color:#111;
}
.header{
  background: linear-gradient(90deg, rgba(15,108,242,0.95), rgba(32,199,255,0.9));
  color:#fff; padding:48px 20px; text-align:center; position:relative; overflow:hidden;
}
.header .container{max-width:1100px;margin:0 auto}
.header h1{font-family:'Playfair Display',serif;font-weight:700;margin:0 0 8px;font-size:40px}
.header p.lead{opacity:0.95;margin:0 0 18px;color:rgba(255,255,255,0.95)}
.header .cta{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.18);padding:10px 18px;border-radius:999px;color:#fff;text-decoration:none;font-weight:600}
.timeline-wrap{max-width:1100px;margin:40px auto;padding:0 20px}
.timeline{position:relative;padding:40px 0}
.timeline:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:4px;background:linear-gradient(#ddd,#eee);transform:translateX(-50%);border-radius:2px}
.item{position:relative;width:50%;padding:20px 40px}
.item .card{background:var(--card);border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,0.08);overflow:hidden}
.item .card .media{height:auto;max-height:420px;overflow:hidden;background:none}
.item .card .media img{width:100%;height:auto;display:block;object-fit:contain}
.item .card .content{padding:18px}
.item .meta{color:var(--muted);font-size:13px;margin-bottom:6px}
.item h3{margin:0 0 8px;font-size:20px}
.item p{margin:0;color:#333}
.item.left{left:0;text-align:right;padding-right:60px}
.item.right{left:50%;padding-left:60px}
  .item.left .card{margin-left:auto}
@media(max-width:900px){
  .item{width:100%;padding:12px 0}
  .item.left{left:0;padding-right:0;text-align:left}
  .item.right{left:0;padding-left:0}
  .timeline:before{left:20px}
  .item .card .media{max-height:260px}
  .item .card .media img{object-fit:contain}
}
.footer{max-width:1100px;margin:40px auto;padding:20px;text-align:center;color:var(--muted)}
/* small helpers */
.container{padding:0 20px}
.hero-image{position:absolute;right:20px;top:-30px;opacity:0.12;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0));pointer-events:none}

/* Video banner used on index.html */
.video-banner{position:relative;width:100%;height:420px;overflow:hidden;border-radius:12px;background:#000;margin:28px 0}
.video-banner iframe,
.video-banner video{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  min-width:100%;
  min-height:100%;
  width:177.77778vh;
  height:100vh;
  border:0;
  object-fit:cover;
}
@media(max-width:900px){
  .video-banner{height:220px}
  .video-banner iframe,
  .video-banner video{width:200vw;height:200vw}
}

/* Play button overlay for video sound control */
.play-button-overlay{
  position:absolute;
  bottom:16px;
  right:16px;
  z-index:10;
  cursor:pointer;
}
.play-button{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  transition:all 0.3s ease;
}
.play-button:hover{
  background:#fff;
  transform:scale(1.08);
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
}
.play-button svg{
  width:28px;
  height:28px;
  fill:#0f6cf2;
}
.play-button.hidden{
  display:none;
}
@media(max-width:900px){
  .play-button{width:48px;height:48px}
  .play-button svg{width:24px;height:24px}
  .play-button-overlay{bottom:12px;right:12px}
}