/*=========================================
    VIDEO
=========================================*/

.video{

    padding:100px 0;

    background:#09090f;

}

.video .container{

    max-width:1400px;

    margin:auto;

    padding:0 25px;

}

/*=========================================
    GRID
=========================================*/

.video-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

/*=========================================
    CARD
=========================================*/

.video-card{

    transition:.35s;

}

.video-card:hover{

    transform:translateY(-8px);

}

/*=========================================
    IMAGE
=========================================*/

.video-image{

    position:relative;

    height:220px;

    overflow:hidden;

    border-radius:18px;

    background:#111;

}

.video-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.video-card:hover img{

    transform:scale(1.08);

}

/*=========================================
    PLAY BUTTON
=========================================*/

.video-play{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(168,85,247,.95);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:24px;

    opacity:0;

    transition:.3s;

}

.video-card:hover .video-play{

    opacity:1;

}

/*=========================================
    TIME
=========================================*/

.video-time{

    position:absolute;

    right:15px;

    bottom:15px;

    background:rgba(0,0,0,.8);

    color:#fff;

    font-size:13px;

    padding:6px 10px;

    border-radius:6px;

}

/*=========================================
    INFO
=========================================*/

.video-info{

    padding-top:18px;

}

.video-info h3{

    color:#fff;

    font-size:22px;

    margin-bottom:6px;

}

.video-info p{

    color:#999;

    font-size:15px;

}

/*=========================================
    RESPONSIVE
=========================================*/

@media(max-width:1200px){

.video-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.video{

padding:70px 0;

}

.video-grid{

grid-template-columns:1fr;

}

.video-image{

height:230px;

}

}
/*=========================================
    VIDEOS PAGE
=========================================*/

.videos-page {

    padding: 100px 0;

    background: #07070d;

}

.videos-page .container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 25px;

}


/*=========================================
    PAGE HEADER
=========================================*/

.page-header {

    position: relative;

    padding: 110px 0 80px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(168, 85, 247, .18),
            transparent 55%
        ),
        #07070d;

    text-align: center;

    overflow: hidden;

}

.page-header::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: -300px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(168, 85, 247, .12);

    filter: blur(100px);

    border-radius: 50%;

}

.page-header .container {

    position: relative;

    z-index: 1;

}

.page-header h1 {

    margin: 0 0 15px;

    color: #fff;

    font-size: 52px;

    font-weight: 800;

    letter-spacing: 2px;

}

.page-header p {

    margin: 0;

    color: #999;

    font-size: 17px;

}


/*=========================================
    VIDEO GRID
=========================================*/

.video-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


/*=========================================
    VIDEO CARD
=========================================*/

.video-card {

    position: relative;

    background: #101018;

    border: 1px solid rgba(255,255,255,.05);

    border-radius: 16px;

    overflow: hidden;

    transition: .35s ease;

}

.video-card:hover {

    transform: translateY(-10px);

    border-color: #A855F7;

    box-shadow:
        0 15px 40px rgba(168,85,247,.18);

}


/*=========================================
    VIDEO IMAGE
=========================================*/

.video-image {

    position: relative;

    height: 240px;

    overflow: hidden;

    background: #0c0c13;

}

.video-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s ease;

}

.video-card:hover .video-image img {

    transform: scale(1.08);

}


/*=========================================
    IMAGE OVERLAY
=========================================*/

.video-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.55),
            transparent 60%
        );

    pointer-events: none;

}


/*=========================================
    NO IMAGE
=========================================*/

.video-no-image {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(168,85,247,.16),
            transparent 65%
        ),
        #101018;

    color: #A855F7;

    font-size: 55px;

}


/*=========================================
    PLAY BUTTON
=========================================*/

.video-play {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 3;

    transform: translate(-50%, -50%);

    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: rgba(168,85,247,.92);

    color: #fff;

    font-size: 23px;

    cursor: pointer;

    opacity: 0;

    transition: .35s ease;

    box-shadow:
        0 10px 35px rgba(168,85,247,.35);

}

.video-card:hover .video-play {

    opacity: 1;

}

.video-play:hover {

    background: #b967ff;

    transform:
        translate(-50%, -50%)
        scale(1.1);

}


/*=========================================
    VIDEO INFO
=========================================*/

.video-info {

    padding: 22px;

}

.video-info h3 {

    margin: 0 0 10px;

    color: #fff;

    font-size: 21px;

    font-weight: 700;

    line-height: 1.35;

}

.video-info p {

    margin: 0 0 16px;

    color: #999;

    font-size: 14px;

    line-height: 1.65;

}

.video-date {

    display: inline-block;

    color: #777;

    font-size: 13px;

}


/*=========================================
    EMPTY STATE
=========================================*/

.videos-empty {

    grid-column: 1 / -1;

    padding: 80px 30px;

    text-align: center;

    background: #101018;

    border: 1px solid rgba(255,255,255,.05);

    border-radius: 16px;

}

.videos-empty i {

    margin-bottom: 20px;

    color: #A855F7;

    font-size: 55px;

}

.videos-empty h2 {

    margin: 0 0 10px;

    color: #fff;

    font-size: 25px;

}

.videos-empty p {

    margin: 0;

    color: #888;

    font-size: 15px;

}


/*=========================================
    VIDEO MODAL
=========================================*/

.video-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: .3s ease;

}

.video-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

.video-modal-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.88);

    backdrop-filter: blur(8px);

}

.video-modal-content {

    position: relative;

    z-index: 2;

    width: min(100%, 1000px);

    max-height: 90vh;

    padding: 10px;

    background: #101018;

    border: 1px solid rgba(168,85,247,.25);

    border-radius: 18px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.65),
        0 0 50px rgba(168,85,247,.12);

}

.video-modal-content video,
.video-modal-content iframe {

    display: none;

    width: 100%;

    aspect-ratio: 16 / 9;

    border: 0;

    border-radius: 12px;

    background: #000;

}

.video-modal-content video {

    height: auto;

}


/*=========================================
    MODAL CLOSE
=========================================*/

.video-modal-close {

    position: absolute;

    top: -18px;

    right: -18px;

    z-index: 5;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 50%;

    background: #101018;

    color: #fff;

    font-size: 18px;

    cursor: pointer;

    transition: .3s ease;

}

.video-modal-close:hover {

    background: #A855F7;

    border-color: #A855F7;

    transform: rotate(90deg);

}


/*=========================================
    RESPONSIVE
=========================================*/

@media (max-width: 1200px) {

    .video-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 700px) {

    .videos-page {

        padding: 70px 0;

    }

    .page-header {

        padding: 80px 0 60px;

    }

    .page-header h1 {

        font-size: 38px;

    }

    .page-header p {

        font-size: 15px;

    }

    .video-grid {

        grid-template-columns: 1fr;

        gap: 22px;

    }

    .video-image {

        height: 220px;

    }

    .video-play {

        opacity: 1;

        width: 62px;

        height: 62px;

    }

    .video-info {

        padding: 20px;

    }

    .video-info h3 {

        font-size: 19px;

    }

    .video-modal {

        padding: 15px;

    }

    .video-modal-close {

        top: -12px;

        right: -8px;

        width: 40px;

        height: 40px;

    }

}


/*=========================================
    SMALL MOBILE
=========================================*/

@media (max-width: 420px) {

    .videos-page .container {

        padding: 0 15px;

    }

    .page-header h1 {

        font-size: 32px;

    }

    .video-image {

        height: 200px;

    }

}