/* ======================================== */
/* REELS SECTION */
/* ======================================== */

.reels-section{

    width:100%;

    background:#07110C;

    padding:
    140px
    7%;

    overflow:hidden;
}

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

.reels-header{

    text-align:center;

    max-width:800px;

    margin:auto auto 70px;
}

/* TITLE */

.reels-header h2{

    font-size:60px;

    line-height:.95;

    font-weight:900;

    letter-spacing:-2px;

    color:#fff;

    margin-bottom:22px;
}

/* TEXT */

.reels-header p{

    font-size:18px;

    line-height:1.7;

    color:rgba(255,255,255,.72);
}

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

.reels-wrapper{

    display:flex;

    justify-content:center;

    gap:22px;

    overflow-x:auto;

    scroll-behavior:smooth;

    padding:
    10px
    40px
    20px;
}

/* HIDE SCROLL */

.reels-wrapper::-webkit-scrollbar{

    display:none;
}

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

.reel-card{

    position:relative;

    min-width:280px;

    width:280px;

    height:470px;

    border-radius:30px;

    overflow:hidden;

    flex-shrink:0;

    background:#000;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.45s ease;
}

/* BG EFFECT */

.reel-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.15));

    z-index:1;
}

/* HOVER */

.reel-card:hover{

    transform:
    translateY(-6px);
}

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

.reel-card img{

    position:relative;

    z-index:2;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s ease;
}

/* HOVER IMAGE */

.reel-card:hover img{

    transform:scale(1.04);
}

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

.reel-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(7,17,12,.65),
    rgba(0,0,0,.12));

    z-index:3;

    transition:.4s ease;
}

/* HOVER */

.reel-card:hover .reel-overlay{

    background:
    linear-gradient(
    to top,
    rgba(53,117,61,.55),
    rgba(0,0,0,.15));
}

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

.reel-play{

    position:absolute;

    top:50%;
    left:50%;

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

    width:78px;
    height:78px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    display:flex;

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

    color:#fff;

    font-size:34px;

    z-index:5;

    transition:.35s ease;
}

/* HOVER */

.reel-card:hover .reel-play{

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

    background:#E14514;
}

/* ======================================== */
/* PLAYING */
/* ======================================== */

.reel-card.playing{

    background:#000;
}

/* VIDEO */

.reel-card iframe{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border:none;

    z-index:10;

    border-radius:30px;
}

/* ======================================== */
/* TABLET */
/* ======================================== */

@media(max-width:1100px){

    .reels-wrapper{

        justify-content:flex-start;
    }

    .reel-card{

        min-width:250px;

        width:250px;

        height:460px;
    }
}

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

@media(max-width:768px){

    .reels-section{

        padding:
        90px
        20px;
    }

    .reels-header{

        margin-bottom:45px;
    }

    .reels-header h2{

        font-size:44px;

        line-height:1;
    }

    .reels-header p{

        font-size:16px;

        line-height:1.7;
    }

    .reels-wrapper{

        justify-content:flex-start;

        gap:18px;

        padding:
        10px
        5px
        10px;
    }

    .reel-card{

        min-width:220px;

        width:220px;

        height:400px;

        border-radius:24px;
    }

    .reel-card img{

        border-radius:24px;
    }

    .reel-play{

        width:72px;
        height:72px;

        font-size:28px;
    }

    .reel-card iframe{

        border-radius:24px;
    }
}

/* ========================================
LARGE DESKTOP
======================================== */

@media(max-width:1600px){

.reels-header h2{

    font-size:62px;
}

}

/* ========================================
LAPTOP
======================================== */

@media(max-width:1400px){

.reels-header{

    max-width:720px;
}

.reels-header h2{

    font-size:56px;
}

.reels-header p{

    font-size:18px;
}

.reels-wrapper{

    gap:22px;
}

.reel-card{

    min-width:260px;

    width:260px;

    height:460px;
}

}

/* ========================================
TABLET
======================================== */

@media(max-width:992px){

.reels-section{

    padding:
    110px
    50px;
}

.reels-header{

    margin-bottom:50px;
}

.reels-header h2{

    font-size:48px;

    line-height:1;
}

.reels-header p{

    font-size:17px;
}

.reels-wrapper{

    justify-content:flex-start;

    padding:
    10px
    10px
    15px;
}

.reel-card{

    min-width:240px;

    width:240px;

    height:420px;
}

.reel-play{

    width:72px;
    height:72px;

    font-size:28px;
}

}

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

@media(max-width:768px){

.reels-section{

    padding:
    80px
    24px;
}

.reels-header{

    margin-bottom:40px;
}

.reels-header h2{

    font-size:38px;

    line-height:1.05;

    letter-spacing:-1px;
}

.reels-header p{

    font-size:15px;

    line-height:1.7;
}

.reels-wrapper{

    gap:16px;

    padding:
    10px
    2px
    10px;
}

.reel-card{

    min-width:210px;

    width:210px;

    height:370px;

    border-radius:22px;
}

.reel-card img{

    border-radius:22px;
}

.reel-play{

    width:64px;
    height:64px;

    font-size:24px;
}

.reel-card iframe{

    border-radius:22px;
}

}

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

@media(max-width:480px){

.reels-header h2{

    font-size:32px;
}

.reel-card{

    min-width:190px;

    width:190px;

    height:340px;
}

.reel-play{

    width:58px;
    height:58px;

    font-size:20px;
}

}