*{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    body{
        font-family: Arial, sans-serif;
        background:#f4f4f4;
        color:#222;
    }

    header{
        background: #c91313;
        color:#fff;
        padding: 5px 15px;
        text-align:center;
    }

    header img{
        max-width: 100px;
        margin-bottom: 0;
    }

    header h1{
        font-size:32px;
        margin-bottom:8px;
    }

    header p{
        font-size:16px;
        opacity:0.8;
    }

    .container{
        width:95%;
        max-width:1400px;
        margin:30px auto;
    }
    
    .top-content {
        margin-bottom: 45px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        grid-row-gap: 20px;
    }

    .video-grid{
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
    }

    .video-card {
        background:#fff;
        border-radius:10px;
        overflow:hidden;
        cursor:pointer;
        transition:0.3s;
        box-shadow:0 2px 10px rgba(0,0,0,0.1);
        width: calc((100% - (25px * 2)) / 3);
    }

    .video-card:hover{
        transform:translateY(-5px);
    }

    .video-card img{
        width:100%;
        /*height:180px;*/
        object-fit:cover;
        display:block;
    }

    .video-info{
        padding:15px;
    }

    .video-info h3{
        font-size:18px;
        margin-bottom:8px;
    }

    .video-info p{
        font-size:14px;
        color:#666;
    }

    .video-player-section{
        margin-top:40px;
        display:none;
    }

    .video-player-section.active{
        display:block;
    }

    video{
        width:100%;
        border-radius:12px;
        background:#000;
        max-height:700px;
    }

    .back-btn{
        margin-bottom:15px;
        background:#111;
        color:#fff;
        border:none;
        padding:12px 20px;
        border-radius:6px;
        cursor:pointer;
        font-size:15px;
    }

    .back-btn:hover{
        background:#333;
    }
    
    @media(max-width:991px) {
        .video-card {
            width: calc((100% - 25px) / 2);
        }
    }

    @media(max-width:767px) {

        header h1{
            font-size:24px;
        }
        
        .video-card {
            width: 100%;
        }

        .video-card img{
            /*height:160px;*/
        }
    }