.background-container {
  position: relative;
  width: 100%;
  height: 324px; /* Set your desired height */
  overflow: hidden;
  z-index: 50;
}

.background-container::before,
.background-container::after {
  content: "";
  position: absolute;
  width: 50%; /* Adjust the width of each background */
  height: 100%;
  top: 0;
  z-index: -1;
}

.background-container::before {
  background: url(../images/section1/left-dots.webp) no-repeat;
  background-size: 40%;
  background-position: bottom left;
  left: 2px;
  width: 534px;
}

.background-container::after {
  background: url(../images/section1/right-dots.webp) no-repeat;
  background-size: 40%;
  background-position: top right;
  width: 510px;
}

.background-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
}

/* New Video Container / Updating Responsive Videos New Format */
.video-container {
  position: relative;
  width: 100%; /* Adjust as needed */
  max-width: 800px; /* Adjust as needed */
  margin: 0 auto; /* Center the container horizontally */
  background-image: url(../images/section1/dots-container.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px; /* Add padding if necessary */
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; 
  padding: 4%;
}


@media only screen and (min-width: 1400px) {

  .background-container::before {
    background: url(../images/section1/left-dots.webp) no-repeat;
    background-size: 40%;
    background-position: bottom left;
    left: 2px;
    width: 534px;
  }
  
  .background-container::after {
    background: url(../images/section1/right-dots.webp) no-repeat;
    background-size: 40%;
    background-position: top right;
    /* right: -20px; */
    width: 510px;
  }

}