/* Reset page spacing */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: white
}
/* SECTION fills screen */
.video-section {
    position: relative;
    width: 100%;
    min-height: 100vh; /* IMPORTANT: use min-height */
    overflow: hidden;
}
/* VIDEO always covers screen */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* 🔥 important */
}

/* CONTENT stays centered */
.content {
    position: relative;
    z-index: 2;
    color: white;
    flex-direction: column;
    height: 100%;
    padding: 20px;
}
.image-section {
    position: relative;
    width: 100%;
    min-height: 100%;   /* full screen height */

    background-image: url("assets/images/page2.png");
    background-size: cover;      /* 🔥 THIS is the key */
    background-position: center; /* keeps it centered */
    background-repeat: no-repeat;
}
.image-section-2 {
    position: relative;
    width: 100%;
    min-height: 100vh;

    background-image: url("assets/images/page9.png"); /* new image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.interactive-text {
  font-size: 50px;
  color: black;
}

/* each word */
.word {
  cursor: pointer;
  margin-right: 6px;
  transition: 0.3s ease;
    display: inline-block
}

/* hover effect */
.word:hover {
  color: red;
  text-decoration: underline;
}

.text-block {
  position: absolute;
  z-index: 10;
  padding-right: 70px; /* 🔥 THIS creates space inside edges */
}

#first .text1 {
  top: -9px;
  left: 37px;

}
#first .text2 {
  top: 54px;
  left: 125px;
}

#first .text3 {
  top: 110px;
  left: 810px;
}
#first .text4 {
  top: 626px;
  left: 537px;
text-align-last: right;
}
#second .text5 {
  top: 40px;
  left: 130px;
text-align-last: right;
}
#second .text6 {
  top: 130px;
  left: 433px;
text-align-last: right;
}

#third .text7 {
  top: 510px;
  left: 57px;
text-align-last: right;
}
#third .text8 {
  top: 581px;
  left: 41px;
text-align-last: right;
}

#fourth .text9 {
  top: 18px;
  left: 202px;
text-align-last: right;
}
#fourth .text10 {
  top: 88px;
  left: 423px;
text-align-last: right;
}
#fourth .text11 {
  top: 298px;
  left: 581px;
text-align-last: right;
}
#fourth .text12 {
  top: 298px;
  left: 857px;
text-align-last: right;
}
#fourth .text13 {
  top: 599px;
  left: 42px;
text-align-last: right;
}
#fifth .text14 {
  top: 6px;
  left: 42px;
text-align-last: right;
}
#fifth .text15 {
  top: 71px;
  left: 42px;
text-align-last: right;
}
#fifth .text16 {
  top: 71px;
  left: 1011px;
text-align-last: right;
}
#fifth .text17 {
  top: 164px;
  left: 1063px;
text-align-last: right;
}

#sixth .text18 {
  top: -20px;
  left: 110px;
text-align-last: right;
}

#sixth .text19 {
  top: 33px;
  left: 220px;
text-align-last: right;
}
#sixth .text20 {
  top: 121px;
  left: 283px;
text-align-last: right;
}
#sixth .text21 {
  top: 180px;
  left: 399px;
text-align-last: right;
}

#sixth .text22 {
  top: 166px;
  left: 978px;
text-align-last: right;
}
#sixth .text23 {
  top: 294px;
  left: 835px;
text-align-last: right;
}

#seventh .text24 {
  top: 581px;
  left: 1036px;
text-align-last: right;
}

#eighth .text24 {
  top: -5px;
  left: 193px;
text-align-last: right;
}
#eighth .text25 {
  top: 52px;
  left: 142px;
text-align-last: right;
}
#eighth .text26 {
  top: 111px;
  left: 54px;
text-align-last: right;
}
#eighth .text27 {
  top: 552px;
  left: 1237px;
text-align-last: right;
}
#ninth .text28 {
  top: -25px;
  left: 460px;
text-align-last: right;
}
#ninth .text29 {
  top: 206px;
  left: 886px;
text-align-last: right;
}
#ninth .text30 {
  top: 528px;
  left: 58px;
text-align-last: right;
}
#ninth .text31 {
  top: 589px;
  left: 63px;
text-align-last: right;
}
#ninth .text32 {
  top: 650px;
  left: 62px;
text-align-last: right;
}
#tenth .text33 {
  top: 231px;
  left: 573px;
text-align-last: right;
}
#tenth .text34 {
  top: 307px;
  left: 708px;
text-align-last: right;
}
#eleventh .text35 {
  top: 218px;
  left: 69px;
text-align-last: right;
}
#eleventh .text36 {
  top: 289px;
  left: 69px;
text-align-last: right;
}
#twelfth .text37 {
  top: 17px;
  left: 56px;
text-align-last: right;
}
#twelfth .text38 {
  top: 86px;
  left: 59px;
text-align-last: right;
}
#twelfth .text39 {
  top: 494px;
  left: 1052px;
text-align-last: right;
}
#twelfth .text40 {
  top: 555px;
  left: 1146px;
text-align-last: right;
}
#twelfth .text41 {
  top: 617px;
  left: 975px;
text-align-last: right;
}

#video-popup {
  position: absolute;
  display: none;
  width: 440px;
  height: 280px;
  background: white;
  border: 2px solid black;
  z-index: 9999;
  overflow: hidden;
}

#popup-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}