.video-list{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin:30px 0;
}

.video-card{
background:#fff;
border:1px solid #e5e5e5;
overflow:hidden;
transition:.3s;
}

.video-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.video-thumb{
position:relative;
overflow:hidden;
}

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

.video-play{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:70px;
height:70px;
border-radius:50%;
background:#0f5cffa6;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
}
.video-play::before {
    content: '';
    position: absolute;
    width: 135%;
    height: 135%;
    background-color: inherit;
    border-radius: 50%;
    animation: pulse 2s infinite;
    z-index: -1;
}

.video-play svg {
    fill: #fff;
    height: 1em;
    position: relative;
    width: 1em;
}

.video-content{
padding:25px;
}

.video-content h3{
font-size:26px;
margin-bottom:15px;
}

.video-excerpt{
font-size:15px;
line-height:1.8;
margin-bottom:20px;
color:#666;
}

.video-btn{
display:inline-flex;
align-items:center;
gap:10px;
font-weight:600;
color:#0f5cff;
}

.video-pagination{
margin-top:40px;
text-align:center;
}

.video-pagination .page-numbers{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
margin:0 5px;
border:1px solid #ddd;
}

.video-pagination .current{
background:#0f5cff;
color:#fff;
border-color:#0f5cff;
}
.video-cats{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:30px;
	    justify-content: center;
    margin-top: 30px;
}

.video-cats a{
    padding:10px 18px;
    border:1px solid #dcdcdc;
    border-radius:30px;
    text-decoration:none;
    color:#333;
    transition:.3s;
}

.video-cats a:hover{
    background:#0d6efd;
    color:#fff;
    border-color:#0d6efd;
}

.video-cats a.active{
    background:#0d6efd;
    color:#fff;
    border-color:#0d6efd;
}

.video-cats span{
    opacity:.8;
}
 @keyframes pulse {
        0% {
            transform: scale(0.8);
            opacity: 0.7;
        }

        70% {
            transform: scale(1.3);
            opacity: 0;
        }

        100% {
            transform: scale(0.8);
            opacity: 0;
        }
}
@media(max-width:991px){

.video-list{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:767px){

.video-list{
grid-template-columns:1fr;
}

}