/*=========================================
        IMPORT & ROOT
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700;800&display=swap');

:root{

    --primary:#00589d;
    --primary-dark:#003b70;
    --secondary:#00aeef;
    --accent:#ffb300;

    --white:#ffffff;

    --bg:#f4f7fb;

    --text:#10243d;

    --light:#6e8095;

    --border:#dde8f3;

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

}

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family: "Noto Sans", Arial, Helvetica, sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.7;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

}

/*=========================================
            HEADER PART 1
=========================================*/

:root{

    --primary:#00589d;
    --primary-dark:#003b70;
    --secondary:#00aeef;
    --accent:#ffb300;

    --white:#ffffff;
    --text:#13253a;

}

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

.main-header{

    width:100%;

    background:linear-gradient(90deg,#003b70 0%,#00589d 55%,#12a8e8 100%);

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

    position:relative;

    z-index:999;

}

.header-wrapper{

    max-width:1500px;

    margin:auto;

    height:84px;

    display:grid;

    grid-template-columns:290px 1fr 420px;

    gap:25px;

    align-items:center;

    padding:0 25px;

}

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

.site-logo{
    display:flex;
    align-items:center;
    gap:16px;
    height:100%;
    color:#fff;
}

.site-logo:hover{

    color:#fff;

}

.site-logo img{
    width:64px;
    height:64px;
    border-radius:10px;
    padding:4px;
    background:#fff;
    border:3px solid #00c8ff;
    flex-shrink:0;
    display:block;
}

.logo-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:64px;
}

.logo-text h1{

    margin:0;

    padding:0;

    font-size:24px;

    line-height:1.05;

    font-weight:800;

    color:#fff;

}

.logo-text span{

    margin-top:6px;

    padding:0;

    font-size:13px;

    line-height:1;

    color:#d9ecff;

    font-weight:600;

}

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

.desktop-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}

.desktop-nav a{

    width:82px;

    height:72px;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#fff;

    transition:.30s;

}

.desktop-nav a i{

    font-size:22px;

    margin-bottom:7px;

}

.desktop-nav a span{

    font-size:14px;

    font-weight:700;

}

.desktop-nav a:hover{

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

    transform:translateY(-2px);

}

.desktop-nav a.active{

    background:#248dff;

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

}

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

.mobile-menu-btn,

.mobile-search-btn{

    display:none;

    width:48px;

    height:48px;

    border:none;

    outline:none;

    border-radius:12px;

    cursor:pointer;

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

    color:#fff;

    font-size:22px;

    transition:.3s;

}

.mobile-menu-btn:hover,

.mobile-search-btn:hover{

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

}

.mobile-menu-btn{

    justify-self:start;

}

.mobile-search-btn{

    justify-self:end;

}

/*=========================================
        HEADER PART 2
        SEARCH BAR
=========================================*/

.desktop-search{

    position:relative;

    width:100%;

}

.search-box{

    position:relative;

    width:100%;

    display:flex;

    align-items:center;

}

.search-left{

    position:absolute;

    left:22px;

    color:#9aa8b5;

    font-size:18px;

    z-index:5;

    pointer-events:none;

}

.search-box input{

    width:100%;

    height:58px;

    background:#fff;

    border:none;

    outline:none;

    border-radius:40px;

    padding-left:56px;

    padding-right:72px;

    font-size:15px;

    font-weight:500;

    color:#1b2b42;

    transition:.35s;

    box-shadow:
    0 8px 25px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.9);

}

.search-box input::placeholder{

    color:#93a2b5;

    font-weight:500;

}

.search-box input:focus{

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

}

.search-box button{

    position:absolute;

    right:6px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:linear-gradient(135deg,#ffc928,#ff9800);

    color:#003b70;

    font-size:18px;

    transition:.30s;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 5px 18px rgba(255,185,0,.45);

}

.search-box button:hover{

    transform:scale(1.08);

    box-shadow:0 8px 24px rgba(255,185,0,.55);

}

/*=========================================
        SEARCH SUGGESTIONS
=========================================*/

.suggestion-box{

    position:absolute;

    top:calc(100% + 10px);

    left:0;

    right:0;

    width:100%;

    background:#fff;

    border-radius:18px;

    border:1px solid #e8eef5;

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

    overflow:hidden;

    max-height:420px;

    overflow-y:auto;

    z-index:99999;

}

.suggestion-box:empty{

    display:none;

}

.suggestion-item{

    transition:.25s;

}

.suggestion-item a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 16px;

    color:#10243d;

}

.suggestion-item:hover,

.suggestion-item.active{

    background:#eef8ff;

}

.suggestion-thumb{

    width:54px;

    height:54px;

    border-radius:12px;

    object-fit:cover;

    flex-shrink:0;

}

.suggestion-text{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.suggestion-title{

    font-size:14px;

    font-weight:700;

    color:#122033;

    line-height:1.45;

}

.type-badge{

    font-size:11px;

    color:#0085d6;

    font-weight:600;

}

.suggestion-tag{

    display:inline-block;

    width:max-content;

    padding:3px 9px;

    border-radius:20px;

    background:#edf8ff;

    color:#0078d7;

    font-size:10px;

    font-weight:700;

}

.suggestion-empty{

    padding:20px;

    text-align:center;

    color:#8a98a8;

    font-size:14px;

}

/* Scrollbar */

.suggestion-box::-webkit-scrollbar{

    width:8px;

}

.suggestion-box::-webkit-scrollbar-thumb{

    background:#c8d7e8;

    border-radius:20px;

}

.suggestion-box::-webkit-scrollbar-thumb:hover{

    background:#8bbce8;

}
/*=========================================
        HEADER PART 3
        MOBILE HEADER
=========================================*/

@media (max-width:991px){

.main-header{

padding:0;

}

.header-wrapper{

height:74px;

display:grid;

grid-template-columns:60px 1fr 60px;

align-items:center;

padding:0 14px;

gap:0;

}

/* Hide Desktop */

.desktop-nav,

.desktop-search{

display:none;

}

/* Mobile Buttons */

.mobile-menu-btn,

.mobile-search-btn{

display:flex;

align-items:center;

justify-content:center;

width:46px;

height:46px;

border-radius:14px;

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

color:#fff;

font-size:21px;

border:none;

cursor:pointer;

transition:.30s;

}

.mobile-menu-btn:hover,

.mobile-search-btn:hover{

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

}

/* Logo Center */

.site-logo{

justify-content:center;

gap:10px;

}

.site-logo img{

width:50px;

height:50px;

padding:3px;

border-radius:8px;

border:2px solid #00c8ff;

}

.logo-text{

align-items:center;

}

.logo-text h1{

font-size:22px;

margin:0;

line-height:1.1;

}

.logo-text span{

display:none;

}

}

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

.mobile-search-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#f7f9fc;

z-index:99999;

opacity:0;

visibility:hidden;

transition:.35s;

overflow:auto;

}

.mobile-search-overlay.active{

opacity:1;

visibility:visible;

}

.mobile-search-top{

display:flex;

flex-wrap:wrap;

align-items:center;

gap:12px;

padding:15px;

background:#fff;

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

position:relative;

}

.mobile-search-top button{

width:46px;

height:46px;

border:none;

background:#eef4fb;

border-radius:14px;

font-size:20px;

cursor:pointer;

color:#003b70;

}

.mobile-search-top form{

flex:1;

}

.mobile-search-box{

position:relative;

}

/*=========================================
        MOBILE SUGGESTION BOX (Premium)
        Pushes content below it down (NOT floating)
=========================================*/

#mobileSuggestionBox{

    position:static;

    order:3;

    flex-basis:100%;

    width:100%;

    margin:0;

    background:var(--bg);

    border-radius:0;

    border:none;

    box-shadow:none;

    overflow:hidden;

    max-height:min(50vh,420px);

    overflow-y:auto;

    z-index:1;

    transition:margin .2s ease;

}

#mobileSuggestionBox:not(:empty){

    margin-top:6px;

    padding:6px 15px 12px;

}

#mobileSuggestionBox:empty{

    display:none;

    padding:0;

    margin:0;

}

#mobileSuggestionBox .suggestion-item{

    margin-bottom:8px;

}

#mobileSuggestionBox .suggestion-item:last-child{

    margin-bottom:0;

}

#mobileSuggestionBox .suggestion-item a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 14px;

    color:var(--text);

    background:#fff;

    border-radius:14px;

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

}

#mobileSuggestionBox .suggestion-item:hover a,

#mobileSuggestionBox .suggestion-item.active a{

    background:linear-gradient(90deg,#eef8ff,#f7fbff);

}

#mobileSuggestionBox .suggestion-thumb{

    width:56px;

    height:56px;

    border-radius:14px;

    object-fit:cover;

    flex-shrink:0;

    border:2px solid #eef4fb;

}

#mobileSuggestionBox .suggestion-text{

    display:flex;

    flex-direction:column;

    gap:5px;

    min-width:0;

}

#mobileSuggestionBox .suggestion-title{

    font-size:14px;

    font-weight:700;

    color:#122033;

    line-height:1.45;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

#mobileSuggestionBox .type-badge{

    font-size:11px;

    color:var(--primary);

    font-weight:700;

}

#mobileSuggestionBox .suggestion-tag{

    display:inline-block;

    width:max-content;

    padding:3px 10px;

    border-radius:20px;

    background:linear-gradient(135deg,var(--secondary),var(--primary));

    color:#fff;

    font-size:10px;

    font-weight:700;

}

#mobileSuggestionBox .suggestion-empty{

    padding:24px;

    text-align:center;

    color:var(--light);

    font-size:14px;

    font-weight:600;

}

#mobileSuggestionBox::-webkit-scrollbar{

    width:8px;

}

#mobileSuggestionBox::-webkit-scrollbar-thumb{

    background:#c8d7e8;

    border-radius:20px;

}

#mobileSuggestionBox::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

.mobile-search-box input{

width:100%;

height:52px;

border:none;

outline:none;

border-radius:30px;

background:#eef4fb;

padding-left:18px;

padding-right:58px;

font-size:15px;

color:#1b2b42;

}

.mobile-search-box button{

position:absolute;

top:4px;

right:4px;

width:44px;

height:44px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,#ffc928,#ff9800);

color:#003b70;

font-size:18px;

cursor:pointer;

box-shadow:0 5px 18px rgba(255,185,0,.4);

}

/* Popular Search */

.mobile-search-content{

padding:0px;

}

.trending-search-block{

    padding: 10px 20px;

}
.mobile-search-content h3{

font-size:18px;

margin-bottom:16px;

color:#122033;

}

.popular-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.popular-tags a{

padding:10px 18px;

background:#fff;

border:1px solid #dce8f4;

border-radius:30px;

font-size:14px;

font-weight:600;

color:#00589d;

cursor:pointer;

transition:.25s;

}

.popular-tags a:hover{

background:#00589d;

color:#fff;

}

/* Small Mobile */

@media(max-width:480px){

.header-wrapper{

height:68px;

padding:0 10px;

}

.site-logo img{

width:44px;

height:44px;

}

.logo-text h1{

font-size:19px;

}

.mobile-menu-btn,

.mobile-search-btn{

width:42px;

height:42px;

font-size:19px;

}

.mobile-search-top{

padding:12px;

}

.mobile-search-box input{

height:48px;

font-size:14px;

}

.mobile-search-box button{

width:40px;

height:40px;

font-size:16px;

}

}

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

.mobile-sidebar{

    position:fixed;

    top:0;

    left:-320px;

    width:300px;

    height:100vh;

    background:#ffffff;

    z-index:99999;

    transition:.35s ease;

    box-shadow:8px 0 35px rgba(0,0,0,.18);

    overflow-y:auto;

}

.mobile-sidebar.active{

    left:0;

}

.sidebar-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(2px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99998;

}

.sidebar-overlay.active{

    opacity:1;

    visibility:visible;

}

/*==========================
    SIDEBAR TOP
==========================*/

.sidebar-top{

    height:90px;

    background:linear-gradient(135deg,#003b70,#00aeef);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

}

.sidebar-top img{

    width:60px;

    height:60px;

    border-radius:15px;

    background:#fff;

    padding:3px;

}

.sidebar-top button{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

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

    color:#fff;

    cursor:pointer;

    font-size:20px;

}

/*==========================
        SIDEBAR MENU
==========================*/

.mobile-sidebar nav{

    padding:18px 0;

}

.mobile-sidebar nav a{

    display:flex;

    align-items:center;

    gap:16px;

    padding:15px 22px;

    color:#12304f;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.mobile-sidebar nav a i{

    width:24px;

    text-align:center;

    color:#00589d;

    font-size:19px;

}

.mobile-sidebar nav a:hover{

    background:#eef7ff;

    color:#00589d;

    padding-left:30px;

}

/*==========================
        DIVIDER
==========================*/

.mobile-sidebar hr{

    border:none;

    border-top:1px solid #edf2f7;

    margin:12px 20px;

}

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

@media(min-width:992px){

.mobile-sidebar,

.sidebar-overlay,

.mobile-menu-btn,

.mobile-search-btn,

.mobile-search-overlay{

display:none !important;

}

}

@media(max-width:991px){

.desktop-nav,

.desktop-search{

display:none !important;

}

}

@media(max-width:768px){

.main-header{

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

}

.mobile-sidebar{

width:280px;

}

}

@media(max-width:480px){

.mobile-sidebar{

width:260px;

}

.sidebar-top{

height:80px;

}

.sidebar-top img{

width:52px;

height:52px;

}

.mobile-sidebar nav a{

padding:14px 18px;

font-size:14px;

}

}

/*==========================
        SMOOTH EFFECTS
==========================*/

.mobile-menu-btn,

.mobile-search-btn,

.mobile-sidebar nav a,

.sidebar-top button{

transition:all .3s ease;

}

.mobile-menu-btn:active,

.mobile-search-btn:active{

transform:scale(.95);

}

.mobile-sidebar nav a:active{

background:#dcefff;

}

/*==========================
        SAFE AREA
==========================*/

@supports(padding:max(0px)){

.main-header{

padding-top:env(safe-area-inset-top);

}

.mobile-sidebar{

padding-bottom:env(safe-area-inset-bottom);

}

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

main{
    width:100%;
    min-height:100vh;
}

.page-layout{

    max-width:1500px;

    margin:30px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:minmax(0,1fr) 340px;

    gap:30px;

    align-items:start;

}

.main-content{

    min-width:0;

}

/*=========================================
SECTION TITLE
=========================================*/

section{

    margin-bottom:45px;
    margin-top:30px;

}

.section-title,
section h2{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    font-size:28px;

    font-weight:800;

    color:#0d3b66;

}

.section-title::before,
section h2::before{

    content:"";

    width:6px;

    height:34px;

    border-radius:10px;

    background:linear-gradient(#00aeef,#00589d);

}

/*=========================================
ARTICLE GRID
=========================================*/

.article-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(290px,1fr));

    gap:25px;

}

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

.article-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

    border:1px solid #edf2f7;

}

.article-card:hover{

    transform:translateY(-8px);

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

}

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

.article-card img{

    width:100%;

    height:210px;

    object-fit:cover;

    transition:.4s;

}

.article-card:hover img{

    transform:scale(1.05);

}

/*=========================================
HERO SECTION
=========================================*/

.hero-section{
    margin-bottom:40px;
}

/*=========================================
BODY
=========================================*/

.article-body{

    padding:18px;

}

.article-category{

    display:inline-flex;

    align-items:center;

    padding:5px 12px;

    border-radius:30px;

    background:#e8f5ff;

    color:#0077cc;

    font-size:11px;

    font-weight:700;

    margin-bottom:10px;

}

.article-card h3{

    font-size:19px;

    line-height:1.5;

    color:#122033;

    margin-bottom:10px;

    transition:.3s;

}

.article-card:hover h3{

    color:#00589d;

}

.article-card p{

    color:#60738b;

    font-size:14px;

    line-height:1.7;

    margin-bottom:15px;

}

/*=========================================
META
=========================================*/

.article-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #edf2f7;

    padding-top:12px;

    color:#7c8ea3;

    font-size:13px;

    font-weight:600;

}

.article-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

/*=========================================
READ MORE
=========================================*/

.read-more{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:12px;

    color:#0077cc;

    font-weight:700;

    transition:.3s;

}

.read-more:hover{

    gap:12px;

}

/*=========================================
SIDEBAR
=========================================*/

.sidebar{

    position:sticky;

    top:10px;

}

.sidebar-box{

    background:#fff;

    border-radius:20px;

    padding:22px;

    margin-bottom:25px;

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

    border:1px solid #edf2f7;

}

.sidebar-box h3{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:22px;

    color:#003b70;

    margin-bottom:20px;

    padding-bottom:12px;

    border-bottom:2px solid #edf2f7;

}

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

.trending-list{

    list-style:none;

}

.trending-item{

    margin-bottom:18px;

}

.trending-item:last-child{

    margin-bottom:0;

}

.trending-item a{

    display:flex;

    gap:14px;

    align-items:flex-start;

    transition:.3s;

}

.trending-item a:hover{

    transform:translateX(5px);

}

.trending-thumb{

    width:88px;

    height:88px;

    border-radius:14px;

    object-fit:cover;

    flex-shrink:0;

}

.trending-text{

    flex:1;

}

.trending-title{

    font-size:15px;

    font-weight:700;

    line-height:1.5;

    color:#122033;

    transition:.3s;

}

.trending-item:hover .trending-title{

    color:#00589d;

}

.trending-tag{

    display:inline-block;

    margin-top:8px;

    padding:3px 10px;

    border-radius:20px;

    background:#e8f5ff;

    color:#0095ff;

    font-size:10px;

    font-weight:700;

}

.trending-empty{

    color:#7f8d9c;

    text-align:center;

    padding:20px;

}

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

.view-all-wrapper{

    margin-top:20px;

    text-align:center;

}

.view-all-btn{

    display:inline-block;

    padding:13px 32px;

    border-radius:40px;

    background:linear-gradient(135deg,#00589d,#00aeef);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.view-all-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,88,157,.25);

}

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

@media(max-width:1100px){

.page-layout{

grid-template-columns:1fr;

}

.sidebar{

position:relative;

top:0;

}

}

@media(max-width:768px){

.page-layout{

padding:0 16px;
margin:0px auto;
}

.article-grid{

grid-template-columns:1fr;

}

.article-card img{

height:220px;

}

.section-title,
section h2{

font-size:22px;

}

.sidebar-box{

padding:18px;

}

}
/*=========================================
        ARTICLE DETAIL PAGE
=========================================*/

article{

    background:#fff;

    border-radius:22px;

    padding:35px;

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

    border:1px solid #edf2f7;

}

.category-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    line-height:1;

    padding:7px 18px 4px 18px;

    border-radius:30px;

    background:linear-gradient(135deg,#00589d,#00aeef);

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:18px;

}

article h1{

    font-size:42px;

    line-height:1.35;

    color:#10243d;

    margin-bottom:15px;

    font-weight:800;

}

.meta{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    color:#0f3260;

    font-size:14px;

    margin-bottom:25px;

}

.meta span{

    display:flex;

    align-items:center;

    gap:7px;

}

.featured-img{

    width:100%;

    max-height:520px;

    object-fit:cover;

    border-radius:18px;

    margin-bottom:30px;

}

.article-content{

    font-size:22px;

    line-height:2;

    color:#334155;

}

.article-content p{

    margin-bottom:22px;

}

.article-content h2{

    margin:30px 0 15px;

    font-size:30px;

}

.article-content img{

    width:100%;

    border-radius:18px;

    margin:25px 0;

}

.article-content ul{

    padding-left:25px;

    margin:20px 0;

}

.article-content li{

    margin-bottom:12px;

}

.tags{

    margin-top:35px;

}

.tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#eef7ff;

    color:#0077cc;

    margin:6px;

    font-size:13px;

    font-weight:700;

    transition:.3s;

}

.tag:hover{

    background:#0077cc;

    color:#fff;

}

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

.video-thumb-wrapper{

    position:relative;

    overflow:hidden;

}

.video-thumb-wrapper img{

    transition:.4s;

}

.video-thumb-wrapper:hover img{

    transform:scale(1.08);

}

.play-icon-big{

    position:absolute;

    top:50%;

    left:50%;

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

    width:72px;

    height:72px;

    border-radius:50%;

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

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    backdrop-filter:blur(5px);

}

.video-embed-wrapper{

    position:relative;

    width:100%;

    padding-bottom:56.25%;

    overflow:hidden;

    border-radius:18px;

    margin:25px 0;

}

.video-embed-wrapper iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:none;

}

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

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin:45px 0;

}

.pagination a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    border-radius:12px;

    border:1px solid #e8edf4;

    color:#003b70;

    font-weight:700;

    transition:.3s;

}

.pagination a:hover{

    background:#00589d;

    color:#fff;

}

.current-page{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    background:#00589d;

    color:#fff;

    font-weight:700;

}

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

.footer{

    background:#061726;
    color:#d7e7f7;
    margin-top:80px;

}

.footer-top{

    max-width:1400px;
    margin:auto;

    padding:65px 30px 45px;

    display:grid;

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

    gap:40px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}

.footer-logo img{

    width:64px;

    height:64px;

    border-radius:14px;

    background:#fff;

    padding:4px;

}

.footer-logo h2{

    color:#fff;

    font-size:24px;

    margin-bottom:2px;

}

.footer-logo span{

    color:#8fb6d8;

    font-size:13px;

}

.footer-brand p{

    font-size:14px;

    line-height:1.8;

    color:#aac4dc;

    max-width:320px;

}

.footer-column h3{

    color:#fff;

    margin-bottom:18px;

    font-size:17px;

    position:relative;

}

.footer-column h3::after{

    content:"";

    width:40px;

    height:3px;

    background:#00aeef;

    position:absolute;

    left:0;

    bottom:-8px;

    border-radius:5px;

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:11px;

}

.footer-column a{

    color:#b6cde3;

    font-size:14px;

    transition:.25s;

}

.footer-column a:hover{

    color:#00aeef;

    padding-left:6px;

}
.footer-column .footer-social a:hover{

    

    padding-left:0px;

}
.footer-social{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.footer-social{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.footer-social a{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(145deg,#12395a,#0b243a);

    color:#ffffff;

    font-size:20px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08),
        0 8px 20px rgba(0,0,0,.25);

    transition:all .35s ease;

}

.footer-social a:hover{

    background:linear-gradient(135deg,#00c6ff,#0094ff);

    color:#ffffff;

    

    box-shadow:
        0 15px 30px rgba(0,174,239,.45),
        0 0 18px rgba(0,174,239,.35);

}

.footer-social a:active{

    transform:scale(.95);

}

.newsletter-text{

    color:#aac4dc;

    font-size:14px;

    margin-bottom:15px;

    line-height:1.7;

}

.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.newsletter-form input{

    height:48px;

    border:none;

    border-radius:10px;

    padding:0 15px;

    font-size:14px;

    outline:none;

}

.newsletter-form button{

    height:48px;

    border:none;

    border-radius:10px;

    background:#00aeef;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.newsletter-form button:hover{

    background:#008fd0;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:22px;

    text-align:center;

    color:#9eb5cb;

    font-size:14px;

}

/*==================================
        Responsive
==================================*/

@media(max-width:1200px){

.footer-top{

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

}

}

@media(max-width:768px){

.footer-top{

grid-template-columns:1fr;

gap:35px;

padding:45px 22px;

}

.footer-brand{

text-align:center;

}

.footer-logo{

justify-content:center;

}

.footer-brand p{

margin:auto;

}

.footer-column{

text-align:center;

}

.footer-column h3::after{

left:50%;

transform:translateX(-50%);

}

.footer-social{

justify-content:center;

}

.footer-bottom{

font-size:13px;

padding:18px;

}

}

/*=========================================
ANIMATION
=========================================*/

.fade-up{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:#00589d;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#003b70;

}

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

@media(max-width:768px){

article{

padding:22px;

}

article h1{

font-size:30px;

}

.article-content{

font-size:21px;

}

.featured-img{

max-height:300px;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-social{

justify-content:center;

}

}
/*=========================================
        BREAKING NEWS TICKER
=========================================*/

.breaking-news{

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#d50000;

    color:#fff;

    height:52px;

    font-weight:700;

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

}

.breaking-label{

    background:#9b0000;

    height:100%;

    display:flex;

    align-items:center;

    padding:0 25px;

    font-size:15px;

    white-space:nowrap;

}

.breaking-text{

    flex:1;

    overflow:hidden;

    white-space:nowrap;

}

.breaking-text span{

    display:inline-block;

    padding-left:100%;

    animation:marquee 22s linear infinite;

}

@keyframes marquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-100%);

}

}

/*=========================================
        HERO SECTION
=========================================*/

.hero-news{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

    margin-bottom:40px;

    align-items:start;

}

.hero-main{

    position:relative;

    overflow:hidden;

    border-radius:22px;

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

}

.hero-main img{

    width:100%;

    height:clamp(240px,38vw,500px);

    object-fit:cover;

    transition:.5s;

}

.hero-main:hover img{

    transform:scale(1.05);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,rgba(0,0,0,.82),transparent);

    display:flex;

    align-items:flex-end;

    padding:30px;

}

.hero-overlay h2{

    color:#fff;

    font-size:38px;

    line-height:1.4;

}

.hero-side{

    display:grid;

    gap:20px;

}

/*=========================================
        SMALL HERO CARD
=========================================*/

.hero-card{

    display:flex;

    gap:15px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.3s;

}

.hero-card:hover{

    transform:translateY(-6px);

}

.hero-card img{

    width:140px;

    object-fit:cover;

}

.hero-card-body{

    padding:15px;

}

.hero-card-body h4{

    font-size:18px;

    line-height:1.5;

    color:#122033;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 28px;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

    cursor:pointer;

}

.btn-primary{

    background:#00589d;

    color:#fff;

}

.btn-primary:hover{

    background:#003b70;

}

.btn-secondary{

    background:#00aeef;

    color:#fff;

}

.btn-secondary:hover{

    background:#0089cb;

}

/*=========================================
        BACK TO TOP
=========================================*/

.back-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#00589d;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    cursor:pointer;

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

    transition:.3s;

    z-index:999;

}

.back-top:hover{

    background:#003b70;

    transform:translateY(-5px);

}

/*=========================================
        LOADER
=========================================*/

.loader{

    width:45px;

    height:45px;

    border:4px solid #dbe7f4;

    border-top-color:#00589d;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

.badge{

    display:inline-block;

    padding:5px 12px;

    border-radius:25px;

    font-size:11px;

    font-weight:700;

}

.badge-live{

    background:#d50000;

    color:#fff;

}

.badge-new{

    background:#00aeef;

    color:#fff;

}

.badge-hot{

    background:#ff9800;

    color:#fff;

}

/*=========================================
        HOVER EFFECT
=========================================*/

.hover-shadow{

    transition:.35s;

}

.hover-shadow:hover{

    transform:translateY(-8px);

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

}

/*=========================================
        FADE ANIMATION
=========================================*/

.fade{

    animation:fade .7s;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

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

@media(max-width:1000px){

.hero-news{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.hero-overlay{

padding:18px;

}

.hero-overlay h2{

font-size:24px;

}

.hero-card{

flex-direction:column;

}

.hero-card img{

width:100%;

height:200px;

}

.breaking-news{

height:46px;

}

.breaking-label{

padding:0 15px;

font-size:13px;

}

.back-top{

width:46px;

height:46px;

right:15px;

bottom:15px;

}

}

/*=========================================
NEW: BREAKING NEWS LINKS
=========================================*/
.breaking-label i{
    margin-right:8px;
}
.breaking-text a{
    color:#fff;
    font-weight:700;
}
.breaking-text a:hover{
    text-decoration:underline;
}
.breaking-dot{
    margin:0 18px;
    opacity:.6;
    font-size:8px;
    vertical-align:middle;
}

/*=========================================
NEW: PAGE TITLE (category / search / videos)
=========================================*/
.page-title{
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:2px solid var(--border);
}
.page-title h1{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:30px;
    font-weight:800;
    color:#0d3b66;
    margin-bottom:6px;
}
.page-title h1 i{
    color:var(--secondary);
    font-size:26px;
}
.page-title p{
    color:var(--light);
    font-size:15px;
}

/*=========================================
NEW: EMPTY STATE
=========================================*/
.empty-state{
    grid-column:1/-1;
    text-align:center;
    padding:60px 20px;
    background:#fff;
    border-radius:20px;
    border:1px dashed var(--border);
    color:var(--light);
}
.empty-state i{
    font-size:40px;
    color:var(--secondary);
    margin-bottom:15px;
    display:block;
}
.empty-state p{
    font-size:16px;
}

/*=========================================
NEW: VIDEO CREDIT LINE
=========================================*/
.video-credit{
    margin-top:15px;
    padding:12px 16px;
    background:#eef6fc;
    border-left:4px solid var(--secondary);
    border-radius:8px;
    font-size:13px;
    color:var(--light);
}
.video-credit a{
    color:var(--primary);
    font-weight:700;
}

/*=========================================
NEW: HERO SECTION RESPONSIVE
=========================================*/
@media(max-width:600px){
    .hero-card{
        flex-direction:column;
    }
    .hero-card img{
        width:100%;
        height:160px;
    }
    .breaking-label span{
        display:none;
    }
    .hero-overlay h2{
        font-size:20px;
    }
    .hero-overlay{
        padding:14px;
    }
}

/*=========================================
NEW: STATIC INFO PAGES (about/contact/policy)
=========================================*/
.static-page{
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
    border:1px solid #edf2f7;
}
.static-page h1{
    font-size:28px;
    font-weight:800;
    color:#0d3b66;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:12px;
}
.static-page h1 i{
    color:var(--secondary);
}
.static-page h2{
    font-size:20px;
    font-weight:700;
    color:#0d3b66;
    margin:25px 0 12px;
}
.static-page p{
    color:var(--text);
    margin-bottom:14px;
    line-height:1.8;
}
.static-page ul{
    margin:0 0 14px 22px;
    color:var(--text);
    line-height:1.9;
}
.static-page .contact-info{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin-top:20px;
}
.static-page .contact-info-single{
    grid-template-columns:minmax(220px,320px);
    justify-content:center;
}
.static-page .contact-card{
    background:var(--bg);
    border-radius:14px;
    padding:18px;
    text-align:center;
}
.static-page .contact-card i{
    font-size:24px;
    color:var(--secondary);
    margin-bottom:10px;
    display:block;
}
.static-page form.contact-form,
.static-page form.submit-news-form{
    display:grid;
    gap:14px;
    margin-top:20px;
}
.static-page form input,
.static-page form textarea,
.static-page form select{
    padding:12px 16px;
    border-radius:10px;
    border:1px solid var(--border);
    font-family:inherit;
    font-size:14px;
}
.static-page form button{
    justify-self:start;
    padding:12px 30px;
    border-radius:40px;
    border:none;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    color:#fff;
    font-weight:700;
    cursor:pointer;
}
.static-page .faq-item{
    border-bottom:1px solid var(--border);
    padding:16px 0;
}
.static-page .faq-item h3{
    font-size:16px;
    color:#122033;
    margin-bottom:8px;
}

/*=========================================
NEW: NEWSLETTER STATUS MESSAGE
=========================================*/
.newsletter-status{
    margin-top:10px;
    font-size:13px;
    min-height:18px;
}
.newsletter-status.sending{
    color:#ffd54f;
}
.newsletter-status.success{
    color:#69f0ae;
}
.newsletter-status.error{
    color:#ff6b6b;
}
.static-page .contact-info-single .newsletter-status.error,
.static-page form button:disabled{
    opacity:.7;
    cursor:not-allowed;
}
.static-page form button:disabled{
    background:linear-gradient(90deg,#9fb3c8,#c8d3dd);
}
.static-page .newsletter-status.sending{
    color:#b8860b;
}
.static-page .newsletter-status.success{
    color:#1f9d55;
}
.static-page .newsletter-status.error{
    color:#d92c2c;
}

/*=========================================
NEW: GLOBAL RESPONSIVE SAFETY NET
(prevents horizontal overflow on small
devices without changing design/layout)
=========================================*/
html,
body{
    max-width:100%;
    overflow-x:hidden;
}

.article-content iframe,
.article-content video,
.article-content table{
    max-width:100%;
}

.article-content table{
    display:block;
    overflow-x:auto;
    border-collapse:collapse;
}

/*=========================================
NEW: MAIN CONTENT (ARTICLE / VIDEO) EDGE-TO-EDGE
On the article/video detail pages, only the
opened article/video card itself should ignore
the page-layout side padding. Everything else
(Related Articles/Videos sections, sidebar, and
every other page) keeps the normal page-layout
padding untouched.
=========================================*/
@media(max-width:1024px){
    .main-content > article{
        margin-left:-16px;
        margin-right:-16px;
    }
    /* Breaking news ticker is a full-bleed banner too,
       same treatment as the article/video card above. */
    .main-content > .breaking-news{
        margin-left:-16px;
        margin-right:-16px;
    }
}

/*=========================================
NEW: SEARCH SUGGESTIONS - FIX SIDEWAYS OVERFLOW
The matched-snippet badge had no width limit and
could push wider than its card, causing horizontal
scroll on mobile. Cap it so it wraps instead.
=========================================*/
.suggestion-tag,
#mobileSuggestionBox .suggestion-tag{
    max-width:100%;
    white-space:normal;
    word-break:break-word;
    line-height:1.4;
}

/*=========================================
NEW: TRENDING SIDEBAR VIDEO PLAY ICON
These classes (trending-thumb-wrapper / play-icon)
were used in the template but never styled, so the
play symbol rendered as stray text under the thumb
instead of as an overlay on top of it.
=========================================*/
.trending-thumb-wrapper{
    position:relative;
    flex-shrink:0;
    overflow:hidden;
    border-radius:14px;
}
.trending-thumb-wrapper .trending-thumb{
    margin:0;
}
.play-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    backdrop-filter:blur(3px);
}

/*=========================================
NEW: TOP SPACING FOR NAVBAR-LINKED PAGES
On mobile/tablet, .page-layout's vertical
margin is zeroed, which made category, videos,
search, and tag pages (reached via navbar links)
stick right under the header. Static pages
(footer links) and article/video pages are left
untouched, as is the home page.
=========================================*/
@media(max-width:1024px){
    .page-title{
        margin-top:20px;
    }
}

/*=========================================
NEW: PAGE TITLE / STATIC PAGE HEADINGS
(wrap icon + long titles cleanly on
narrow screens instead of overflowing)
=========================================*/
.page-title h1,
.static-page h1{
    flex-wrap:wrap;
}

/*=========================================
NEW: RESPONSIVE - LARGE TABLET / LAPTOP
(≤1024px: tighten outer spacing slightly
for laptop/tablet without changing the
grid layouts already in place)
=========================================*/
@media(max-width:1024px) and (min-width:769px){
    .page-layout{
        padding:0 16px;
    }
}

/*=========================================
NEW: RESPONSIVE - TABLET (≤768px)
Static info pages, forms, buttons, article
detail page and video page polish
=========================================*/
@media(max-width:768px){
    .static-page{
        padding:24px 18px;
        border-radius:16px;
    }
    .static-page h1{
        font-size:23px;
        gap:10px;
    }
    .static-page h2{
        font-size:18px;
        margin:20px 0 10px;
    }
    .static-page .contact-info{
        grid-template-columns:1fr;
    }
    .static-page .contact-info-single{
        grid-template-columns:1fr;
    }
    .static-page form.contact-form,
    .static-page form.submit-news-form{
        margin-top:16px;
    }
    .static-page form button{
        width:100%;
        justify-self:stretch;
    }
    .article-content h2{
        font-size:24px;
        margin:24px 0 12px;
    }
    .article-content{
        line-height:1.85;
    }
    .video-embed-wrapper{
        border-radius:14px;
        margin:18px 0;
    }
    .btn{
        padding:11px 22px;
        font-size:14px;
    }
    .view-all-btn{
        width:100%;
    }
}

/*=========================================
NEW: RESPONSIVE - MOBILE (≤600px)
=========================================*/
@media(max-width:600px){
    .page-title{
        margin-bottom:20px;
        padding-bottom:14px;
    }
    .page-title h1{
        font-size:22px;
        gap:8px;
    }
    .page-title h1 i{
        font-size:20px;
    }
    .page-title p{
        font-size:14px;
    }
    .static-page{
        padding:20px 14px;
    }
    .static-page h1{
        font-size:20px;
    }
    .static-page .contact-card{
        padding:16px;
    }
    .static-page .faq-item h3{
        font-size:15px;
    }
    article{
        padding:16px;
        border-radius:16px;
    }
    .category-tag{
        font-size:11px;
        padding:7px 14px 6px 14px;
    }
    .article-content h2{
        font-size:21px;
    }
    .tags{
        margin-top:24px;
    }
    .tag{
        padding:7px 14px;
        font-size:12px;
    }
    .pagination a,
    .current-page{
        width:42px;
        height:42px;
    }
}

/*=========================================
NEW: RESPONSIVE - SMALL MOBILE (≤400px)
Extra safety for narrow devices so text,
buttons and forms never overflow
=========================================*/
@media(max-width:400px){
    .static-page{
        padding:16px 12px;
    }
    .static-page h1{
        font-size:18px;
    }
    .static-page h2{
        font-size:16px;
    }
    article h1{
        font-size:24px;
    }
    .article-content{
        font-size:18px;
    }
    .article-card h3{
        font-size:17px;
    }
    .hero-overlay h2{
        font-size:18px;
    }
    .static-page form input,
    .static-page form textarea,
    .static-page form select{
        font-size:13px;
        padding:11px 14px;
    }
}