/* ══════════════════════════════════════
   CUSTOM VIDEO PLAYER WITH THUMBNAIL
══════════════════════════════════════ */
.vid-wrap{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;cursor:pointer;}
.vid-wrap video{width:100%;height:100%;display:block;object-fit:cover;}
/* .vid-thumb base positioning/hidden-state lives in style.css, along with
   the ::before (blurred background) / ::after (non-stretched foreground)
   treatment. Nothing else needed here. */
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:3;box-shadow:0 4px 20px rgba(0,0,0,.3);}
.play-btn i{color:var(--green);font-size:24px;margin-left:4px;}
.vid-wrap:hover .play-btn{background:#fff;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 6px 30px rgba(0,0,0,.4);}
.vid-duration{position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:4px;z-index:3;font-family:'Inter',sans-serif;}

/* Gallery video items */
.vg-item .vid-wrap{border-radius:0;aspect-ratio:16/9;}

/* Video section on homepage */
.video-card .vid-wrap{border-radius:12px;}

/* About section video */
.about-video-main .vid-wrap{border-radius:14px;aspect-ratio:4/3;}
.about-video-main .vid-wrap video{height:100%;}

/* Why section */
.why-video .vid-wrap{border-radius:14px;aspect-ratio:4/3;}
.why-video .vid-wrap video{height:100%;}