/*=========================================================
                YOUTUBE BANNER
=========================================================*/

.youtube-banner{

    position:relative;

    padding:110px 0;

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f5fff6 45%,
        #eefbf0 100%
    );

    overflow:hidden;

}

/*============================
        BACKGROUND
=============================*/

.youtube-banner::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(34,197,94,.20),
        transparent 70%
    );

    filter:blur(50px);

}

.youtube-banner::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(22,163,74,.15),
        transparent 72%
    );

    filter:blur(70px);

}

/*============================
        WRAPPER
=============================*/

.youtube-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

}

/*============================
        LEFT
=============================*/

.youtube-content{

    max-width:580px;

}

.youtube-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:#fff;

    border:1px solid #e5e7eb;

    color:#dc2626;

    font-size:15px;

    font-weight:700;

    margin-bottom:25px;

    box-shadow:
    0 12px 28px rgba(0,0,0,.05);

}

.youtube-tag i{

    font-size:22px;

}

.youtube-content h2{

    font-size:clamp(44px,5vw,64px);

    line-height:1.05;

    font-weight:800;

    color:#1f2937;

    margin-bottom:24px;

}

.youtube-content h2 span{

    display:block;

    color:#15803d;

}

.youtube-content p{

    font-size:18px;

    line-height:1.9;

    color:#6b7280;

    margin-bottom:40px;

}

/*============================
        BUTTONS
=============================*/

.youtube-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.youtube-btn-primary,

.youtube-btn-secondary{

    height:58px;

    padding:0 34px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:999px;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.35s ease;

}

.youtube-btn-primary{

    background:#FF0000;

    color:#fff;

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

}

.youtube-btn-primary:hover{

    transform:translateY(-5px);

    background:#d60000;

    color:#fff;

}

.youtube-btn-secondary{

    background:#fff;

    color:#166534;

    border:2px solid #d1fae5;

}

.youtube-btn-secondary:hover{

    background:#f0fdf4;

    transform:translateY(-5px);

}

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

.youtube-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* Soft Background Glow */

.youtube-glow{

    position:absolute;

    width:720px;

    height:720px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(34,197,94,.18),
        rgba(22,163,74,.08),
        transparent 72%
    );

    filter:blur(60px);

    z-index:0;

}

/* White Floating Card */

.youtube-image::before{

    content:"";

    position:absolute;

    width:92%;

    height:92%;

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

    backdrop-filter:blur(14px);

    border-radius:48px;

    z-index:1;

    box-shadow:

    0 30px 80px rgba(0,0,0,.08);

}

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

.youtube-image img{

    position:relative;

    z-index:2;

    display:block;

    width:112%;

    max-width:720px;

    border-radius:48px;

    object-fit:cover;

    box-shadow:

    0 40px 100px rgba(0,0,0,.14);

    transition:

    transform .45s ease,

    box-shadow .45s ease;

}

/* Hover */

.youtube-image:hover img{

    transform:

    translateY(-8px)

    scale(1.02);

    box-shadow:

    0 55px 120px rgba(0,0,0,.18);

}

/*=========================================================
                FIRST VISIT ANIMATION
=========================================================*/

.intro-animation{

    animation:

    heroImageIntro

    1.25s

    cubic-bezier(.22,.61,.36,1)

    forwards;

}

@keyframes heroImageIntro{

0%{

opacity:0;

transform:

translateX(90px)

scale(.88);

}

60%{

opacity:1;

transform:

translateX(-10px)

scale(1.03);

}

100%{

opacity:1;

transform:

translateX(0)

scale(1);

}

}

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

@media(max-width:1100px){

.youtube-wrapper{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.youtube-content{

max-width:700px;

margin:auto;

}

.youtube-content p{

margin-bottom:35px;

}

.youtube-buttons{

justify-content:center;

}

.youtube-image{

order:-1;

}

.youtube-image img{

max-width:620px;

width:100%;

}

}

@media(max-width:768px){

.youtube-banner{

padding:80px 0;

}

.youtube-content h2{

font-size:38px;

}

.youtube-content p{

font-size:16px;

}

.youtube-buttons{

flex-direction:column;

}

.youtube-btn-primary,

.youtube-btn-secondary{

width:100%;

}

.youtube-image::before{

border-radius:30px;

}

.youtube-image img{

width:100%;

max-width:360px;

border-radius:30px;

}

.youtube-glow{

width:420px;

height:420px;

}

}

.youtube-image-card{

    position:relative;

    z-index:2;

    border-radius:48px;

    overflow:hidden;

}