.videos-page{
    padding:80px 20px 100px;
    text-align:center;
    background:#f8fafc;
}

.videos-page h1{
    font-size:40px;
    color:#004aad;
    margin-bottom:20px;
    text-align:center;
}
.video-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
z-index:99999;
}
#popupTitle{
color:white;
text-align:center;
margin-bottom:15px;
font-size:22px;
font-weight:700;
}
.video-modal-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90%;
max-width:350px;
max-height:85vh;
}
.video-modal-content video{
width:100%;
max-height:85vh;
object-fit:contain;
border-radius:15px;
}
.video-modal-content video{
width:100%;
border-radius:15px;
}

.close-video{
position:absolute;
right:-10px;
top:-40px;
font-size:40px;
color:white;
cursor:pointer;
}
.video-subtitle{
    max-width:700px;
    margin:0 auto 50px;
    font-size:18px;
    color:#666;
    line-height:1.7;
}

.video-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
    margin-bottom:80px;
}

.video-card{
    width:250px;
    background:#fff;
    padding:14px;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.video-card video{
    width:100%;
    aspect-ratio:9/16;
    object-fit:contain;
    background:#000;
    border-radius:10px;
}

.video-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.video-wrapper{
    position:relative;
}

.play-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:70px;
    height:70px;
    background:rgba(255,255,255,.9);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#004aad;
    pointer-events:none;
}

.video-card h3{
    margin-top:15px;
    color:#004aad;
    font-size:22px;
    font-weight:700;
    text-align:center;
}

@media(max-width:768px){

   .video-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    max-width:100%;
    margin:0 auto;
}
    .videos-page h1{
        font-size:32px;
    }

    .video-subtitle{
        font-size:16px;
    }
}