/*==========================================================
                    YOUTUBE SECTION
==========================================================*/

.youtube-section{

    padding:110px 0;

    background:linear-gradient(
    180deg,
    #ffffff,
    #f8fff9
    );

}

.youtube-header{

    text-align:center;

    max-width:750px;

    margin:auto auto 70px;

}

.youtube-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    background:#FEF2F2;

    color:#DC2626;

    border-radius:50px;

    font-weight:700;

    margin-bottom:20px;

}

.youtube-badge i{

    font-size:22px;

}

.youtube-header h2{

    font-size:48px;

    color:#1F2937;

    margin-bottom:20px;

    font-weight:800;

}

.youtube-header h2 span{

    color:#16A34A;

}

.youtube-header p{

    color:#6B7280;

    font-size:18px;

    line-height:1.8;

}

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

.featured-video{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:40px;

    align-items:center;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    text-decoration:none;

    box-shadow:

    0 20px 50px rgba(0,0,0,.08);

    margin-bottom:60px;

    transition:.4s;

}

.featured-video:hover{

    transform:translateY(-8px);

}

.featured-thumbnail{

    position:relative;

    overflow:hidden;

}

.featured-thumbnail img{

    width:100%;

    display:block;

    transition:.5s;

}

.featured-video:hover img{

    transform:scale(1.05);

}

.play-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.play-overlay i{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#FF0000;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

}

.featured-content{

    padding:40px;

}

.featured-content span{

    color:#16A34A;

    font-weight:700;

    text-transform:uppercase;

}

.featured-content h3{

    margin:18px 0;

    color:#1F2937;

    font-size:32px;

    line-height:1.4;

}

.video-meta{

    display:flex;

    gap:25px;

    color:#6B7280;

    font-weight:600;

}

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

.video-grid{

    display:grid;

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

    gap:30px;

}

.video-card{

    display:block;

    text-decoration:none;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:

    0 18px 45px rgba(0,0,0,.06);

    transition:.35s;

}

.video-card:hover{

    transform:translateY(-8px);

}

.video-thumb{

    position:relative;

}

.video-thumb img{

    width:100%;

    display:block;

}

.play-btn{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.play-btn i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#FF0000;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

}

.video-info{

    padding:25px;

}

.video-info h4{

    color:#1F2937;

    line-height:1.6;

    margin-bottom:15px;

    font-size:19px;

}

.video-info span{

    color:#6B7280;

    font-size:15px;

}

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

.youtube-footer{

    margin-top:60px;

    text-align:center;

}

.youtube-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    border-radius:50px;

    background:#FF0000;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.youtube-btn:hover{

    background:#D90000;

    transform:translateY(-4px);

    color:#fff;

}

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

@media(max-width:992px){

.featured-video{

grid-template-columns:1fr;

}

.video-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.youtube-section{

padding:80px 0;

}

.youtube-header h2{

font-size:34px;

}

.featured-content{

padding:25px;

}

.featured-content h3{

font-size:24px;

}

.play-overlay i{

width:70px;

height:70px;

font-size:34px;

}

}

.youtube-modal{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

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

backdrop-filter:blur(10px);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

}

.youtube-modal.active{

opacity:1;

visibility:visible;

}

.youtube-container{

position:relative;

width:90%;

max-width:1100px;

aspect-ratio:16/9;

background:#000;

border-radius:20px;

overflow:hidden;

}

.youtube-player{

width:100%;

height:100%;

}

.youtube-player iframe{

width:100%;

height:100%;

border:none;

}

.youtube-close{

position:absolute;

top:-55px;

right:0;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#fff;

cursor:pointer;

font-size:28px;

z-index:5;

}

body.modal-open{

overflow:hidden;

}