.dialog-type9 {
  background-color: transparent;
  width: 1800px;
  height: 900px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: none;
  padding: 20px;
  gap: 0;
  z-index: 1000;
  position: fixed;
  overflow: hidden;
}

.dialog-type9 .video-container {
  display: block;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.dialog-type9 .circle-video {
  position: absolute;
   height:400px;
  width: 400px;
  border-radius: 200px;
  overflow: hidden;
  box-shadow: -6px 0px 17px rgba(82, 79, 159, 0.5);
  border: 10px solid #81e5a6; /* Gradient background */
  z-index: 5;
  position: absolute;
  top: 126px;
  left: 163px;
  backdrop-filter: blur(16px);
}

.dialog-type9 .circle-video video {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.dialog-type10 .circle-video {

height:500px;
width: 500px;
border-radius: 250px;

}

#first {

  top: 216px;
  left: 230px;

}

#second {

  top: 70px;
  left: 488px;

}

#third {

  top: 130px;
  left: 370px;

}


#fourth {

  top: 130px;
  left: 370px;

}

.dialog-type9 .circle-video video, .dialog-type10 .circle-video video {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.dialog-type9 .triangle {
  width: 0;
  height: 330px;
  left:651px;
  top: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  backdrop-filter: blur(16px);
}

.dialog-type9 .triangle::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  backdrop-filter: blur(16px);
  background-color: rgb(255, 255, 255);
}




#dialog4-no-images .tall-video video {
  width: 500px;
}

.dialog-type3 .marks-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1001;
}

.dialog-type3 .mark {
  position: absolute;
  width: 80px;
  height: 80px;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 10;
}

.dialog-type3 .mark.active {
  opacity: 1;
}

#dialog4-three-images {
  --mark1-top: 431px;
  --mark1-left: 384px;
  --mark2-top: 374px;
  --mark2-left: 493px;
  --mark3-top: 228px;
  --mark3-left: 259px;
}

#dialog4-single-image {
  --mark1-top: 32%;
  --mark1-left: 4%;
  --mark2-bottom: 5%;
  --mark2-right: 5%;
  --mark3-top: 50%;
  --mark3-left: 15%;
}

#dialog4-no-images {
  --mark1-top: 395px;
  --mark1-left:448px;
}

#dialog4-three-images .mark1,
#dialog4-single-image .mark1,
#dialog4-no-images .mark1 {
  top: var(--mark1-top);
  left: var(--mark1-left);
}

#dialog4-three-images .mark2,
#dialog4-single-image .mark2,
#dialog4-no-images .mark2 {
  top: var(--mark2-top);
  left: var(--mark2-left);
}

#dialog4-three-images .mark3,
#dialog4-single-image .mark3,
#dialog4-no-images .mark3 {
  top: var(--mark3-top);
  left: var(--mark3-left);
}

/* Responsive adjustments 
@media (min-width: 1366px) {
  .dialog-type3 {
    width: 700px;
    height: 800px;
  }
  .dialog-type3 .circle-video {
    width: 150px;
    height: 150px;
    top: 20%;
  }
  .dialog-type3 .triangle {
    height: 300px;
  }
  
  .dialog-type3 .tall-video {
    height: 300px;
  }
  .dialog-type3 .tall-video video {
    width: 270px;
  }
  #dialog4-no-images .tall-video video {
    width: 450px;
  }
  #dialog4-three-images {
    --mark1-top: 340px;
    --mark1-left: 300px;
    --mark2-bottom: 23%;
    --mark2-right: 69%;
    --mark3-top: 40%;
    --mark3-left: 04%;
  }
  
  #dialog4-single-image {
    --mark1-top: 22%;
    --mark1-left: 03%;
  }
  
}

@media (min-width: 1920px) {
  .dialog-type3 {
    width: 900px;
    height: 1000px;
  }
  .dialog-type3 .circle-video {
    width: 200px;
    height: 200px;
  }
  .dialog-type3 .tall-video {
    height: 360px;
  }
  .dialog-type3 .tall-video video {
    width: 330px;
  }
  #dialog4-no-images .tall-video video {
    width: 550px;
  }
}*/