:root{
    --primary:#0B132B;
    --secondary:#2563EB;
    --light:#F8FAFC;
    --dark:#111827;
}
*{
    font-family: Inter Poppins;
}
body{
    background:#f5f7fb;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar{
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.navbar-brand{
    font-weight:700;
    font-size:28px;
}

.news-card{
    transition:all .3s ease;
}

.news-card:hover{
    transform:translateY(-5px);
}

.card{
    border:none;
    border-radius:12px;
}

.section-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
}

footer{
    background:#0B132B;
    color:#fff;
    margin-top:50px;
    padding:50px 0;
}

a{
    text-decoration:none;
}

 

.news-details h1{
    font-size:2.4rem;
    line-height:1.4;
}

.news-content{
    font-size:18px;
    line-height:1.9;
    color:#333;
}

.news-content p{
    margin-bottom:1.5rem;
}

.news-content img{
    max-width:100%;
    height:auto;
    border-radius:8px;
    margin:20px 0;
}

.news-content iframe{
    max-width:100%;
}

.top-bar{
    background:#111;
    color:#fff;
    padding:8px 0;
    font-size:14px;
}

.main-header{
    padding: 0px;
    background:#fff;
}

.logo{
    width: 100px;
    color:#111;
}

.navbar-dark .nav-link{
    color:#fff !important;
    font-weight:600;
}

.navbar-dark .nav-link:hover{
    color:#0d6efd !important;
}

.dropdown-menu{
    border:none;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.sticky-top{
    z-index:999;
}
.ticker{
    overflow:hidden;
    white-space:nowrap;
}

.ticker span{
    display:inline-block;
    animation:ticker 20s linear infinite;
}

@keyframes ticker{
    from{
        transform:translateX(100%);
    }
    to{
        transform:translateX(-100%);
    }
}
.hero-main{
    height:520px;
}

.hero-small{
    height:125px;
}

.hero-image,
.hero-small-image{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.hero-main:hover img,
.hero-small:hover img{
    transform:scale(1.08);
}

.hero-overlay,
.hero-overlay-small{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:25px;
    background:linear-gradient(to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.15),
        transparent);
}

.hero-overlay h2{
    font-size:2rem;
    line-height:1.35;
}

.hero-overlay-small h6{
    font-size:15px;
    line-height:1.4;
}
.category-header{

    background:linear-gradient(135deg,#0d6efd,#212529);

    color:#fff;

    padding:60px;

    position:relative;

}

.category-header h1{

    font-size:42px;

    font-weight:700;

}

.category-header p{

    max-width:700px;

    opacity:.9;

}

.category-header .badge{

    font-size:15px;

    padding:10px 18px;

}

/* ==========================
   Skeleton Loader
========================== */

.skeleton{

    background:linear-gradient(
        90deg,
        #ececec 25%,
        #f7f7f7 50%,
        #ececec 75%
    );

    background-size:200% 100%;

    animation:shimmer 1.3s infinite linear;

    border-radius:8px;
}

@keyframes shimmer{

    0%{

        background-position:200% 0;

    }

    100%{

        background-position:-200% 0;

    }

}

.hero-skeleton{

    position:relative;

    overflow:hidden;

    border-radius:16px;

}

.hero-image{

    width:100%;

    height:520px;

}

.hero-content{

    position:absolute;

    bottom:40px;

    left:40px;

    width:70%;

}

.hero-badge{

    width:90px;

    height:28px;

    margin-bottom:20px;

}

.hero-title{

    width:100%;

    height:30px;

    margin-bottom:15px;

}

.hero-title.short{

    width:75%;

}

.hero-text{

    width:90%;

    height:16px;

    margin-top:12px;

}

.hero-text.short{

    width:60%;

}

.news-card-skeleton{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    margin-bottom:20px;

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

}

.skeleton-image{

    width:100%;

    height:180px;

}

.skeleton-category{

    width:80px;

    height:18px;

    margin-bottom:18px;

}

.skeleton-title{

    width:100%;

    height:18px;

    margin-bottom:10px;

}

.skeleton-title.short{

    width:70%;

}

.skeleton-meta{

    width:120px;

    height:14px;

    margin-top:18px;

}

.article-title{
    font-size:42px;
    font-weight:700;
    line-height:1.4;
    margin-bottom:20px;
}

.article-meta{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    color:#777;
    margin-bottom:25px;
}

.article-image img{
    width:100%;
    max-height:500px;
    object-fit:cover;
}

.article-summary{
    font-size:20px;
    font-weight:600;
    background:#f8f9fa;
    padding:20px;
    border-left:4px solid #0d6efd;
    margin:25px 0;
}

.article-content{
    font-size:18px;
    line-height:1.9;
}

.article-content img{
    max-width:100%;
    height:auto;
    border-radius:10px;
}

.share-box{
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid #ddd;
}

.sidebar-box{
    position:sticky;
    top:20px;
}

.sidebar-news{
    margin-bottom:15px;
}

.sidebar-thumb{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:8px;
}

@media(max-width:768px){

    .article-title{
        font-size:28px;
    }

}
.trending-item{
    transition:.3s ease;
}

.trending-item:hover{
    background:#f8f9fa;
    transform:translateX(4px);
}

.trending-item h6{
    font-size:15px;
    line-height:1.4;
    margin-bottom:6px;
}

.trending-item img{
    border-radius:10px;
}

.trending-item:last-child{
    border-bottom:none!important;
}
.footer-link{
    color:#d1d5db;
    text-decoration:none;
    transition:.3s;
    display:block;
}

.footer-link:hover{
    color:#0d6efd;
    padding-left:6px;
}

.social-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#1f2937;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.social-icon:hover{
    background:#0d6efd;
    color:#fff;
    transform:translateY(-3px);
}

footer h5,
footer h4{
    color:#fff;
}

footer p{
    color:#cbd5e1;
}