*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 150px 0 0 0;
 }

.btn {
 position: relative;
 cursor: pointer;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 gap: 11px;

}

.btn .play {
 position: relative;
 width: 80px;
 height: 80px;
 background: #f42e79;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0px 15px 25px #f42e7966;
 transition: 0.5s;
 -webkit-transition: 0.5s;
 -moz-transition: 0.5s;
 -ms-transition: 0.5s;
 -o-transition: 0.5s;
}

.btn.active .play{
 box-shadow: 0px 0px 0px 150vh #d9b66e;  
}

.center .btn .play::before{
 content: "";
 position: absolute;
 border: 25px solid #fff; 
 right: 10px;
 border-top: 15px solid transparent;
 border-bottom: 15px solid transparent;
 border-right: 15px solid transparent;
}

.center p {
 font-size: 1em;
 font-weight: 500;
 color: #888;
 letter-spacing: 4px;
 text-transform: uppercase;
 transform: translateX(3px);
}


.clip {
 position: relative;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 100%;
 transform: scale(0) translate(-714px, -222px);
 -webkit-transform: scale(0) translate(-714px, -222px);
 -moz-transform: scale(0) translate(-714px, -222px);
 -ms-transform: scale(0) translate(-714px, -222px);
 -o-transform: scale(0) translate(-714px, -222px);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 10000;
 transition: 0.8s;
 -webkit-transition: 0.8s;
 -moz-transition: 0.8s;
 -ms-transition: 0.8s;
 -o-transition: 0.8s;
}

.clip.active{
 transition-delay: .5s;
 transform: scale(1);
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
transform: translate(-714px, -222px);
}


.clip video{
 max-width: 1000px;
 outline: none;
}

.clip .close{
 position: absolute;
 top: -27px;
 right: 85px;
 color : #fff;
 text-transform: uppercase;
 font-weight:bold;
 letter-spacing: 2px;
 cursor : pointer;
}

 /* make it responsive */
 @media (max-width: 991px)
 {
 .clip video
 {
 max-width: 90%;
 }

 .img-video{
  left: 0;
 }

 .clip.active{
  /*transform: translate(5px, -42px);
  */transform: translate(-227px, -131px) !important;
  -webkit-transform: translate(-227px, -131px) ;
  -moz-transform: translate(-227px, -131px) ;
  -ms-transform: translate(-227px, -131px) ;
  -o-transform: translate(-227px, -131px) ;
}

 }

  @media (max-width: 985px){
    .clip{
   left: 22%;
}
 }

 @media (max-width: 730px){
.clip {
    left: 34%;
}
 }

  @media (max-width: 570px){
  .clip{
   left: 53%;
}
 }

   @media (max-width: 390px){
  .clip{
   left: 63%;
}
 }


    @media (max-width: 330px){
  .clip{
   left: 72%;
}
 }
 
 @media (max-width: 268px){
  .clip{
   left: 89%;
}
 }
 
 @media (max-width: 240px){
  .clip{
   left: 100%;
}
 }

 @media (max-width: 165px){
  .clip{
   left: 149%;
}
}