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

.video-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:50px;
}

.video-filter button{

    border:none;

    background:#ffffff;

    color:#1c467d;

    padding:12px 26px;

    border-radius:40px;

    font-weight:600;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.35s;

    cursor:pointer;

}

.video-filter button:hover{

    background:#1c467d;

    color:#fff;

    transform:translateY(-3px);

}

.video-filter button.active{

    background:#1c467d;

    color:#fff;

    box-shadow:0 12px 30px rgba(28,70,125,.35);

}

.video-description{

    padding:5px 15px 10px;

    font-size:16px;

    line-height:1.9;

    color:#555;
    
    text-align:justify;

}

#videoFrameContainer{

    background:#000;

    border-radius:15px;

}


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

.video-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.video-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.video-thumb{

    position:relative;

    overflow:hidden;

}

.video-thumb img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

    display:block;

}

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

    transform:scale(1.08);

}


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

.video-overlay{

    position:absolute;

    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.35s;

}

.video-card:hover .video-overlay{

    opacity:1;

}

.play-btn{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#fff;

    color:#dc3545;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    text-decoration:none;

    transition:.35s;

}

.play-btn:hover{

    background:#dc3545;

    color:#fff;

    transform:scale(1.12);

}


/*====================================================
PLATFORM BADGE
====================================================*/

.platform-badge{

    position:absolute;

    top:15px;

    right:15px;

    background:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    box-shadow:0 5px 15px rgba(0,0,0,.18);

}

.platform-badge.youtube{

    color:#dc3545;

}

.platform-badge.instagram{

    color:#C13584;

}


/*====================================================
BODY
====================================================*/

.video-body{

    padding:22px;

}

.video-type{

    display:inline-block;

    background:rgba(13,110,253,.10);

    color:var(--primary);

    padding:5px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:14px;

}

.video-body h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:15px;

    color:#222;

}

.video-body p{

    color:#666;

    line-height:1.7;

    min-height:78px;

    margin-bottom:20px;

}

.watch-link{

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.watch-link:hover{

    color:#dc3545;

}

.instagram-preview{

text-align:center;

padding:15px;

}

.instagram-preview .btn{

padding:14px 30px;

font-size:17px;

font-weight:600;

margin-bottom:25px;

}

.instagram-preview img{

max-height:650px;

border-radius:12px;

box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.video-actions{

display:flex;

justify-content:space-between;

align-items:center;

gap:12px;

margin-top:20px;

flex-wrap:wrap;

}

.external-link{

color:#e1306c;

font-weight:600;

text-decoration:none;

}

.external-link:hover{

color:#c13584;

}


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

#videoModal .modal-content{

    border:none;

    border-radius:18px;

    overflow:hidden;

}

#videoModal .modal-header{

    background:#f8f9fa;

}

#videoTitle{

    font-weight:700;

    color:var(--primary);

}

#videoFrameContainer iframe{

    width:100%;

    height:100%;

    border:none;

    border-radius:10px;

}

#videoDescription{

    line-height:1.8;

    color:#555;

}

#videoType{

    background:var(--primary)!important;

}

#videoPlatform{

    background:#dc3545!important;

}


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

@media(max-width:991px){

.video-thumb img{

    height:230px;

}

.video-body h4{

    font-size:20px;

}

}

@media(max-width:767px){

.video-filter{

    gap:8px;

}

.video-filter button{

    padding:9px 18px;

    font-size:14px;

}

.video-thumb img{

    height:220px;

}

.video-overlay{

    opacity:1;

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

}

.play-btn{

    width:60px;

    height:60px;

    font-size:24px;

}

.video-body{

    padding:18px;

}

.video-body h4{

    font-size:18px;

}

.video-body p{

    min-height:auto;

}

}