.story-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    padding:18px 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#fff;

    background:linear-gradient(to bottom,
    rgba(0,0,0,.7),
    transparent);

}

.story-header .logo{

    font-size:22px;

    font-weight:700;

}

.back-btn{

    width:42px;
    height:42px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.back-btn:hover{

    background:#d60000;

    color:#fff;

}

/* ===========================
      SWIPER
=========================== */

.reelsSwiper{

    width:100%;

    height:100vh;

}

.swiper-slide{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#000;

}

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

.story-card{

    width:420px;

    max-width:100%;

    height:100vh;

    position:relative;

    overflow:hidden;

    background:#000;

}

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

.story-media{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

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

.story-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.88),
    rgba(0,0,0,.25),
    rgba(0,0,0,0));

}

/* ===========================
      CONTENT
=========================== */

.story-content{

    position:absolute;

    left:18px;

    bottom:35px;

    width:70%;

    z-index:20;

    color:#fff;

}

.story-category{

    display:inline-block;

    background:#d60000;

    padding:6px 16px;

    border-radius:30px;

    font-size:13px;

    margin-bottom:15px;

}

.story-title{

    font-size:30px;

    font-weight:700;

    line-height:1.35;

    margin-bottom:15px;

}

.story-date{

    font-size:14px;

    color:#ddd;

}

.story-date i{

    color:#ff4040;

    margin-right:6px;

}

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

.story-actions{

    position:absolute;

    right:15px;

    bottom:40px;

    display:flex;

    flex-direction:column;

    gap:22px;

    z-index:20;

}

.story-actions button{

    background:none;

    border:none;

    color:#fff;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.story-actions i{

    width:55px;

    height:55px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    transition:.3s;

}

.story-actions span{

    margin-top:6px;

    font-size:13px;

}

.story-actions button:hover i{

    background:#d60000;

    transform:scale(1.1);

}

/* ===========================
    PAGINATION
=========================== */

.swiper-pagination-bullet{

    background:#fff;

    opacity:.6;

}

.swiper-pagination-bullet-active{

    background:#d60000;

    opacity:1;

}

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

@media(min-width:992px){

.story-card{

    width:420px;

    border-radius:20px;

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

}

}

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

@media(max-width:991px){

.story-card{

    width:100%;

}

.story-title{

    font-size:26px;

}

}

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

@media(max-width:576px){

.story-header{

    padding:14px;

}

.story-header .logo{

    font-size:20px;

}

.story-title{

    font-size:22px;

}

.story-content{

    width:75%;

    bottom:25px;

}

.story-actions{

    right:10px;

    bottom:25px;

}

.story-actions i{

    width:48px;

    height:48px;

    font-size:20px;

}

.story-actions span{

    font-size:12px;

}

}