/* ========================================= */
/* DESKTOP */
/* ========================================= */

body {
   font-family: "Poppins", Sans-serif;
}

@media (min-width: 1025px) {
body {
  margin: 0;
}
  
  .block-images {
    display: none !important;
  }
 
.to {
  font-size: 40px;
  font-weight: 200;
}
 
.end {
  font-size: 65px;
  font-weight: 700;
}
 
.timeline-right img {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(8px);
  transition:
    opacity 1.4s ease,
    transform 1.4s ease,
    filter 1.4s ease;
}
 
.timeline-right img.show {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
 
/* MAIN SECTION */
.timeline-section {
  position: relative;
  height: auto;
  overflow: visible;
  z-index: 1;
}
 
.timeline-bg {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  z-index: 0;
  pointer-events: auto;
}
 
.timeline-content {
  position: relative;
  z-index: 2;
}
 
.timeline-bg .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
 
.timeline-bg .bg.active {
  opacity: 1;
}
 
/* WHITE PANEL */
.timeline-content {
  margin-top: -100vh;
  left: 50%;
  transform: translateX(-50%);
  min-height: auto;
  width: 750px;
  max-width: 90%;
  font-size: 0.9rem;
  padding: 120px 80px 1350px 100px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(3px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  overflow: visible;
  padding-right: 200px;
}
 
.timeline-content p {
  font-size: inherit !important;
}
 
/* LEFT COLUMN */
.timeline-left {
  display: flex;
  flex-direction: column;
}
 
/* EACH SECTION */
.timeline-block {
  position: relative;
  margin-bottom: 150px;
  overflow: visible;
  max-width: 260px;
}
 
.block-left {
  position: relative;
  max-width: 280px;
  left: -30px;
  padding-top: 80px;
}
 
/* YEAR */
.year {
  position: absolute;
  left: 40px;
  top: 100px;
  font-size: 90px;
  font-weight: 700;
  color: #c8102e;
  transform: rotate(-90deg);
  transform-origin: left top;
  text-align: center;
}
 
/* RIGHT IMAGE COLUMN */
.timeline-right {
  position: absolute;
  top: -70px;
  left: 24%;
  transform: translateX(165px);
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 55px;
  z-index: 3;
}
 
/* IMAGES */
.timeline-right img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: scale(0.9);
}
 
.timeline-right img:first-child {
  margin-top: 10px;
}
 
/* TEXT */
.timeline-block p {
  position: relative;
  left: 0;
  margin-left: 60px;
  text-align: right;
  margin: 0;
}
 
.timeline-block p + p {
  margin-top: 50px;
}
 
/* LINE */
.line {
  position: absolute;
  top: 140px;
  left: -30px;
  width: 275px;
  height: 2px;
  background: #c8102e;
}
 
/* SMALL TEXT */
.small {
  font-size: 40px;
  font-weight: 200;
}
 
/* YEAR RANGE */
.year-range {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 300px;
  left: -80px;
  transform: rotate(-90deg);
  transform-origin: left top;
}
 
/* ===================== */
/* 1981 (data-bg="0")    */
/* ===================== */
.timeline-item[data-bg="0"] { padding-top: 200px; margin-bottom: 0; }
.timeline-item[data-bg="0"] .block-left { padding-top: 0; position: relative; top: -40px; }
.timeline-item[data-bg="0"] .year { top: -30px; left: 50px; }
.timeline-item[data-bg="0"] .year-range { top: 0px; left: -30px; }
.timeline-item[data-bg="0"] .line { top: -10px; left: -20px; }
.timeline-item[data-bg="0"] p { text-align: right; margin-left: 0; }
.timeline-item[data-bg="0"] .text-block { transform: translateY(10px); }
 
/* ===================== */
/* 1982 (data-bg="1")    */
/* ===================== */
.timeline-item[data-bg="1"] { padding-top: 200px; }
.timeline-item[data-bg="1"] .block-left { padding-top: 170px; }
.timeline-item[data-bg="1"] .year { top: 275px; left: -50px; }
.timeline-item[data-bg="1"] .year-range { top: 470px; left: -30px; }
.timeline-item[data-bg="1"] .line { top: 485px; left: -18px; }
.timeline-item[data-bg="1"] p { text-align: right; margin-left: 0px; }
.timeline-item[data-bg="1"] .text-block { transform: translateY(330px); }
 
/* ===================== */
/* 1991 (data-bg="2")    */
/* ===================== */
.timeline-item[data-bg="2"] { padding-top: 200px; margin-bottom: 0; }
.timeline-item[data-bg="2"] .block-left { padding-top: 0px; }
.timeline-item[data-bg="2"] .year { top: 300px; left: -50px; }
.timeline-item[data-bg="2"] .year-range { top: 620px; left: -25px; }
.timeline-item[data-bg="2"] .line { top: 630px; margin-left: 15px; }
.timeline-item[data-bg="2"] p { text-align: right; margin-left: 0; }
.timeline-item[data-bg="2"] .text-block { transform: translateY(650px); }
 
/* ===================== */
/* 2001-2010 (data-bg="3") */
/* ===================== */
.timeline-item[data-bg="3"] { padding-top: 200px; }
.timeline-item[data-bg="3"] .block-left { padding-top: 0; position: relative; top: 0px; }
.timeline-item[data-bg="3"] .year { top: 240px; left: -50px; }
.timeline-item[data-bg="3"] .year-range { top: 690px; left: -30px; }
.timeline-item[data-bg="3"] .line { top: 720px; left: -10px; }
.timeline-item[data-bg="3"] p { text-align: right; margin-left: 0; }
.timeline-item[data-bg="3"] .text-block { transform: translateY(740px); }
 
/* ===================== */
/* 2011-2020 (data-bg="4") */
/* ===================== */
.timeline-item[data-bg="4"] { padding-top: 200px; }
.timeline-item[data-bg="4"] .block-left { padding-top: 0; position: relative; top: 0px; }
.timeline-item[data-bg="4"] .year { top: 20px; left: -50px; }
.timeline-item[data-bg="4"] .year-range { top: 1230px; left: -30px; }
.timeline-item[data-bg="4"] .line { top: 1260px; left: -10px; }
.timeline-item[data-bg="4"] p { text-align: right; margin-left: 0; }
.timeline-item[data-bg="4"] .text-block { transform: translateY(1280px); }
 
/* ===================== */
/* 2021-Current (data-bg="5") */
/* ===================== */
.timeline-item[data-bg="5"] { padding-top: 200px; }
.timeline-item[data-bg="5"] .block-left { padding-top: 0; position: relative; top: 0px; }
.timeline-item[data-bg="5"] .year { top: 20px; left: -50px; }
.timeline-item[data-bg="5"] .year-range { top: 1960px; left: -30px; }
.timeline-item[data-bg="5"] .line { top: 1980px; left: -10px; }
.timeline-item[data-bg="5"] p { text-align: right; margin-left: 0; }
.timeline-item[data-bg="5"] .text-block { transform: translateY(2010px); }
 
.timeline-inner { position: relative; min-height: 5500px; }
.text-block + .text-block { margin-top: 50px; }
 
/* SCROLL BEHAVIOUR */
.timeline-section section { scroll-margin-top: 180px; }
.scroll-anchor { position: relative; top: 200px; }
.timeline-item[data-bg="1"] .scroll-anchor { top: 320px; }
.timeline-item[data-bg="2"] .scroll-anchor { top: 430px; }
.timeline-item[data-bg="3"] .scroll-anchor { top: 550px; }
.timeline-item[data-bg="4"] .scroll-anchor { top: 1050px; }
.timeline-item[data-bg="5"] .scroll-anchor { top: 1700px; }
 
.scroll-anchor                              { scroll-margin-top: 200px; }
.timeline-item[data-bg="0"] .scroll-anchor { scroll-margin-top: 650px; }
.timeline-item[data-bg="1"] .scroll-anchor { scroll-margin-top: 250px; }
.timeline-item[data-bg="2"] .scroll-anchor { scroll-margin-top: 200px; }
.timeline-item[data-bg="3"] .scroll-anchor { scroll-margin-top: 250px; }
.timeline-item[data-bg="4"] .scroll-anchor { scroll-margin-top: 200px; }
.timeline-item[data-bg="5"] .scroll-anchor { scroll-margin-top: 250px; }
 
/* ===================== */
/* VIDEO CONTAINER       */
/* ===================== */
 
.timeline-video-container{
  width:100%;
  line-height:0;
}
 
.video-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#000;
}
 
/* HubSpot wrappers */
.video-wrapper .hs-video-widget{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
}
 
.video-wrapper .hs-video-container{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
}
 
.video-wrapper .hs-video-wrapper{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding-bottom:0 !important;
}
 
/* iframe */
.video-wrapper iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:none !important;
  z-index:1;
}
 
/* Poster */
.video-poster-wrap{
  position:absolute;
  inset:0;
  z-index:10;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  cursor:pointer;
  pointer-events:auto;
  transition:opacity .35s ease;
}
 
 
/* Custom play icon */
.play-btn-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:11;
 
}
 
.play-btn-overlay svg{
  display:block;
  width:50px;
  height:50px;
}
 
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
 
.video-poster-wrap {
  z-index: 2;
  transition: opacity 0.3s ease;
}
} 

/* ========================================= */
/* MOBILE */
/* ========================================= */

@media (max-width: 767px) {

body {
  margin: 0;
  overflow-x: hidden;
}

.timeline-section {
  position: relative;
  overflow: visible;
}

/* STICKY BACKGROUND */
.timeline-bg {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.timeline-bg .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
/*   transition: opacity 0.7s ease, transform 1.2s ease; */
/*   transform: scale(1.08); */
/*   will-change: transform; */
  backface-visibility: hidden;
  margin-top:-200px;
}

.timeline-bg .bg.active {
  opacity: 1;
  transform: scale(1);
}

/* WHITE PANEL — centered */
.timeline-content {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  left: 50%;
  transform: translateX(-50%);
  width: 92vw !important;
  max-width: 480px !important;
  padding: 60px 16px 300px 16px !important;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(3px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: visible;
}

.timeline-inner {
  position: relative;
  min-height: auto !important;
}

.timeline-left {
  display: flex;
  flex-direction: column;
}

/* HIDE desktop single right column */
.timeline-right {
  display: none !important;
}

/* HIDE mobile block-images on desktop (set in desktop media query) */
/* shown here on mobile */
.block-images {
  display: flex !important;
}

/* ── EACH BLOCK — CSS grid, left col + right col ── */
.timeline-block {
  position: relative;
  display: grid;
  grid-template-columns: 38% 58%;
  column-gap: 4%;
  align-items: start;
  width: 100%;
  margin-bottom: 70px;
  overflow: visible;
}

/* LEFT COL */
.block-left {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  padding-top: 55px;
  min-height: 160px;
}

/* RIGHT COL — images inline per block */
.block-images {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-top: 8px;
}

.block-images img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.block-images .timeline-video-container {
  width: 100%;
  line-height: 0;
}

.block-images .video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.block-images .video-wrapper video,
.block-images .video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-images .video-poster-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: opacity 0.35s ease;
}

.block-images .play-btn-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.block-images .play-btn-overlay svg {
  display: block;
  width: 40px;
  height: 40px;
}

/* ── YEAR — single ── */
.year {
  position: absolute;
  left: 10px;
  top: 40px;
  font-size: 38px !important;
  font-weight: 700;
  color: #c8102e;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

/* ── YEAR RANGE ── */
.year-range {
  position: absolute;
  left: 2px;
  top: 40px;
  transform: rotate(-90deg);
  transform-origin: left top;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  line-height: 1.1;
  font-size:38px !important;
}

.year-range span:not(.small):not(.to):not(.end) {
  font-size: 38px !important;
  font-weight: 700;
  color: #c8102e;
}

.small,
.to {
  font-size: 12px !important;
  font-weight: 200;
  color: #c8102e;
}

.end {
  font-size: 28px;
  font-weight: 700;
  color: #c8102e;
}

/* ── RED LINE ── */
.line {
  position: absolute;
  top: 46px;
  left: -8px;
  width: 130px;
  height: 2px;
  background: #c8102e;
}

/* ── TEXT ── */
.text-block {
  font-size: 10px;
  line-height: 1.55;
  text-align: right;
  margin-top: 6px;
}

.text-block + .text-block {
  margin-top: 10px;
}

.timeline-block p {
  margin: 0;
  text-align: right;
  font-size: 10px;
  line-height: 1.55;
}

html {
  scroll-behavior: smooth;
}
  
  .scroll-anchor,
  .timeline-item[data-bg="0"] .scroll-anchor,
  .timeline-item[data-bg="1"] .scroll-anchor,
  .timeline-item[data-bg="2"] .scroll-anchor,
  .timeline-item[data-bg="3"] .scroll-anchor,
  .timeline-item[data-bg="4"] .scroll-anchor,
  .timeline-item[data-bg="5"] .scroll-anchor {
    top: 0 !important;
    scroll-margin-top: 80px;
  }
  
/*   .scroll-anchor {
    position: relative !important;
    top: -100px !important;
    scroll-margin-top: 0 !important;
  }

  .timeline-item[data-bg="0"] .scroll-anchor { top: -100px !important; }
  .timeline-item[data-bg="1"] .scroll-anchor { top: -100px !important; }
  .timeline-item[data-bg="2"] .scroll-anchor { top: -100px !important; }
  .timeline-item[data-bg="3"] .scroll-anchor { top: -100px !important; }
  .timeline-item[data-bg="4"] .scroll-anchor { top: -100px !important; }
  .timeline-item[data-bg="5"] .scroll-anchor { top: -100px !important; } */

}
/* ========================================= */
/* TABLET — 768px to 1024px                  */
/* ========================================= */
@media (min-width: 768px) and (max-width: 1024px) {

  .block-images { display: none !important; }

  /* ── BACKGROUND ── */
  .timeline-bg {
    position: sticky !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin-left: calc(50% - 50vw) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .timeline-bg .bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
    transform: scale(1.08) !important;
  }

  .timeline-bg .bg.active {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  /* ── WHITE PANEL ── */
  .timeline-content {
    position: relative !important;
    z-index: 2 !important;
    margin-top: -100vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 88vw !important;
    max-width: 680px !important;
    padding: 80px 16px 400px 16px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(3px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    overflow: visible !important;
    font-size: 0.85rem !important;
  }

  .timeline-inner {
    position: relative !important;
    min-height: auto !important;
  }

  .timeline-left {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── RESET ALL DESKTOP PER-SECTION RULES ── */
  .timeline-item[data-bg="0"],
  .timeline-item[data-bg="1"],
  .timeline-item[data-bg="2"],
  .timeline-item[data-bg="3"],
  .timeline-item[data-bg="4"],
  .timeline-item[data-bg="5"] {
    padding-top: 0 !important;
    margin-bottom: 60px !important;
  }

  .timeline-item[data-bg="1"] .block-left,
  .timeline-item[data-bg="2"] .block-left,
  .timeline-item[data-bg="3"] .block-left,
  .timeline-item[data-bg="4"] .block-left,
  .timeline-item[data-bg="5"] .block-left {
    top: 0 !important;
    padding-top: 0 !important;
    left: 0 !important;
  }

  .timeline-item[data-bg="0"] .year,
  .timeline-item[data-bg="1"] .year,
  .timeline-item[data-bg="2"] .year,
  .timeline-item[data-bg="3"] .year,
  .timeline-item[data-bg="4"] .year,
  .timeline-item[data-bg="5"] .year {
/*     top: 0 !important; */
    left: 0 !important;
/*     transform: none !important; */
  }

  .timeline-item[data-bg="0"] .year-range,
  .timeline-item[data-bg="1"] .year-range,
  .timeline-item[data-bg="2"] .year-range,
  .timeline-item[data-bg="3"] .year-range,
  .timeline-item[data-bg="4"] .year-range,
  .timeline-item[data-bg="5"] .year-range {
/*     top: 0 !important; */
    left: 0 !important;
/*     transform: none !important; */
    position: relative !important;
  }

  .timeline-item[data-bg="0"] .line,
  .timeline-item[data-bg="1"] .line,
  .timeline-item[data-bg="2"] .line,
  .timeline-item[data-bg="3"] .line,
  .timeline-item[data-bg="4"] .line,
  .timeline-item[data-bg="5"] .line {
    top: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
    position: relative !important;
  }

  .timeline-item[data-bg="0"] .text-block,
  .timeline-item[data-bg="1"] .text-block,
  .timeline-item[data-bg="2"] .text-block,
  .timeline-item[data-bg="3"] .text-block,
  .timeline-item[data-bg="4"] .text-block,
  .timeline-item[data-bg="5"] .text-block {
/*     transform: none !important; */
    position: relative !important;
  }

  .timeline-item[data-bg="0"] .scroll-anchor,
  .timeline-item[data-bg="1"] .scroll-anchor,
  .timeline-item[data-bg="2"] .scroll-anchor,
  .timeline-item[data-bg="3"] .scroll-anchor,
  .timeline-item[data-bg="4"] .scroll-anchor,
  .timeline-item[data-bg="5"] .scroll-anchor {
    top: 0 !important;
    position: relative !important;
    scroll-margin-top: 80px !important;
  }

  /* ── EACH BLOCK — CSS GRID same as mobile ── */
  .timeline-block {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 35% 60% !important;
    column-gap: 5% !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 60px !important;
    overflow: visible !important;
    padding-top: 0 !important;
  }

  /* ── LEFT COL ── */
  .block-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    padding-top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 200px !important;
  }

  /* ── YEAR single ── */
  .year {
    position: absolute !important;
    left: 14px !important;
    top: 55px !important;
    font-size: 62px !important;
    font-weight: 700 !important;
    color: #c8102e !important;
    transform: rotate(-90deg) !important;
    transform-origin: left top !important;
    white-space: nowrap !important;
  }

  /* ── YEAR RANGE ── */
  .year-range {
    position: absolute !important;
    left: 4px !important;
    top: 88px !important;
    transform: rotate(-90deg) !important;
    transform-origin: left top !important;
    display: flex !important;
    flex-direction: column !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  .year-range span:not(.small):not(.to):not(.end) {
    font-size: 46px !important;
    font-weight: 700 !important;
    color: #c8102e !important;
  }

  .small,
  .to {
    font-size: 18px !important;
    font-weight: 200 !important;
    color: #c8102e !important;
  }

  .end {
    font-size: 46px !important;
    font-weight: 700 !important;
    color: #c8102e !important;
  }

  /* ── RED LINE ── */
  .line {
    position: absolute !important;
    top: 52px !important;
    left: -8px !important;
    width: 180px !important;
    height: 2px !important;
    background: #c8102e !important;
    margin-left: 0 !important;
  }

  /* ── TEXT ── */
  .text-block {
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    text-align: right !important;
    transform: none !important;
    position: relative !important;
    margin-top: 8px !important;
  }

  .text-block + .text-block {
    margin-top: 20px !important;
  }

  .timeline-block p {
    margin: 0 !important;
    text-align: right !important;
    transform: none !important;
  }

  /* ── RIGHT IMAGE COLUMN — inline block-images for tablet ── */
  /* We reuse block-images approach on tablet too */
  .block-images {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    padding-top: 8px !important;
  }

  /* HIDE the single desktop .timeline-right on tablet */
  .timeline-right {
    display: none !important;
  }

  .block-images img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .block-images .timeline-video-container {
    width: 100% !important;
    line-height: 0 !important;
  }

  .block-images .video-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #000 !important;
  }

  .block-images .video-wrapper video,
  .block-images .video-wrapper iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .block-images .video-poster-wrap {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background-size: cover !important;
    background-position: center !important;
    cursor: pointer !important;
  }

  .block-images .play-btn-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3 !important;
  }
    
  .video-js .rich-text-preview{
    object-fit:fill;
  }