@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
/*Whole page*/
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.hero{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: rgba(0,0,0,.5);
color: white;
position: relative;
overflow: hidden;
min-height: 100vh;

}


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

.image{
  position: absolute;
  width: 11%;
  height: auto;
  top:60%;
  border-radius: 50%;
  
}

@media only screen and (max-width: 650px) {
.image {

  position: absolute;
  top: 59%;
  width: 25%;
  height: auto;

}

}

@media only screen and (max-width: 500px) {
  .image {
    top: 62%;
  }
}