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

html,
body{
    overflow-x:hidden;
}

.sv-video,
.sv-video *,
.sv-video *::before,
.sv-video *::after{
    box-sizing:border-box;
}

/* SECTION */
.sv-video{
    width:100%;
    max-width:1280px;

    margin:50px auto;

    padding:40px;

    border-radius:20px;

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

    backdrop-filter:blur(10px);

    overflow:hidden;
}

/* TITLE */
.sv-section-title{
    margin:0 0 40px;

    text-align:center;

    font-size:28px;
    font-weight:700;
    letter-spacing:-0.5px;

    color:#111;
}

/* GRID */
.sv-video-grid{
    display:grid;

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

    gap:40px;
}

/* ITEM */
.sv-video-item{
    overflow:hidden;

    border-radius:20px;

    background:#000;

    box-shadow:
        0 12px 35px rgba(0,0,0,.10);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.sv-video-item:hover{
    transform:translateY(-5px);

    box-shadow:
        0 24px 60px rgba(0,0,0,.18);
}

/* TITLE */
.sv-video-title{
    margin:0;

    padding:14px 16px;

    background:#111;

    color:#fff;

    text-align:center;

    font-size:15px;
    font-weight:600;
}

/* THUMB */
.sv-video-thumb{
    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background-size:cover;
    background-position:center;

    cursor:pointer;
}

/* OVERLAY */
.sv-video-thumb::before{
    content:'';

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.35),
            rgba(0,0,0,.05)
        );

    z-index:1;
}

/* PLAY */
.sv-video-play{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:2;

    pointer-events:none;
}

.sv-video-play::before{
    content:'';

    width:78px;
    height:56px;

    border-radius:16px;

    background:#ff0000;

    box-shadow:
        0 10px 25px rgba(255,0,0,.35);
}

.sv-video-play::after{
    content:'';

    position:absolute;

    margin-left:6px;

    border-left:20px solid #fff;
    border-top:13px solid transparent;
    border-bottom:13px solid transparent;
}

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

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

.sv-video-modal{
    position:fixed;
    inset:0;

    display:none;

    align-items:center;
    justify-content:center;

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

    backdrop-filter:blur(8px);

    z-index:999999;

    padding:20px;
}

.sv-video-modal.active{
    display:flex;
}

/* INNER */
.sv-video-modal__inner{
    position:relative;

    width:100%;
    max-width:1200px;

    aspect-ratio:16 / 9;
}

/* CONTENT */
.sv-video-modal__content{
    width:100%;
    height:100%;

    background:#000;

    border-radius:20px;

    overflow:hidden;
}

/* INNER */
.sv-video-modal__inner{
    position:relative;

    width:100%;
    max-width:1200px;
}

/* IFRAME */
.sv-video-modal__content iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}

/* CLOSE */
.sv-video-modal__close{
    position:absolute;

    top:-55px;
    right:0;

    width:44px;
    height:44px;

    border:none;
    border-radius:50%;

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

    color:#fff;

    font-size:22px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}

.sv-video-modal__close:hover{
    background:rgba(255,255,255,.28);

    transform:rotate(90deg);
}
.sv-video-grid.is-single{
    grid-template-columns:1fr;
    justify-items:center;
}

.sv-video-grid.is-single .sv-video-item{
    width:100%;
    max-width:720px;
}
.sv-video-play,
.sv-video-play::before,
.sv-video-play::after{
    pointer-events:none;
}
/* =========================================
   TABLET
========================================= */

@media (max-width:1024px){

    .sv-video-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .sv-video{
        padding:25px;
    }
}

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

@media (max-width:768px){

    .sv-video{
        margin:10px 5px 50px;

        padding:15px;

        border-radius:16px;
    }

    .sv-section-title{
        margin-bottom:25px;

        font-size:22px;
    }

    .sv-video-title{
        padding:11px 12px;

        font-size:14px;
    }

    .sv-video-play::before{
        width:64px;
        height:46px;
    }

    .sv-video-play::after{
        border-left:16px solid #fff;
        border-top:10px solid transparent;
        border-bottom:10px solid transparent;
    }

    .sv-video-modal{
        padding:10px;
    }

    .sv-video-modal__content{
        height:34vh;

        border-radius:14px;
    }

    .sv-video-modal__close{
        top:-45px;
        right:0;

        width:38px;
        height:38px;

        font-size:18px;
    }
}