<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IEQ Education</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class=" section left ">
      <div class="heading"> Foundations of a
        Healthy Building
      </div>
      <div class="buttons" id="left-buttons">
        <div class="vid-button " onclick="playVideo('./assets/videos/overview.mp4',true)">
          <div><img src="./assets/ieq assets/ieq.png">
            </img>
          </div>
          <div>IEQ Video</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/air.mp4',true)">
          <div><img src="./assets/ieq assets/air.png">
            </img>
          </div>
          <div>Air Quality</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/thermal.mp4',true)">
          <div><img src="./assets/ieq assets/thermal.png">
            </img>
          </div>
          <div> Thermal Health</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/ventilation.mp4',true)">
          <div><img src="./assets/ieq assets/ventilation.png">
            </img>
          </div>
          <div>Ventilation</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/moisture.mp4',true)">
          <div><img src="./assets/ieq assets/moisture.png">
            </img>
          </div>
          <div>Moisture</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/noise.mp4',true)">
          <div><img src="./assets/ieq assets/noise.png">
            </img>
          </div>
          <div> Noise</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/dust.mp4',true)">
          <div><img src="./assets/ieq assets/pestanddust.png">
            </img>
          </div>
          <div>Dust & Pests</div>
        </div>
      </div>

    </div>
    

    <div class="videobar">
      <div class="tool-tip" id="tooltip">
        <!-- <img src="./assets/Tooltiprl.png"> -->
        <p>Please select a video title from either side to play </p>
      </div>
      <div class="sub-container" id="subtitles">
        <div class="subtitle-buttons" style="flex-direction:row;">

          <p>SUBTITLES</p>
        </div>
        <div class="subtitle-buttons">
          <div class="sub-button" onclick="setSubtitles('fre')">FRENCH </div>
          <div class="sub-button" onclick="setSubtitles('jap')">JAPANESE
          </div>
          <div class="sub-button" onclick="setSubtitles('spa')">SPANISH
          </div>
        </div>
      </div>
    </div>
    <div class="logo">
      <img src="./assets/Daikin Logo 1080.png" style="width: 100%;">
    </div>
    <div class="video-container">
      <div class="video-heading"> <strong>I</strong>ndoor <strong>E</strong>nvironment <strong>Q</strong>uality</div>
      <style>
        video::cue {
          font-size: 35px;
          z-index: 1000;
          position: relative;
        }
      </style>

      <video src="" autoplay controls style="display: none; width: 100% ; height:75%" id="videoPlayer"
        class="videosection">
      </video>
      <div id="custom-subtitle" class="custom-subtitle"></div>
      <!-- <img src="./assets/IEQ Background 1.gif" id="gifPlaceholder" style=" width: 100%; height: 75%;" /> -->
      <video id="loopingVideoPlayer" style="width: 100%; height: 75%;" autoplay muted></video>
     


    </div>
    <div class=" section right">
      <!-- <div class="heading-right"> IEQ in the
        DC Office</div> -->
      <div class="buttons" id="right-buttons">
       
      </div>

    </div>
  </div>
  <script src="./assets/videos/config.js"></script>

  <script src="script.js"></script>
</body>

</html> this is my index.html and body {
  margin: 0;
  padding: 0;
  font-family: 'Univers LT Std', Arial, sans-serif;
}
/* rgb(84 195 241 / 32%) darker bg */ 
.container {
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100vh;
  justify-content: space-between;
  background-image: url("./assets/bg.png");
  background-size: cover; /* Ensures the image covers the entire element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;
}



.video-heading strong {
  font-weight: bold; /* Set strong elements to a bold font weight */
}

.video-heading:not(strong) {
  font-weight: 400; /* Set non-strong elements to a lighter font weight */
}

.videobar{
  position: absolute;
    /* top: 10; */
    bottom: 25px;
    left: 40vw;


}
.vid-button {
  height: 10vh;
  display: flex;
  gap: 10px;
  border: 2px solid rgba(242, 243, 244, 1);
  align-items: center;
  justify-content: center;
  /* margin: 0px 30px 0px 30px; */
  width: 80%;
  border-radius: 5px;
}
.vid-button-right{
  height: 10vh;
  width: 70%;
  display: flex;
  border: 2px solid rgba(242, 243, 244, 1);
  align-items: center;
  justify-content: center;
  /* margin: 0px 40px 0px 40px; */
  border-radius: 5px;
  width: 80%;
  background: rgba(84, 195, 241, 1);
  
}

.custom-subtitle {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  font-size: 35px;
  color: white;
  text-shadow: 2px 2px 4px black;
  pointer-events: none;
}

.active {
  /* background: rgba(75, 198, 249, 0.1); */
  box-shadow: 10px 9px 74px 0px rgba(75, 198, 249, 0.1) inset;
  border: 2px solid #54C3F1;
}

.section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: white;

  /* padding: 0px 20px; */

}
.buttons{
  height: 100%;
  padding: 40px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.logo{
  position: absolute;
    top: 0;
    right: 0;
    width: 10vw;
    margin: 10px;

}
.heading {
  align-self: flex-start !important;
  border-radius: 0px 30px 0px 0px;

  background: rgba(84, 195, 241, 0.2);
  font-size: 30px;
  text-align: center;
  padding: 30px;

}
.heading-right {
  align-self: flex-start !important;
  border-radius: 30px 0px 0px 0px;

  background: rgba(84, 195, 241, 0.2);
  font-size: 20px;
  text-align: center;
  padding: 30px 0px;
  width: 100%;

}
.videosection{
  position: relative;
  z-index: 1;
  /* border: 1px solid rgba(236, 229, 229, 1) */
}

.video-container {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  gap: 20px;
  height: 100vh;
  width: 73vw;
}

.video-heading {
  text-align: center;
  font-size: 50px;
  margin-top: 5vh;
}

.right {
  height: 60vh;
  border-radius: 30px 0px 0px 30px;
  border: 2px solid lightblue;
  /* align-items: center; */
  text-align: center;
  width: 11vw;


}

.left {
  border-radius: 0px 30px 30px 0px;
  border: 2px solid lightblue;
  /* width: 15vw; */
  width: 13vw;


}

#videoPlayer::-webkit-media-controls {
  display: none !important;
}

#videoPlayer::-webkit-media-controls-enclosure {
  display: none !important;
}

.subtitle-buttons {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  /* width: 50%; */
  justify-content: center;
  font-size: 20px;
}

.sub-button {
  /* background-color: rgba(84, 195, 241, 1); */
  width: 7vw;
  color: black;
  border: 2px solid rgba(242, 243, 244, 1);
background-color: white;
  height: 22px;
  gap: 0px;
  opacity: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 18px;
}
.right-active{
  border: 3px solid #2E8BB2;
  /* border-image: linear-gradient(120.8deg, #2AB5EE 27.82%, #30708B 104.39%); */
  
}

.sub-active{
  /* width: 220px;
    height: 22px; */
    border: 2px solid rgba(84, 195, 241, 1);

}
.disabled{
  /* background: #d5d5d5; */
  background: rgba(84, 195, 241, 1);


}
.sub-container{
  display: flex;
  /* gap: 15px; */
  width: 100%;
  flex-direction: column;
  align-items: end;
  display: none;
  transition: opacity 0.3s linear 2s

}
.tool-tip{
  background-color: white;
  padding: 4px 19px;
   border-radius: 5px;
 font-size: 18px;
} this is my style.css now I want to have custom-subtitle with black background with 0.5 opacity and horizontally centre aligned how can i achieve this