/* VIDEO PREVIEW */

.video-preview-section{
    padding:80px 0;
}

.video-preview{
    position:relative;
    max-width:900px;
    margin:auto;
    cursor:pointer;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,0.25);
}

.video-preview img{
    width:100%;
    display:block;
}

.play-button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background:#00c4cc;
    color:white;
    font-size:40px;
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:0.3s;
}

.video-preview:hover .play-button{
    transform:translate(-50%, -50%) scale(1.1);
}


/* VIDEO POPUP */

.video-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
}

.video-popup.active{
    display:flex;
}

.video-popup-content{
    position:relative;
    width:100%;
    max-width:1000px;
}

.video-container{
    position:relative;
    padding-bottom:56.25%;
    height:0;
}

.video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:8px;
}

.video-close{
    position:absolute;
    top:-40px;
    right:0;
    font-size:40px;
    color:white;
    cursor:pointer;
}


/* MOBILE */

@media(max-width:768px){

.play-button{
    width:70px;
    height:70px;
    font-size:30px;
}

.video-close{
    top:-35px;
    font-size:32px;
}

}