/* video.css */



/* Background video */

.video-background {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: -2;

}



.video-background iframe, .video-background video {

  width: 100vw;

  height: 100vh;

  filter: blur(20px) brightness(0.6);

  transform: scale(1.1);

  pointer-events: none;

}





/* Foreground video */

.video-foreground {

  position: relative;

  z-index: 1;

  width: 80%;

  max-width: 900px;

  aspect-ratio: 16 / 9;

  margin-top: 10vh;

  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);

  border-radius: 12px;

  /* overflow: hidden; */

  animation: fadeIn 1s ease-out;

}


@media(max-width:768px){

    .video-foreground{
      width:90%;
        aspect-ratio: auto;
        height:auto;
    }
  }



.video-foreground iframe {

  width: 100%;

  height: 100%;

}



/* Fade-in animation */

@keyframes fadeIn {

  from { opacity: 0; transform: scale(0.95); }

  to { opacity: 1; transform: scale(1); }

}



/* Hide background video on small screens to save data */

@media (max-width: 768px) {

  .video-background {

    /* display: none; */

  }

  .video-foreground{
    margin:3vh;
  }

}

.mobile-video { 
  display: none; 
  border-radius: 12px;
}

.desktop-video { 
  display: block; 
  border-radius: 12px;
}

@media (max-width: 768px) {
  .desktop-video { display: none; }
  .mobile-video { display: block; object-fit:cover;}
}

.video-wrapper
{
  /* height: 450px;                  */
  position: relative;     
  border-radius: 12px;     
}