/*==================================================
NDV TODAY UI FRAMEWORK
Version : 2.0
==================================================*/


/*=========================
RESET
=========================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
    width:100%;
    font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

    font-size:16px;
    line-height:1.6;

    background:#f7f8fa;
    color:#1b1b1b;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
}
.container,

.row-layout,

.main-content,

.article-page,

.article-body{

max-width:100%;

overflow-x:hidden;

}
.article-featured{

width:100%;

margin:30px 0;

}

.article-featured img{

width:100%;

display:block;

height:auto;

border-radius:14px;

}
/*=========================
ROOT VARIABLES
=========================*/

:root{

    /* Brand */

    --primary:#e30613;
    --primary-dark:#b9000c;

    /* Colors */

    --secondary:#111827;

    --text:#1f2937;

    --text-light:#6b7280;

    --light:#ffffff;

    --background:#f7f8fa;

    --border:#e5e7eb;

    --border-light:#f1f3f5;

    /* Radius */

    --radius-xs:6px;

    --radius-sm:10px;

    --radius:12px;

    --radius-lg:18px;

    --radius-xl:25px;

    /* Shadows */

    --shadow-sm:
    0 2px 8px rgba(0,0,0,.05);

    --shadow:
    0 4px 20px rgba(0,0,0,.08);

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

    /* Transition */

    --transition:.28s ease;

}


/*=========================
TYPOGRAPHY
=========================*/

h1,h2,h3,h4,h5,h6{

    font-weight:700;

    line-height:1.25;

}

p{

    line-height:1.8;

}

a{

    color:inherit;

    text-decoration:none;

    transition:.25s;

}

img{

    display:block;

    max-width:100%;

}

ul{

    list-style:none;

}

/*==================================================
UTILITY CLASSES
==================================================*/

.flex{

display:flex;

}

.flex-center{

display:flex;

align-items:center;

justify-content:center;

}

.flex-between{

display:flex;

align-items:center;

justify-content:space-between;

}

.flex-column{

display:flex;

flex-direction:column;

}

.grid{

display:grid;

}

.text-center{

text-align:center;

}

.mt-10{

margin-top:10px;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mb-20{

margin-bottom:20px;

}

.hidden{

display:none;

}
/*=========================
LAYOUT
=========================*/

.container{

    width:min(1400px,94%);

    margin:auto;

}

.section{

    margin:45px 0;

}

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.section-title h2{

    font-size:30px;

    font-weight:800;

}

.view-all{

    color:var(--primary);

    font-weight:700;

}


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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:12px 22px;

border:none;

border-radius:999px;

cursor:pointer;

font-weight:700;

transition:var(--transition);

}

.btn:hover{

transform:translateY(-2px);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}


/*=========================
CARDS
=========================*/

.card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

border:1px solid transparent;

}

.card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-lg);

border-color:#ececec;

}

/*=========================
BADGES
=========================*/

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-size:12px;

    font-weight:700;

}

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

.ndv-header{
    position:sticky;
    top:0;
    z-index:9999;
    background:#fff;
    box-shadow:0 2px 20px rgba(0,0,0,.08);
}

/*==================================================
TOP BAR
==================================================*/

.topbar{
    background:#111827;
    color:#fff;
    font-size:13px;
}

.topbar-inner{
    height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.topbar-left,
.topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.divider{
    opacity:.35;
}

.topbar-right a{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:.3s;
}

.topbar-right a:hover{
    background:#e30613;
}

/*====================================
PREMIUM BREAKING NEWS
====================================*/

.premium-breaking{

background:#fff;

border-top:1px solid #eee;

border-bottom:1px solid #eee;

}


.breaking-wrapper{

display:flex;

align-items:center;

height:54px;

overflow:hidden;

}

.breaking-left{

background:#e30613;

color:#fff;

padding:0 18px;

height:100%;

display:flex;

align-items:center;

gap:8px;

font-size:14px;

font-weight:700;

flex:none;

}

.breaking-slider{

position:relative;

flex:1;

height:54px;

overflow:hidden;

}

.breaking-item{

position:absolute;

left:20px;

top:50%;

transform:translateY(-50%);

opacity:0;

transition:.45s;

font-size:15px;

font-weight:600;

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

right:20px;

}

.breaking-item.active{

opacity:1;

}

.live-dot{

width:10px;

height:10px;

border-radius:50%;

background:#fff;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.6);

opacity:.4;

}

100%{

transform:scale(1);

}

}

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

.header-main{
    background:#fff;
    border-bottom:1px solid #ececec;
}

.header-main-inner{

    display:grid;

    grid-template-columns:
    50px
    1fr
    90px;

    align-items:center;

    min-height:82px;

    column-gap:25px;

}
/*==================================================
MENU BUTTON
==================================================*/

.menu-btn{
    display:none;

 
}

.menu-btn:hover{

    background:#e30613;

    color:#fff;

}

/*==================================================
LOGO
==================================================*/

.site-logo{

    flex:0 0 170px;

    display:flex;

    align-items:center;

}
.site-logo img{

    width:170px;

    height:auto;

    display:block;

}
/*==================================================
QUICK LINKS
==================================================*/

.quick-links{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:34px;

}
.quick-links a{

    font-size:15px;

    font-weight:600;

    color:#222;

    position:relative;

}

.quick-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#e30613;

    transition:.3s;

}

.quick-links a:hover{

    color:#e30613;

}

.quick-links a:hover::after{

    width:100%;

}

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

.header-icons{

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:12px;

}

.icon-btn{

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;

    transition:.3s;

    font-size:18px;

}

.icon-btn:hover{

    background:#e30613;

    color:#fff;

}

/*==================================================
NAVIGATION
==================================================*/

.nav-bar{

    background:#fff;

    border-bottom:1px solid #ececec;

}

.desktop-nav{

    width:100%;

}

.nav-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:34px;

}

.nav-menu>li{

    position:relative;

}

.nav-menu>li>a{

    display:block;

    padding:18px 0;

    font-size:15px;

    font-weight:700;

    color:#222;

    transition:.25s;

}

.nav-menu>li>a:hover{

    color:#e30613;

}

/*==================================================
DROPDOWN
==================================================*/

.dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:240px;

    background:#fff;

    border-radius:12px;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s;

    padding:12px 0;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    width:100%;

}

.dropdown-menu a{

    display:block;

    padding:12px 20px;

    color:#333;

    font-size:14px;

}

.dropdown-menu a:hover{

    background:#f7f7f7;

    color:#e30613;

}

/*==================================================
BREAKING NEWS
==================================================*/

.breaking-news{

    background:#d60000;

}

.breaking-inner{

    display:grid;

    grid-template-columns:180px 1fr;

    align-items:center;

}

.breaking-title{

    background:#9f0000;

    color:#fff;

    text-align:center;

    padding:14px;

    font-size:14px;

    font-weight:700;

}

.breaking-text{

    color:#fff;

    padding-left:18px;

    font-weight:600;

}
.mobile-category-scroll{

display:none;

}

/*======================================
MOBILE BOTTOM NAVIGATION
======================================*/

.mobile-bottom-nav{

display:none;

}

@media(max-width:992px){

.mobile-bottom-nav{

position:fixed;

left:0;

bottom:0;

width:100%;

height:68px;

background:#fff;

display:grid;

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

box-shadow:0 -4px 18px rgba(0,0,0,.12);

z-index:999999;

}

.mobile-bottom-nav a{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

font-size:11px;

font-weight:600;

color:#666;

gap:4px;

}

.mobile-bottom-nav i{

font-size:20px;

}

.mobile-bottom-nav .active{

color:#e30613;

}

body{

padding-bottom:70px;

}

}

.mobile-more-sheet{

position:fixed;

left:0;

right:0;

bottom:-100%;

background:#fff;

border-radius:25px 25px 0 0;

padding:25px;

box-shadow:0 -12px 30px rgba(0,0,0,.2);

transition:.35s;

z-index:9999999;

}

.mobile-more-sheet.show{

bottom:68px;

}

.sheet-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.sheet-header h3{

font-size:22px;

}

.sheet-header button{

border:none;

background:none;

font-size:22px;

cursor:pointer;

}

.sheet-links{

display:grid;

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

gap:18px;

}

.sheet-links a{

background:#f6f6f6;

padding:16px;

border-radius:12px;

text-align:center;

font-weight:700;

transition:.25s;

}

.sheet-links a:hover{

background:#e30613;

color:#fff;

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

@media (max-width:992px){

/* ---------- General ---------- */

.container{
    width:96%;
}

.section{
    margin:30px 0;
}

.section-title h2{
    font-size:24px;
}


.breaking-wrapper{

height:46px;

}

.breaking-left{

padding:0 12px;

font-size:12px;

}

.breaking-item{

font-size:14px;

left:14px;

right:14px;

}

/* ---------- Top Bar ---------- */

.topbar{
    display:none;
}

/* ---------- Header ---------- */

.menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border:none;
    background:#f3f3f3;
    border-radius:10px;
    font-size:20px;
    cursor:pointer;
}

.header-main-inner{

    display:flex;

    align-items:center;

    min-height:90px;

    gap:30px;

}
.quick-links{
    display:none;
}

.site-logo{
    justify-content:center;
}

.site-logo img{
    height:56px;
    width:auto;
}

/* ---------- Mobile Drawer ---------- */

.nav-bar{

    display:none;

    position:fixed;

    top:78px;

    left:0;

    width:100vw;

    height:calc(100vh - 78px);

    background:#fff;

    overflow-y:auto;

    z-index:99999;

}

.nav-bar.show{
    display:block;
}

.desktop-nav{
    padding:0;
}

.nav-menu{

    display:flex;

    flex-direction:column;

    gap:0;

    align-items:stretch;

}

.nav-menu li{
    width:100%;
}

.nav-menu>li>a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-bottom:1px solid #eee;

    font-size:17px;

}

/* ---------- Mobile Dropdown ---------- */

.dropdown-menu{

    position:static;

    display:none;

    opacity:1;

    visibility:visible;

    transform:none;

    width:100%;

    min-width:100%;

    border-radius:0;

    box-shadow:none;

    padding:0;

    background:#f8f8f8;

}

.dropdown.open .dropdown-menu{
    display:block;
}

.dropdown-menu a{

    padding:14px 40px;

    font-size:15px;

}

/* ---------- Breaking ---------- */

.breaking-inner{
    grid-template-columns:120px 1fr;
}

.breaking-title{
    font-size:12px;
}
.mobile-category-scroll{

display:block;

background:#fff;

overflow-x:auto;

overflow-y:hidden;

border-bottom:1px solid #eee;

white-space:nowrap;

-webkit-overflow-scrolling:touch;

scrollbar-width:none;

}

.mobile-category-scroll::-webkit-scrollbar{

display:none;

}

.mobile-category-inner{

display:flex;

align-items:center;

gap:26px;

padding:14px 16px;

width:max-content;

}

.mobile-category-inner a{

font-size:15px;

font-weight:700;

color:#222;

text-decoration:none;

position:relative;

padding-bottom:8px;

flex:none;

}

.mobile-category-inner a.active{

color:#e30613;

}

.mobile-category-inner a.active::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:3px;

background:#e30613;

border-radius:20px;

}
}

.hero-section{

margin-top:25px;

}

/*==================================================
PREMIUM HERO
==================================================*/

.premium-hero{
    margin:30px 0 40px;
}

.premium-hero-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

    align-items:stretch;

}

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

.premium-hero-main{

    position:relative;

    border-radius:16px;

    overflow:hidden;

    min-height:560px;

    background:#000;

}

.premium-hero-main a{

    display:block;

    width:100%;

    height:100%;

}

.premium-hero-main img{

    width:100%;

    height:560px;

    object-fit:cover;

    transition:.5s;

}

.premium-hero-main:hover img{

    transform:scale(1.05);

}

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

.premium-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:35px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.88)
    );

}

.premium-overlay h1{

    color:#fff;

    font-size:42px;

    line-height:1.2;

    font-weight:800;

    margin-top:15px;

    text-shadow:0 3px 10px rgba(0,0,0,.7);

}

.premium-badge{

    display:inline-block;

    background:#e30613;

    color:#fff;

    padding:7px 14px;

    border-radius:5px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

}

/*==============================
RIGHT COLUMN
==============================*/

.premium-hero-right{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.premium-small-card{

    display:flex;

    gap:15px;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

    transition:.3s;

}

.premium-small-card:hover{

    transform:translateY(-3px);

}

.premium-small-card img{

    width:170px;

    height:130px;

    object-fit:cover;

}

.premium-small-content{

    padding:14px 14px 14px 0;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.premium-category{

    font-size:12px;

    color:#e30613;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:8px;

}

.premium-small-content h3{

    font-size:18px;

    line-height:1.45;

    color:#111;

}

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

@media(max-width:992px){

.premium-hero-grid{

grid-template-columns:1fr;

}

.premium-hero-main{

min-height:320px;

}

.premium-hero-main img{

height:320px;

}

.premium-overlay{

padding:20px;

}

.premium-overlay h1{

font-size:26px;

}

.premium-small-card{

flex-direction:row;

}

.premium-small-card img{

width:130px;

height:90px;

}

.premium-small-content h3{

font-size:15px;

}

}

/*====================================
PREMIUM HERO SLIDER
====================================*/

.premium-slide{

position:absolute;

inset:0;

opacity:0;

visibility:hidden;

transition:opacity .7s ease;

}

.premium-slide.active{

opacity:1;

visibility:visible;

z-index:2;

}

.premium-slide img{

width:100%;

height:560px;

object-fit:cover;

}

.premium-dots{

position:absolute;

left:50%;

bottom:20px;

transform:translateX(-50%);

display:flex;

gap:8px;

z-index:20;

}

.premium-dot{

width:10px;

height:10px;

border-radius:50%;

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

cursor:pointer;

transition:.3s;

}

.premium-dot.active{

width:28px;

border-radius:20px;

background:#fff;

}

.hero-prev,
.hero-next{

position:absolute;

top:50%;

transform:translateY(-50%);

width:48px;

height:48px;

border:none;

border-radius:50%;

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

color:#fff;

cursor:pointer;

z-index:30;

transition:.3s;

}

.hero-prev{

left:18px;

}

.hero-next{

right:18px;

}

.hero-prev:hover,
.hero-next:hover{

background:#e30613;

}

@media(max-width:992px){

.hero-prev,
.hero-next{

width:38px;

height:38px;

font-size:14px;

}

}

/*==================================================
LATEST NEWS
==================================================*/

.latest-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:24px;

margin-top:25px;

}

.latest-featured{

position:relative;

overflow:hidden;

border-radius:16px;

background:#000;

min-height:420px;

}

.latest-featured img{

width:100%;

height:420px;

object-fit:cover;

transition:.4s;

}

.latest-featured:hover img{

transform:scale(1.05);

}

.latest-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:25px;

background:linear-gradient(

transparent,

rgba(0,0,0,.88)

);

}

.latest-category{

display:inline-block;

background:#e30613;

color:#fff;

padding:6px 12px;

font-size:12px;

border-radius:4px;

font-weight:700;

margin-bottom:12px;

}

.latest-overlay h2{

color:#fff;

font-size:34px;

line-height:1.3;

}

.latest-list{

display:flex;

flex-direction:column;

gap:16px;

}

.latest-item{

display:flex;

gap:14px;

background:#fff;

border-radius:10px;

padding:12px;

box-shadow:0 3px 12px rgba(0,0,0,.07);

transition:.3s;

}

.latest-item:hover{

transform:translateY(-2px);

}

.latest-item img{

width:140px;

height:95px;

object-fit:cover;

border-radius:8px;

}

.latest-time{

font-size:12px;

font-weight:700;

color:#e30613;

}

.latest-item h3{

margin-top:8px;

font-size:16px;

line-height:1.45;

}

.popular-grid{

display:grid;

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

gap:24px;

margin-top:25px;

}

.grid-card{

display:block;

background:#fff;

border-radius:12px;

overflow:hidden;

transition:.3s;

}

.grid-card:hover{

transform:translateY(-4px);

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.grid-card img{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

.grid-card p{

padding:12px;

font-size:17px;

font-weight:700;

line-height:1.55;

color:#222;

}
@media(max-width:992px){

.latest-layout{

grid-template-columns:1fr;

}

.latest-featured{

min-height:280px;

}

.latest-featured img{

height:280px;

}

.latest-overlay h2{

font-size:24px;

}

.popular-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:640px){

.popular-grid{

grid-template-columns:1fr;

}

}

.tab-header{

display:flex;

align-items:center;

gap:15px;

margin-bottom:20px;

border-bottom:2px solid #eee;

}

.tab-btn{

padding:10px 18px;

cursor:pointer;

font-weight:700;

border-bottom:3px solid transparent;

transition:.3s;

}

.tab-btn.active{

color:#e30613;

border-color:#e30613;

}

/*==================================================
CATEGORY BLOCKS
==================================================*/

.category-section{

margin:55px 0;

}

.section-heading{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:22px;

border-bottom:3px solid #e30613;

padding-bottom:12px;

}

.section-heading h2{

font-size:30px;

font-weight:800;

}

.section-heading a{

text-decoration:none;

color:#111;

}

.view-all-link{

font-weight:700;

color:#e30613;

}

.category-grid{

display:grid;

grid-template-columns:1.8fr 1fr;

gap:25px;

}

.category-featured{

background:#fff;

border-radius:14px;

overflow:hidden;

box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.category-featured img{

width:100%;

height:380px;

object-fit:cover;

transition:.4s;

}

.category-featured:hover img{

transform:scale(1.04);

}

.category-featured-content{

padding:20px;

}

.category-featured-content span{

font-size:12px;

color:#e30613;

font-weight:700;

}

.category-featured-content h3{

margin-top:12px;

font-size:30px;

line-height:1.35;

}

.category-list{

display:flex;

flex-direction:column;

gap:16px;

}

.category-item{

display:flex;

gap:14px;

background:#fff;

padding:12px;

border-radius:10px;

box-shadow:0 3px 10px rgba(0,0,0,.06);

transition:.3s;

}

.category-item:hover{

transform:translateY(-2px);

}

.category-item img{

width:140px;

height:95px;

object-fit:cover;

border-radius:8px;

}

.category-item span{

font-size:12px;

font-weight:700;

color:#e30613;

}

.category-item h4{

margin-top:8px;

font-size:16px;

line-height:1.45;

}

@media(max-width:992px){

.category-grid{

grid-template-columns:1fr;

}

.category-featured img{

height:260px;

}

}

.tab-content{
display:none;
}

.tab-content.active{
display:block;
}

.tab-btn{
cursor:pointer;
}

.tab-btn.active{
background:#e30613;
color:#fff;
}

/*=========================================
PREMIUM CATEGORY BLOCK
=========================================*/

.category-section{

margin:70px 0;

}

.section-heading{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.section-heading h2{

font-size:34px;

font-weight:800;

}

.view-all-link{

color:#e30613;

font-weight:700;

}

.premium-category-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:28px;

align-items:start;

}

.premium-featured{

background:#fff;

border-radius:14px;

overflow:hidden;

transition:.3s;

}

.premium-featured:hover{

transform:translateY(-3px);

box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.premium-featured img{

width:100%;

height:420px;

object-fit:cover;

}

.premium-featured-content{

padding:18px;

}

.premium-featured-content span{

font-size:13px;

color:#e30613;

font-weight:700;

}

.premium-featured-content h3{

margin-top:10px;

font-size:32px;

line-height:1.3;

font-weight:800;

}

.premium-side-list{

display:flex;

flex-direction:column;

gap:18px;

}

.premium-side-item{

display:flex;

gap:15px;

background:#fff;

padding:12px;

border-radius:12px;

transition:.25s;

}

.premium-side-item:hover{

transform:translateX(6px);

}

.premium-side-item img{

width:145px;

height:100px;

object-fit:cover;

border-radius:8px;

flex-shrink:0;

}

.premium-side-item span{

font-size:12px;

color:#e30613;

font-weight:700;

}

.premium-side-item h4{

margin-top:8px;

font-size:17px;

line-height:1.45;

font-weight:700;

}

@media(max-width:992px){

.premium-category-grid{

grid-template-columns:1fr;

}

.premium-featured img{

height:280px;

}

}

/*=========================================
PREMIUM EDITOR PICKS
=========================================*/

.editor-section{

margin:70px 0;

}

.editor-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:28px;

}

.editor-featured{

position:relative;

overflow:hidden;

border-radius:14px;

}

.editor-featured img{

width:100%;

height:500px;

object-fit:cover;

display:block;

transition:.35s;

}

.editor-featured:hover img{

transform:scale(1.05);

}

.editor-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:25px;

background:linear-gradient(
transparent,
rgba(0,0,0,.92)
);

}

.editor-label{

display:inline-block;

background:#e30613;

color:#fff;

padding:6px 12px;

font-size:12px;

font-weight:700;

border-radius:4px;

margin-bottom:15px;

}

.editor-overlay h2{

color:#fff;

font-size:34px;

line-height:1.25;

font-weight:800;

}

.editor-list{

display:flex;

flex-direction:column;

gap:18px;

}

.editor-item{

display:flex;

gap:15px;

background:#fff;

padding:12px;

border-radius:12px;

transition:.25s;

}

.editor-item:hover{

transform:translateX(6px);

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.editor-item img{

width:150px;

height:100px;

border-radius:10px;

object-fit:cover;

flex-shrink:0;

}

.editor-item h3{

font-size:17px;

line-height:1.45;

font-weight:700;

color:#222;

}

@media(max-width:992px){

.editor-layout{

grid-template-columns:1fr;

}

.editor-featured img{

height:300px;

}

.editor-overlay h2{

font-size:24px;

}

.editor-item img{

width:120px;

height:80px;

}

}

/*=========================================
PREMIUM VIDEOS
=========================================*/

.video-section{

margin:70px 0;

}

.premium-video-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:28px;

}

.featured-video{

background:#fff;

border-radius:14px;

overflow:hidden;

box-shadow:0 5px 18px rgba(0,0,0,.08);

transition:.3s;

}

.featured-video:hover{

transform:translateY(-4px);

}

.video-thumb{

position:relative;

overflow:hidden;

}

.video-thumb img{

width:100%;

height:420px;

object-fit:cover;

transition:.4s;

}

.featured-video:hover img{

transform:scale(1.05);

}

.play-button{

position:absolute;

left:50%;

top:50%;

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

width:90px;

height:90px;

border-radius:50%;

background:rgba(227,6,19,.9);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:34px;

}

.featured-video h2{

padding:20px;

font-size:30px;

line-height:1.35;

font-weight:800;

}

.video-list{

display:flex;

flex-direction:column;

gap:18px;

}

.video-item{

display:flex;

gap:15px;

background:#fff;

padding:12px;

border-radius:12px;

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

transition:.25s;

}

.video-item:hover{

transform:translateX(6px);

}

.video-thumb-small{

position:relative;

flex-shrink:0;

}

.video-thumb-small img{

width:150px;

height:95px;

object-fit:cover;

border-radius:10px;

}

.play-small{

position:absolute;

left:50%;

top:50%;

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

width:42px;

height:42px;

border-radius:50%;

background:rgba(227,6,19,.9);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:15px;

}

.video-item h3{

font-size:17px;

line-height:1.45;

font-weight:700;

color:#222;

}

@media(max-width:992px){

.premium-video-layout{

grid-template-columns:1fr;

}

.video-thumb img{

height:280px;

}

.featured-video h2{

font-size:22px;

}

.video-thumb-small img{

width:120px;

height:80px;

}

}

/*=========================================
PREMIUM SHORTS
=========================================*/

.shorts-section{

margin:70px 0;

}

.shorts-slider{

display:flex;

gap:18px;

overflow-x:auto;

padding-bottom:10px;

scrollbar-width:none;

}

.shorts-slider::-webkit-scrollbar{

display:none;

}

.short-card{

min-width:220px;

background:#fff;

border-radius:18px;

overflow:hidden;

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

transition:.3s;

}

.short-card:hover{

transform:translateY(-5px);

}

.short-thumb{

position:relative;

}

.short-thumb img{

width:100%;

height:390px;

object-fit:cover;

}

.short-play{

position:absolute;

left:50%;

top:50%;

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

width:60px;

height:60px;

border-radius:50%;

background:rgba(227,6,19,.92);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

}

.short-card h4{

padding:15px;

font-size:16px;

line-height:1.45;

font-weight:700;

}

@media(max-width:992px){

.short-card{

min-width:180px;

}

.short-thumb img{

height:320px;

}

}

/*=========================================
PREMIUM VISUAL STORIES
=========================================*/

.stories-section{

margin:70px 0;

}

.stories-carousel{

display:flex;

gap:18px;

overflow-x:auto;

scroll-snap-type:x mandatory;

padding-bottom:10px;

scrollbar-width:none;

}

.stories-carousel::-webkit-scrollbar{

display:none;

}

.story-card{

position:relative;

min-width:200px;

height:360px;

border-radius:18px;

overflow:hidden;

flex-shrink:0;

scroll-snap-align:start;

transition:.35s;

box-shadow:0 8px 24px rgba(0,0,0,.08);

}

.story-card:hover{

transform:translateY(-6px);

}

.story-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.story-card:hover img{

transform:scale(1.06);

}

.story-progress{

position:absolute;

top:10px;

left:10px;

right:10px;

height:4px;

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

border-radius:10px;

z-index:3;

}

.story-progress::after{

content:"";

display:block;

width:40%;

height:100%;

background:#fff;

border-radius:10px;

}

.story-gradient{

position:absolute;

left:0;

right:0;

bottom:0;

padding:20px;

background:linear-gradient(
transparent,
rgba(0,0,0,.88)
);

}

.story-gradient h3{

color:#fff;

font-size:18px;

line-height:1.4;

font-weight:700;

}

@media(max-width:992px){

.story-card{

min-width:170px;

height:300px;

}

.story-gradient h3{

font-size:15px;

}

}

/*=========================================
PREMIUM TRENDING
=========================================*/

.premium-trending{

margin:30px 0;

}

.trending-box{

display:flex;

align-items:center;

gap:20px;

background:#fff;

padding:16px 20px;

border-radius:14px;

box-shadow:0 5px 20px rgba(0,0,0,.06);

overflow:hidden;

}

.trending-label{

background:#e30613;

color:#fff;

padding:10px 18px;

border-radius:30px;

font-weight:700;

white-space:nowrap;

display:flex;

align-items:center;

gap:8px;

}

.trending-slider{

display:flex;

gap:14px;

overflow-x:auto;

scroll-behavior:smooth;

flex:1;

scrollbar-width:none;

}

.trending-slider::-webkit-scrollbar{

display:none;

}

.trend-chip{

background:#f4f4f4;

padding:10px 16px;

border-radius:30px;

white-space:nowrap;

font-weight:600;

transition:.3s;

flex-shrink:0;

}

.trend-chip span{

color:#e30613;

font-weight:800;

margin-right:4px;

}

.trend-chip:hover{

background:#e30613;

color:#fff;

}

.trend-chip:hover span{

color:#fff;

}

.trending-controls{

display:flex;

gap:8px;

}

.trending-controls button{

width:40px;

height:40px;

border:none;

border-radius:50%;

background:#f2f2f2;

cursor:pointer;

transition:.3s;

}

.trending-controls button:hover{

background:#e30613;

color:#fff;

}

@media(max-width:992px){

.trending-box{

flex-wrap:wrap;

}

.trending-controls{

display:none;

}

}

/*=========================================
PREMIUM FOOTER
=========================================*/

.premium-footer{

background:#111827;

color:#fff;

margin-top:80px;

padding:70px 0 20px;

}

.footer-grid{

display:grid;

grid-template-columns:
2fr
1fr
1fr
1fr;

gap:40px;

}

.footer-logo img{

height:65px;

margin-bottom:20px;

}

.footer-about{

color:#bbb;

line-height:1.9;

margin-bottom:20px;

}

.footer-grid h3{

margin-bottom:20px;

font-size:22px;

}

.footer-grid ul{

list-style:none;

padding:0;

}

.footer-grid li{

margin-bottom:12px;

}

.footer-grid a{

color:#ddd;

transition:.3s;

}

.footer-grid a:hover{

color:#fff;

padding-left:6px;

}

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:42px;

height:42px;

border-radius:50%;

background:#222;

display:flex;

align-items:center;

justify-content:center;

}

.footer-social a:hover{

background:#e30613;

}

.footer-bottom{

text-align:center;

padding-top:20px;

color:#aaa;

font-size:14px;

}

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-social{

justify-content:center;

}

}

/*=========================================
NEWSLETTER
=========================================*/

.newsletter-section{

padding:70px 0;

background:#fff;

}

.newsletter-wrapper{

display:grid;

grid-template-columns:2fr 1fr;

gap:50px;

align-items:center;

background:#f8f8f8;

padding:45px;

border-radius:18px;

box-shadow:0 8px 30px rgba(0,0,0,.05);

}

.newsletter-left h2{

font-size:34px;

margin-bottom:15px;

}

.newsletter-left p{

color:#666;

margin-bottom:25px;

}

.newsletter-left form{

display:flex;

gap:15px;

}

.newsletter-left input{

flex:1;

height:56px;

padding:0 20px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.newsletter-left button{

width:170px;

border:none;

background:#e30613;

color:#fff;

font-size:16px;

font-weight:700;

border-radius:10px;

cursor:pointer;

transition:.3s;

}

.newsletter-left button:hover{

background:#b9000c;

}

.newsletter-right{

text-align:center;

}

.newsletter-right h3{

font-size:24px;

margin-bottom:12px;

}

.newsletter-right p{

color:#666;

margin-bottom:25px;

}

.app-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.app-buttons img{

height:54px;

transition:.3s;

}

.app-buttons img:hover{

transform:scale(1.05);

}

@media(max-width:992px){

.newsletter-wrapper{

grid-template-columns:1fr;

padding:30px;

}

.newsletter-left form{

flex-direction:column;

}

.newsletter-left button{

width:100%;

height:56px;

}

}

/*=============================
SCROLL REVEAL
=============================*/

.reveal{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.show{

opacity:1;

transform:none;

}

.card img,
.hero-small img,
.editor-card img,
.video-card img,
.story-home-card img,
.grid-card img{

transition:
transform .4s ease;

}

.card:hover img,
.hero-small:hover img,
.editor-card:hover img,
.video-card:hover img,
.story-home-card:hover img,
.grid-card:hover img{

transform:scale(1.06);

}

button{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

#backToTop{

position:fixed;

right:18px;

bottom:90px;

width:48px;

height:48px;

border-radius:50%;

background:#e30613;

color:#fff;

border:none;

cursor:pointer;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.3s;

z-index:999998;

}

#backToTop.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}
.skeleton{

background:

linear-gradient(
90deg,
#eee 25%,
#f5f5f5 50%,
#eee 75%
);

background-size:200%;

animation:skeleton 1.4s infinite;

}

@keyframes skeleton{

0%{

background-position:200% 0;

}

100%{

background-position:-200% 0;

}

}

.live-dot{

width:10px;

height:10px;

background:#ff0000;

border-radius:50%;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

70%{

transform:scale(2);

opacity:0;

}

100%{

opacity:0;

}

}

.card,
.grid-card,
.video-card,
.editor-card{

transition:

transform .35s,

box-shadow .35s;

}

.card:hover,
.grid-card:hover,
.video-card:hover,
.editor-card:hover{

transform:translateY(-6px);

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

}

#installBanner{

position:fixed;

bottom:20px;

left:20px;

right:20px;

background:#fff;

padding:18px;

display:none;

justify-content:space-between;

align-items:center;

border-radius:16px;

box-shadow:0 10px 30px rgba(0,0,0,.18);

z-index:999999;

}

#installBtn{

background:#e30613;

color:#fff;

border:none;

padding:12px 24px;

border-radius:10px;

cursor:pointer;

font-weight:700;

}

@media(min-width:993px){

#installBanner{

left:auto;

width:380px;

}

}


/*==================================================
ARTICLE HEADER V3
==================================================*/

.article-content{

max-width:100%;

overflow:hidden;

word-wrap:break-word;

overflow-wrap:break-word;

}

.article-content img,

.article-content iframe,

.article-content table,

.article-content figure,

.article-content video{

max-width:100%;

height:auto;

display:block;

}

.article-content *{

max-width:100%;

box-sizing:border-box;

}
.article-category-wrap{

display:flex;

align-items:center;

gap:12px;

margin-bottom:20px;

flex-wrap:wrap;

}

.article-category-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 16px;

background:var(--primary);

color:#fff;

border-radius:999px;

font-size:13px;

font-weight:700;

transition:var(--transition);

}

.article-category-badge:hover{

transform:translateY(-2px);

background:var(--primary-dark);

}

.breaking-badge{

display:flex;

align-items:center;

gap:8px;

background:#111827;

color:#fff;

padding:10px 16px;

border-radius:999px;

font-size:13px;

font-weight:700;

}

.breaking-dot{

width:8px;

height:8px;

background:#ff2d2d;

border-radius:50%;

animation:pulse 1s infinite;

}

.article-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

margin-top:35px;

padding-top:25px;

border-top:1px solid var(--border);

flex-wrap:wrap;

}

.article-toolbar-left{

display:flex;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.meta-author{

display:flex;

align-items:center;

gap:12px;

}

.meta-author img{

width:54px;

height:54px;

border-radius:50%;

object-fit:cover;

border:3px solid #fff;

box-shadow:var(--shadow-sm);

}

.meta-author strong{

display:block;

font-size:15px;

}

.meta-author span{

font-size:13px;

color:#777;

}

.meta-divider{

width:1px;

height:40px;

background:#e5e5e5;

}

.meta-item{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

font-weight:600;

color:#555;

}

.meta-item i{

color:var(--primary);

font-size:15px;

}

@media(max-width:992px){

.article-toolbar{

flex-direction:column;

align-items:flex-start;

}

.article-toolbar-left{

gap:15px;

}

.meta-divider{

display:none;

}

.meta-author{

width:100%;

}

}

/*==================================================
READER TOOLBAR
==================================================*/

.reader-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

margin-top:30px;

padding:18px 0;

border-top:1px solid var(--border);

border-bottom:1px solid var(--border);

flex-wrap:wrap;

}

.reader-toolbar-left,

.reader-toolbar-right{

display:flex;

align-items:center;

gap:12px;

flex-wrap:wrap;

}

.toolbar-btn{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border:none;

cursor:pointer;

background:#f5f5f5;

border-radius:50%;

font-size:16px;

font-weight:700;

transition:var(--transition);

}

.toolbar-btn:hover{

background:var(--primary);

color:#fff;

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.share-facebook{

background:#1877f2;

color:#fff;

}

.share-x{

background:#111;

color:#fff;

}

.share-whatsapp{

background:#25d366;

color:#fff;

}

.share-telegram{

background:#27a6e5;

color:#fff;

}

.share-copy{

background:#555;

color:#fff;

}

.reader-toolbar-left a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

transition:var(--transition);

}

.reader-toolbar-left a:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

@media(max-width:992px){

.reader-toolbar{

justify-content:center;

}

.reader-toolbar-left{

justify-content:center;

width:100%;

}

.reader-toolbar-right{

justify-content:center;

width:100%;

}

}

/*==================================================
READING PROGRESS V3
==================================================*/

#readingProgress{

position:fixed;

top:var(--progress-top,0);

left:0;

width:100%;

height:4px;

background:transparent;

z-index:999999;

pointer-events:none;

}

#readingProgressBar{

width:0;

height:100%;

background:linear-gradient(
90deg,
#e30613,
#ff5a1f
);

transition:width .08s linear;

box-shadow:
0 0 12px rgba(227,6,19,.45);

}

#toast{

position:fixed;

left:50%;

bottom:100px;

transform:translateX(-50%) translateY(20px);

background:#111827;

color:#fff;

padding:12px 20px;

border-radius:30px;

font-size:14px;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999999;

}

#toast.show{

opacity:1;

visibility:visible;

transform:translateX(-50%) translateY(0);

}

/*==================================================
ARTICLE HIGHLIGHTS
==================================================*/

.article-highlights{

background:#fff8ef;

border-left:5px solid var(--primary);

padding:22px;

border-radius:14px;

margin:35px 0;

box-shadow:var(--shadow-sm);

}

.article-highlights h3{

display:flex;

align-items:center;

gap:10px;

margin-bottom:18px;

font-size:20px;

}

.article-highlights ul{

margin:0;

padding-left:22px;

}

.article-highlights li{

margin-bottom:12px;

line-height:1.8;

font-weight:500;

}

.article-content p:first-child::first-letter{

font-size:58px;

font-weight:800;

float:left;

line-height:1;

padding-right:8px;

color:var(--primary);

}

.article-content p{

font-size:20px;

line-height:2;

margin:0 0 28px;

color:#222;

}

.article-content h2{

font-size:34px;

margin:55px 0 25px;

font-weight:800;

}

.article-content h3{

font-size:28px;

margin:40px 0 20px;

}

.article-content ul{

padding-left:30px;

margin:25px 0;

}

.article-content li{

margin-bottom:14px;

line-height:1.9;

}

.article-content blockquote{

margin:45px 0;

padding:30px;

font-size:24px;

font-style:italic;

font-weight:700;

border-left:6px solid var(--primary);

background:#fafafa;

border-radius:12px;

position:relative;

}

.article-content blockquote:before{

content:"“";

font-size:80px;

position:absolute;

left:18px;

top:-10px;

opacity:.15;

}

.article-content table{

width:100%;

border-collapse:collapse;

margin:35px 0;

}

.article-content td,

.article-content th{

padding:14px;

border:1px solid #ddd;

}

.article-content th{

background:#f5f5f5;

}

.article-end-card{

text-align:center;

padding:45px 30px;

margin:60px 0;

background:#fafafa;

border-radius:16px;

box-shadow:var(--shadow-sm);

}

.article-end-card a{

display:inline-block;

margin-top:18px;

font-weight:700;

color:var(--primary);

}

/*====================================
PREMIUM KEY HIGHLIGHTS
====================================*/

.key-highlights-box{

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:18px;

overflow:hidden;

margin:35px 0;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.highlights-header{

display:flex;

align-items:center;

gap:10px;

padding:16px 22px;

background:linear-gradient(90deg,#e30613,#ff5722);

color:#fff;

font-size:18px;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;

}

.highlights-body{

padding:22px;

}

.highlight-item{

display:flex;

align-items:flex-start;

gap:14px;

padding:14px 0;

border-bottom:1px solid #ececec;

}

.highlight-item:last-child{

border-bottom:none;

padding-bottom:0;

}

.highlight-item i{

color:#0ea44b;

font-size:18px;

margin-top:4px;

flex-shrink:0;

}

.highlight-item span{

font-size:17px;

line-height:1.7;

font-weight:500;

color:#222;

}

.article-divider{

display:flex;

align-items:center;

justify-content:center;

margin:60px 0;

position:relative;

}

.article-divider:before{

content:"";

position:absolute;

width:100%;

height:1px;

background:#ddd;

}

.article-divider span{

background:#fff;

padding:0 25px;

font-size:24px;

color:var(--primary);

position:relative;

z-index:2;

}

.tag-link{

display:inline-flex;

align-items:center;

padding:10px 18px;

margin:6px;

border-radius:999px;

background:#f3f4f6;

font-weight:600;

transition:.3s;

}

.tag-link:hover{

background:var(--primary);

color:#fff;

transform:translateY(-2px);

}

@media(max-width:768px){

.article-content{

font-size:19px;

line-height:2;

}

.article-title{

font-size:34px;

}

.article-subheadline{

font-size:20px;

}

}

/*=========================================
PREVIOUS NEXT ARTICLE
=========================================*/

.article-navigation{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin:70px 0;

}

.article-nav-card{

display:flex;

flex-direction:column;

justify-content:center;

padding:28px;

border-radius:18px;

background:#fff;

border:1px solid #ececec;

transition:.35s;

min-height:170px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.article-nav-card:hover{

transform:translateY(-6px);

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

border-color:var(--primary);

}

.article-nav-card small{

font-size:13px;

font-weight:700;

color:var(--primary);

margin-bottom:15px;

text-transform:uppercase;

letter-spacing:.5px;

}

.article-nav-card h4{

font-size:22px;

line-height:1.5;

font-weight:700;

color:#111;

margin:0;

}

.article-nav-card.next{

text-align:right;

}

@media(max-width:768px){

.article-navigation{

grid-template-columns:1fr;

}

.article-nav-card.next{

text-align:left;

}

}

/*====================================
PREMIUM TOPICS
====================================*/

.article-topics{

margin:50px 0;

padding:30px;

background:#fff;

border:1px solid #ececec;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.article-topics-header{

display:flex;

align-items:center;

gap:12px;

margin-bottom:22px;

}

.article-topics-header i{

font-size:22px;

color:var(--primary);

}

.article-topics-header h3{

margin:0;

font-size:24px;

font-weight:700;

}

.article-topics-list{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.topic-chip{

display:inline-flex;

align-items:center;

padding:10px 18px;

background:#f7f7f7;

border-radius:50px;

font-size:15px;

font-weight:600;

transition:.3s;

border:1px solid transparent;

}

.topic-chip:hover{

background:var(--primary);

color:#fff;

transform:translateY(-3px);

border-color:var(--primary);

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

}

/*========================================
PREMIUM RELATED NEWS
========================================*/

.premium-related-grid{

display:grid;

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

gap:28px;

margin-top:35px;

}

.related-card{

display:block;

background:#fff;

border-radius:18px;

overflow:hidden;

border:1px solid #ececec;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.related-card:hover{

transform:translateY(-8px);

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

}

.related-image{

aspect-ratio:16/9;

overflow:hidden;

}

.related-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.related-card:hover img{

transform:scale(1.08);

}

.related-content{

padding:20px;

}

.related-category{

font-size:12px;

font-weight:700;

text-transform:uppercase;

color:var(--primary);

margin-bottom:10px;

letter-spacing:.5px;

}

.related-content h3{

font-size:19px;

line-height:1.5;

margin-bottom:16px;

color:#111;

}

.related-meta{

font-size:13px;

color:#777;

}

@media(max-width:992px){

.premium-related-grid{

grid-template-columns:1fr;

}

}

/*========================================
PREMIUM TRENDING
========================================*/

.trending-widget{

background:#fff;

border-radius:18px;

padding:25px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

border:1px solid #ececec;

}

.trending-widget h3{

font-size:26px;

margin-bottom:25px;

}

.premium-trending-item{

display:flex;

gap:18px;

padding:18px 0;

border-bottom:1px solid #ececec;

transition:.3s;

}

.premium-trending-item:last-child{

border-bottom:none;

}

.premium-trending-item:hover{

padding-left:10px;

}

.trend-rank{

width:52px;

height:52px;

border-radius:50%;

background:linear-gradient(135deg,#d90429,#ff5e5e);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

font-weight:800;

flex-shrink:0;

}

.trend-category{

font-size:11px;

text-transform:uppercase;

font-weight:700;

color:var(--primary);

margin-bottom:8px;

}

.trend-info h4{

font-size:17px;

line-height:1.5;

color:#111;

}

/*=========================================
PREMIUM LATEST NEWS
=========================================*/

.latest-news-widget{

background:#fff;

border-radius:18px;

padding:22px;

border:1px solid #ececec;

box-shadow:0 10px 25px rgba(0,0,0,.05);

margin-top:30px;

}

.widget-header{

display:flex;

align-items:center;

gap:12px;

margin-bottom:25px;

}

.widget-header h3{

margin:0;

font-size:24px;

font-weight:700;

}

.live-dot{

width:12px;

height:12px;

background:#e30613;

border-radius:50%;

animation:livePulse 1.6s infinite;

}

@keyframes livePulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.5);

opacity:.5;

}

100%{

transform:scale(1);

opacity:1;

}

}

.latest-news-card{

display:flex;

gap:15px;

padding:18px 0;

border-bottom:1px solid #ececec;

transition:.3s;

}

.latest-news-card:last-child{

border-bottom:none;

}

.latest-news-card:hover{

transform:translateX(6px);

}

.latest-thumb{

width:100px;

height:70px;

overflow:hidden;

border-radius:10px;

flex-shrink:0;

}

.latest-thumb img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.latest-news-card:hover img{

transform:scale(1.08);

}

.latest-content{

flex:1;

}

.latest-time{

font-size:12px;

font-weight:600;

color:#888;

margin-bottom:8px;

}

.latest-content h4{

font-size:15px;

line-height:1.5;

margin:0;

color:#111;

font-weight:600;

}

.image-credit{

padding:12px 18px;

background:#f8f9fa;

font-size:14px;

line-height:1.6;

color:#666;

border-left:4px solid var(--primary);

border-radius:0 0 10px 10px;

font-style:italic;

}

.ndv-video{

    max-width:900px;

    margin:30px auto;

}

.ndv-editor-video{

    width:100%;

    height:auto;

    display:block;

    border-radius:12px;

    background:#000;

}