/*=============================================
  #TABLE OF CONTENTS
  ===============================================
  1.  :root & Global Styles
  2.  Utility Classes
  3.  Header & Navigation
      - Top Bar
      - Main Navigation
      - Mobile Menu
  4.  Trending Bar & Ticker
      - Trending Bar
      - Top News Ticker
  5.  Homepage: 3-Column Layout
  6.  Homepage: Live Updates Section
  7.  Homepage: Stories Slider
  8.  Homepage: Grid Layout
  9.  Homepage: Horizontal Scroll Section
  10. Homepage: 3-Column Widget Style
  11. Global Effects (Image Hover)
===============================================*/

/*=============================================
  #1 :root & Global Styles
===============================================*/
:root {
    --nav-bg-color: #f0f0f0;
    --border-color: #e0e0e0;
    --text-color: #333;
    --local-red: #d92424;
    /* --- CONTAINER SIZE --- */
    --container-width: 1280px; 
}

body {
    margin: 0;
    background-color: #ffffff;
    font-size: 5px;
    color: var(--text-color);
}

body.no-scroll {
    overflow: hidden;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

a {
    text-decoration: none;
    color: inherit;
}

/*=============================================
  #2 Utility Classes
===============================================*/
.view-desktop {
    display: none !important;
}

.truncate-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*=============================================
  #3 Header & Navigation
===============================================*/

/* --- Top Bar --- */
.top-bar {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.top-bar .container {
    justify-content: space-between;
}

.logo img,
.custom-logo {
    height: auto;
    max-width: 150px;
    display: block;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.whatsapp-follow {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 3px 8px;
    font-size: 12px;
}

.whatsapp-follow i {
    color: #25D366;
    font-size: 17px;
    margin-right: 4px;
}

.local-link i {
    color: var(--local-red);
    font-size: 25px;
}

/* --- Main Navigation --- */
.main-navigation {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
}

.main-navigation .container {
    padding: 0 10px;
    gap: 1px;
}

.home-icon {
    font-size: 16px;
    padding: 10px 5px;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    white-space: nowrap;
    overflow-x: auto;
    flex-grow: 1;
}

.nav-links li a {
    display: block;
    padding: 10px 12px;
    font-size: 18px;
}

.nav-links::-webkit-scrollbar {
    height: 6px;
}

.nav-links::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.nav-links::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* --- Hamburger & Mobile Menu --- */
.hamburger-menu {
    font-size: 16px;
    cursor: pointer;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #c00000;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu-overlay.open {
    transform: translateX(0);
}

.close-menu-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-menu-btn i {
    color: #000;
    font-size: 24px;
    font-weight: bold;
}

.mobile-nav ul {
    list-style: none;
    padding: 50px 30px 30px 30px;
    margin: 0;
}

.mobile-nav li a {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Desktop Navigation Styles --- */
@media (min-width: 992px) {
    .view-mobile {
        display: none !important;
    }
    .view-desktop {
        display: flex !important;
    }
    .container {
        max-width: 1280px;
        padding: 0 15px;
    }
    .top-bar {
        padding: 8px 0;
        border: none;
    }
    .top-bar .container {
        justify-content: space-between;
    }
    .logo {
        flex-grow: 1;
        display: flex;
        justify-content: center;
    }
    .top-bar-left-placeholder,
    .top-actions {
        flex-basis: 250px;
        flex-shrink: 0;
    }
    .top-actions {
        justify-content: flex-end;
    }
    .main-navigation {
        background-color: var(--nav-bg-color);
    }
    .main-navigation .container {
        justify-content: space-between;
        gap: 0;
    }
    .home-icon {
        display: none !important;
    }
    .nav-links {
        overflow: visible;
        flex-grow: 0;
        padding: 0;
        align-items: center;
    }
    .nav-links::before {
        content: '\f015';
        font-family: "Font Awesome 6 Free";
        font-weight: 800;
        font-size: 18px;
        color: var(--text-color);
        cursor: pointer;
        margin-right: 10px;
    }
    .desktop-nav-links {
        display: contents;
    }
    .nav-links li {
        padding: 0 8px;
    }
    .nav-links li a {
        padding: 5px 0;
        font-size: 16px;
        font-weight: 600;
    }
    .nav-links li a i.fa-angle-down {
        font-size: 16px;
        margin-left: 4px;
    }
    .nav-search {
        font-size: 15px;
        cursor: pointer;
    }
}

/*=============================================
  #4 Trending Bar & Ticker
===============================================*/

/* --- Trending Bar --- */
.trending-bar {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 8px 0;
}

.trending-bar .container {
    gap: 5px;
}

.trending-bar .title {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

.trending-bar .title i {
    margin-right: 5px;
}

.trends-list {
    display: flex;
    white-space: nowrap;
    overflow-x: auto;
    flex-grow: 1;
}

.trends-list a {
    font-size: 14px;
    padding: 0 8px;
    border-right: 1px solid #ccc;
    font-family: sans-serif;
}

.trends-list a:last-child {
    border-right: none;
}

.trends-list::-webkit-scrollbar {
    height: 4px;
}

.trends-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.trends-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

@media (min-width: 992px) {
    .trending-bar {
        padding: 10px 0;
    }
    .trending-bar .container {
        justify-content: space-between;
    }
    .trends-list {
        overflow: visible;
        white-space: normal;
    }
    .social-section {
        align-items: center;
        font-family: sans-serif;
        font-size: 12px;
        color: #666;
    }
    .social-section span {
        font-weight: bold;
        margin-right: 8px;
    }
    .social-section i.fa-chevron-right {
        font-size: 10px;
    }
    .social-section a {
        margin-left: 15px;
    }
}

/* --- Top News Ticker --- */
.top-news-ticker {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin: 2px 0;
    padding: 0 8px;
    overflow: hidden;
    height: 36px;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ticker-label {
    background: #fdb900; 
    color: #fff;
    font-weight: 600;
    padding: 0 12px;
    height: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 13px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.ticker-news {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.ticker-news ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    animation: ticker-scroll 30s linear infinite;
    white-space: nowrap;
}

.ticker-news ul:hover {
    animation-play-state: paused;
}

.ticker-news li {
    padding: 0 15px;
    border-right: 1px solid #e0e0e0;
    font-size: 14px;
    line-height: 36px;
    white-space: nowrap;
}

.ticker-news li:last-child {
    border-right: none;
}

.ticker-news li a {
    color: #222;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ticker-news li a:hover {
    color: #fdb900;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@media (max-width: 768px) {
    .top-news-ticker { height: 32px; }
    .ticker-label { font-size: 11px; padding: 0 8px; height: 20px; line-height: 20px; }
    .ticker-news li { font-size: 12px; padding: 0 10px; }
}

@media (max-width: 480px) {
    .top-news-ticker { height: 30px; }
    .ticker-label { font-size: 10px; padding: 0 6px; }
    .ticker-news li { font-size: 11px; padding: 0 6px; }
}


/*=============================================
  #5 Homepage: 3-Column Layout
===============================================*/
.home-layout-container {
    width: 100%;
    background-color: #fff;
}

.featured-post-container {
    max-width: 100%;
    margin-bottom: 5px;
}

.featured-post {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.featured-post img {
    width: 100%;
    height: 300px;
    display: block;
}

.caption {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 98%;
    background-color: white;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.strip {
    position: absolute;
    top: -4px;
    left: 15px;
    width: 80px;
    height: 7px;
    background-color: #ffc700;
    border-radius: 5px;
}

.caption h2 {
    margin: 0;
    padding-top: 2px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #333;
}
.caption h2.truncate-text {
    -webkit-line-clamp: 2;
}

.article-list .article-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 2px solid #f0f0f0;
}

.article-list .article-item:last-child {
    border-bottom: none;
}

.article-list .article-item p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    flex-grow: 1;
}
.article-item p.truncate-text {
    -webkit-line-clamp: 2;
}

.article-list .article-item img {
    width: 90px;
    height: 50px;
    object-fit: cover;
    margin-left: 15px;
    border-radius: 5px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .home-layout-container {
        display: flex;
        max-width: 1250px;
        margin: 10px auto;
        align-items: stretch;
    }
    .leftCol,
    .centerCol,
    .rightCol {
        padding: 5px;
        box-sizing: border-box;
    }
    .leftCol {
        width: 35%;
        border-right: 1px solid #f0f0f0;
    }
    .centerCol {
        width: 40%;
        border-right: 1px solid #f0f0f0;
    }
    .rightCol {
        width: 28%;
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .home-layout-container { display: block; }
    .leftCol,
    .centerCol,
    .rightCol {
        width: 98%;
        padding: 5px;
        border-right: none;
    }
    .rightCol { display: none; }
    .caption h2 { font-size: 19px; }
    .article-list .article-item p { font-size: 16px; }
}

/*=============================================
  #6 Homepage: Live Updates Section
===============================================*/
.live-updates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.live-header-left {
    display: flex;
    align-items: center;
}

.live-button {
    background-color: #d92429;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    padding: 2px 12px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    animation: blinkDot 1.5s infinite;
}

.live-button::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 6px;
}

.live-updates-header .title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

.refresh-icon {
    font-size: 20px;
    cursor: pointer;
    color: #b0b0b0;
    transition: transform 0.3s ease;
}

.refresh-icon:hover {
    color: #d92429;
    transform: rotate(90deg);
}

.live-updates-list-wrapper {
    margin-top: 8px;
    overflow-y: auto;
    max-height: 500px;
    padding-right: 6px;
    flex-grow: 1;
    min-height: 0;
}

.live-updates-list-wrapper::-webkit-scrollbar { width: 6px; }
.live-updates-list-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
.live-updates-list-wrapper::-webkit-scrollbar-thumb { background: #d92429; border-radius: 3px; }

.live-updates-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    padding-left: 25px;
}

.live-updates-list::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #f0f0f0;
}

.live-updates-list li {
    position: relative;
    margin-bottom: 5px;
    padding-left: 5px;
}

.live-updates-list li:last-child {
    margin-bottom: 5px;
}

.live-updates-list li::before {
    content: '';
    position: absolute;
    left: -17px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: #d92429;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #f0f0f0;
	
}

.live-updates-list .date {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 12px;
    color: #333;
	 
}

.live-updates-list p {
    margin: 0;
    font-size: 18px;
    color: #555;
    line-height: 1.3;
}

@keyframes blinkDot {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

@media (max-width: 768px) {
    .live-updates-list-wrapper {
        max-height: 300px;
    }
}

/* ================================================= */
/* === AUTHOR META BOX          === */
/* ================================================= */

.author-meta-box {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0; /* Bottom thin separator */
    border-top: 1px solid #f5f5f5;    /* Optional top light separator */
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 1. Avatar Image */
.author-avatar {
    flex-shrink: 0;
    margin-right: 12px;
}

.author-avatar img {
    border-radius: 50%; /* Makes image circular */
    width: 48px;
    height: 48px;
    border: 1px solid #ddd; /* Thin border around image */
    padding: 2px; /* Space between image and border */
    object-fit: cover;
}

/* 2. Middle Text Details */
.author-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author-name {
    margin: 0 0 3px 0;
    font-size: 15px;
    font-weight: 700;
    color: #000; /* Dark black color */
    line-height: 1.2;
}

.date-line {
    font-size: 13px;
    color: #666; /* Gray text for dates */
    line-height: 1.4;
}

.date-line span {
    display: inline-block;
    margin-right: 3px;
}

/* ================================================= */
/* === AUTHOR BOX WHATSAPP BUTTON                === */
/* ================================================= */

.share-action-right {
    flex-shrink: 0;
    margin-left: auto; /* Pushes the button to the far right */
    padding-left: 15px;
}

.wa-share-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;            /* Size of the circle */
    height: 40px;
    background-color: #25D366; /* WhatsApp Green */
    color: #fff;            /* Icon Color */
    border-radius: 50%;     /* Make it round */
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.wa-share-circle:hover {
    background-color: #128C7E; /* Darker Green on Hover */
    transform: scale(1.1);     /* Slight zoom effect */
    color: #fff;
}
/* Mobile Responsive Adjustments */
@media (max-width: 480px) {
    .date-line {
        font-size: 12px;
    }
    .author-name {
        font-size: 14px;
    }
}

/* =============================== STORIES YOU MAY LIKE – FIXED =============================== */
:root{--dark-blue:#0b1535;--white:#fff;--divider:rgba(255,255,255,0.35);--progress-red:#e10600}
.stories-section{max-width:1250px;width:95%;margin:10px auto;padding:0 10px;background:var(--dark-blue);position:relative}
.section-heading{width:100%;margin:0 auto 5px;display:flex;align-items:center}
.section-heading span{color:#fff;font-size:22px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.section-heading::after{content:"";flex:1;height:1px;background:var(--divider);margin-left:12px}
.carousel-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#e10600 rgba(255,255,255,0.2);width:100%;padding-bottom:10px;margin:0 auto}
.carousel-wrapper::-webkit-scrollbar{height:6px}
.carousel-wrapper::-webkit-scrollbar-track{background:rgba(255,255,255,0.2);border-radius:3px}
.carousel-wrapper::-webkit-scrollbar-thumb{background-color:#e10600;border-radius:3px;border:1px solid transparent}
.carousel{display:flex;gap:8px;width:max-content;padding-left:10px}
.story-card{width:200px;flex-shrink:0;background:var(--white);border-radius:6px;overflow:hidden;position:relative;transition:transform .2s ease}
.story-card::after{content:"";position:absolute;right:-7px;top:10px;width:1px;height:calc(100% - 20px);background:var(--divider)}
.story-card:last-child::after{display:none}
.story-card img{width:100%;height:120px;object-fit:cover}
.card-content{padding:10px 10px 12px}
.story-title{font-size:16px;font-weight:500;line-height:1.3;color:#000;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1024px){.story-card{width:200px}.story-card img{height:120px}}
@media(max-width:768px){.story-card{width:180px}.story-card img{height:110px}.carousel-wrapper{padding-bottom:12px}}
@media(max-width:480px){.story-card{width:150px}.story-card img{height:90px}.section-heading span{font-size:16px}}

/*============================================= #8 Homepage: Grid Layout (Ultra Compact) ===============================================*/
.news-container{max-width:1250px;margin:10px auto;display:grid;grid-template-columns:repeat(12,1fr);gap:6px}.big-news-header{grid-column:1/9}.more-header{grid-column:9/13}.col-1{grid-column:1/5}.col-2{grid-column:5/9}.col-3{grid-column:9/13}.section-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 3px 0;position:relative}.section-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1.5px;background:#eee}.title-wrapper{display:flex;align-items:center;width:100%}.section-title{font-size:20px;font-weight:bold;margin:0;padding-right:8px;line-height:1.1}.title-line{height:2.5px;background-color:#d43c38;width:100%}.read-more{color:#d43c38;text-decoration:none;font-weight:bold;font-size:14px;white-space:nowrap;padding-left:15px}.read-more:hover{opacity:.8}.featured-story img{width:100%;height:auto;max-height:230px;border-radius:6px;object-fit:cover}.featured-story-caption{font-size:19px;font-weight:700;margin:1px 0 8px 0;line-height:1.1}.news-item{display:flex;align-items:flex-start;gap:4px;margin-bottom:1px;border-bottom:1px solid #ddd;padding:1px 0}.news-item:last-child{border-bottom:none}.news-item .image-container{flex-shrink:0;background-color:#f0f0f0;border-radius:4px;overflow:hidden;width:100px;height:70px}.news-item img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}.news-item-text h3{font-size:16px;line-height:1.1;font-weight:700;margin:0 0 1px 0}.news-item-text .date{color:#888;font-size:12px}.mobile-more-section{display:none}@media(max-width:992px){.news-container{display:block;padding:0 6px}.more-header,.col-2,.col-3{display:none}.mobile-more-section{display:block;margin-top:15px}.section-header{margin:0 0 10px 0}.section-header::after{display:none}.section-title{padding-left:8px;border-left:4px solid #d43c38;font-size:22px;line-height:1.1}.title-line{height:2px;margin:0 6px}.news-item{border-bottom:1px solid #ddd;padding:2px 0}.news-item:last-child{border-bottom:none}.news-item .image-container{width:90px;height:65px}.news-item-text h3{font-size:15px;margin-bottom:1px;line-height:1.3}.featured-story-caption{margin:1px 0 10px 0}.featured-story img{max-height:180px}}

/*============================================= #9 Homepage: Horizontal Scroll Section ===============================================*/
.horizontal-scroll-section{max-width:1250px;margin:10px auto;padding:10px;background:#ff7101;border-radius:8px;position:relative}.horizontal-scroll-section h3{margin:0 0 10px 5px;font-size:19px;color:#fff}.horizontal-posts-scroll{display:flex;overflow-x:auto;gap:10px;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#fff rgba(255,255,255,0.2)}.horizontal-posts-scroll::-webkit-scrollbar{height:6px}.horizontal-posts-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,0.2);border-radius:3px}.horizontal-posts-scroll::-webkit-scrollbar-thumb{background:#fff;border-radius:3px}.horizontal-post-item{flex:0 0 180px;width:180px;background:#fff;border-radius:6px;box-shadow:0 2px 5px rgba(0,0,0,0.1);overflow:hidden;padding:5px}.horizontal-post-item img,.horizontal-post-item .attachment-medium{width:100%;height:100px;object-fit:cover;border-radius:6px;display:block}.horizontal-post-title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;font-size:15px;margin-top:8px;padding:5px;color:#333;font-weight:bold;line-height:1.4;min-height:63px}@media(max-width:768px){.horizontal-scroll-section{border-radius:0}.horizontal-scroll-section h3{font-size:16px}.horizontal-post-item{flex-basis:150px;width:150px}.horizontal-post-item img,.horizontal-post-item .attachment-medium{height:80px}.horizontal-post-title{font-size:14px;min-height:60px}}

/*============================================= #10 Homepage: 3-Column Widget Style ===============================================*/
.main-container{display:flex;flex-direction:column;gap:15px;max-width:1250px;margin:20px auto;padding:10px}.section-header-webinshot{display:flex;align-items:center;margin-bottom:12px;position:relative;padding-right:85px}.section-header-webinshot .title-wrapper{border-left:4px solid #ffc700;padding-left:8px;flex-shrink:0}.section-header-webinshot h1{margin:0;font-size:22px;font-weight:bold;color:#222}.section-header-webinshot .line{flex-grow:1;height:1px;background-color:#ccc;margin:0 10px}.section-header-webinshot a{position:absolute;right:0;top:50%;transform:translateY(-50%);text-decoration:none;color:#fff;background-color:#ff7101;padding:2px 20px;border-radius:20px;font-size:13px;font-weight:bold;white-space:nowrap}.widget-column .featured-post-container{max-width:100%;margin-bottom:8px}.widget-column .featured-post{position:relative;margin:0;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.08)}.widget-column .featured-post img,.widget-column .featured-post .attachment-large{width:100%;height:auto;display:block}.widget-column .caption{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:95%;background-color:white;border-radius:8px;padding:8px;box-sizing:border-box;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.widget-column .strip{position:absolute;top:-4px;left:15px;width:80px;height:7px;background-color:#ffc700;border-radius:5px}.widget-column .caption h2{margin:0;padding-top:2px;font-size:18px;font-weight:500;line-height:1.2;color:#333}.widget-column .article-list .article-item{display:flex;align-items:center;justify-content:space-between;padding:2px 0;border-bottom:0px solid #f0f0f0}.widget-column .article-list .article-item:last-child{border-bottom:none}.widget-column .article-list .article-item p{margin:0;font-size:17px;font-weight:400;line-height:1.4;flex-grow:1}.widget-column .article-list .article-item img,.widget-column .article-list .article-item .attachment-thumbnail{width:100px;height:50px;object-fit:cover;margin-left:15px;border-radius:5px;flex-shrink:0}@media(min-width:768px){.main-container{flex-direction:row;padding:0}.widget-column{flex:1}}

/* === SINGLE POST PAGE STYLES       === */

.single-page-container { background-color: #fff; padding: 0px 0; margin-top: 2; }
.single-layout-grid { display: flex; gap: 10px; }
.single-main-col { width: 70%; }
.single-sidebar-col { width: 30%; }

/* 2. Title */
h1.entry-title{font-size:29px;font-weight:800;line-height:1.4;margin-bottom:10px;color:#000;text-align:justify}
@media(max-width:768px){h1.entry-title{font-size:20px;line-height:1.25;margin-bottom:8px}}
@media(max-width:480px){h1.entry-title{font-size:22px;line-height:1.3;text-align:left}}
/* ============================== Breadcrumbs singal Post Container ============================== */

.post-breadcrumbs{width:100%;padding:0;margin:15px 0 10px 0;background:#fff;border-bottom:1px solid #eee;overflow-x:auto;-webkit-overflow-scrolling:touch}.bc-container{max-width:1250px;margin:0 auto;padding:0;display:flex;align-items:center;gap:5px;font-family:mukta,sans-serif;font-size:15px;line-height:1.5;color:#333;white-space:nowrap}.sep{color:#999;font-size:16px}.current{color:#555;font-weight:400;text-transform:capitalize;max-width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.post-breadcrumbs::-webkit-scrollbar{height:5px}@media(max-width:768px){.bc-container{font-size:14px;gap:2px}.current{max-width:100px}}


.post-summary-box{background:#f0f0f0;padding:10px;border-radius:8px;font-size:16px;color:#444;line-height:1.3;margin-bottom:15px;}.post-summary-box p{margin:0}
.single-featured-image{margin-bottom:10px;position:relative;display:block;overflow:hidden;border-radius:8px}
.single-featured-image img{width:100%;height:420px;border-radius:8px;display:block;object-fit:cover}
@media(max-width:1024px){.single-featured-image img{height:350px;border-radius:6px}}
@media(max-width:768px){.single-featured-image img{height:auto;border-radius:6px}}
@media(max-width:480px){.single-featured-image img{height:auto;border-radius:4px}}
.image-caption{background:#f5f5f5;color:#666;font-size:13px;padding:6px 8px;text-align:center;margin-bottom:5px}
.entry-content p{font-size:19px;line-height:1.8;margin-bottom:20px;color:#222;text-align:justify}
.post-topics-wrapper{margin:20px 0;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:10px;border-top:1px solid #eee}
.topics-label{font-weight:700;font-size:16px;color:#000;margin-right:2px}
.topic-tag{background:#f5f5f5;color:#333;padding:6px 15px;border-radius:10px;font-size:12px;font-weight:600;border:1px solid #e0e0e0;text-decoration:none}
.social-share-box{display:flex;gap:10px;margin:20px 0}
.share-btn{width:35px;height:35px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid #ddd;font-size:16px;color:#555;transition:.3s;text-decoration:none}
.share-btn:hover{background:#f0f0f0;color:#000}
.share-btn.fb{color:#1877f2;border-color:#1877f2}
.share-btn.wa{color:#25d366;border-color:#25d366}
.related-news-numbered{margin-top:15px}
.related-heading{font-size:18px;font-weight:700;border-bottom:2px solid #000;display:inline-block;margin-bottom:8px;padding-bottom:3px;color:#000}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.related-item-num{display:flex;gap:8px;border-bottom:1px solid #f0f0f0;padding-bottom:8px;align-items:flex-start}
.related-item-num:last-child{border-bottom:none}
.related-item-num .num{font-size:34px;font-weight:800;color:#e0e0e0;line-height:1;flex-shrink:0}
.related-item-num .thumb img{width:90px;height:55px;object-fit:cover;border-radius:4px;flex-shrink:0}
.related-item-num .content h4{margin:0;font-size:19px;line-height:1.3;font-weight:500}
.related-item-num .content h4 a{color:#000;text-decoration:none}
.related-item-num .content h4 a:hover{color:#d60000}
@media(max-width:768px){
.related-heading{font-size:18px;margin-bottom:6px;padding-bottom:2px}
.related-grid{grid-template-columns:1fr;gap:8px}
.related-item-num{gap:6px;padding-bottom:6px}
.related-item-num .num{font-size:30px}
.related-item-num .thumb img{width:80px;height:50px}
.related-item-num .content h4{font-size:16px}
}
@media(max-width:480px){
.related-item-num{gap:5px}
.related-item-num .num{font-size:24px}
.related-item-num .thumb img{width:72px;height:46px}
.related-item-num .content h4{font-size:16px}
}
.sidebar-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:12px}
.sidebar-title{font-size:18px;font-weight:700;border-left:4px solid #f1c40f;padding-left:8px;margin:0;color:#000;line-height:1}
.sidebar-btn{background:#000;color:#fff;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;text-decoration:none}
.sidebar-post-item{display:flex;gap:8px;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid #eaeaea;align-items:flex-start}
.sidebar-post-item:last-child{border-bottom:none;margin-bottom:0}
.sidebar-post-item .thumb img{width:90px;height:58px;object-fit:cover;border-radius:4px;flex-shrink:0}
.sidebar-post-item .details .title{font-size:15px;margin:0 0 4px;font-weight:500;line-height:1.35;color:#111}
.sidebar-post-item .details .title a{color:#000;text-decoration:none}
.sidebar-post-item .details .title a:hover{color:#c60000}
.sidebar-post-item .details .date{font-size:11px;color:#777}
.single-layout-grid{display:flex;align-items:flex-start}
.single-sidebar-col{position:sticky;top:110px;align-self:flex-start}
@media(max-width:768px){
.single-layout-grid{flex-direction:column}
.single-main-col,.single-sidebar-col{width:100%}
.single-sidebar-col{position:static;margin-top:30px;border-top:3px solid #eee;padding-top:15px}
.sidebar-post-item .thumb img{width:80px;height:52px}
.sidebar-post-item .details .title{font-size:16px}
}
.play-icon-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:rgba(0,0,0,.5);border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;z-index:10;box-shadow:0 4px 15px rgba(0,0,0,.3);transition:.3s;pointer-events:none}
.play-icon-overlay i{margin-left:4px}
.single-featured-image:hover .play-icon-overlay{background:#d92429;border-color:#d92429;transform:translate(-50%,-50%) scale(1.1)}


/* ================================================= */ /* === HEADER LOGIN ICON STYLES === */ /* ================================================= */


.header-login-icon{background:none;border:none;cursor:pointer;font-size:22px;color:#d92429;margin-left:15px;padding:5px;display:inline-flex;align-items:center;justify-content:center;transition:color .3s ease,transform .2s ease;text-decoration:none}
.header-login-icon:hover{color:#000;transform:scale(1.1)}
@media(max-width:768px){.header-login-icon{font-size:20px;margin-left:10px}}

.login-modal-overlay{display:none;position:fixed;z-index:999999;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);align-items:center;justify-content:center}
.login-modal-overlay.active{display:flex!important}

.login-modal-box{background:#fff;width:420px;max-width:90%;padding:40px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.5);position:relative;text-align:center;animation:popUp .3s ease-out forwards}
@keyframes popUp{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

.close-modal-btn{position:absolute;top:15px;right:20px;font-size:30px;color:#888;cursor:pointer;font-weight:700;line-height:1;transition:color .3s}
.close-modal-btn:hover{color:#000}

.login-logo img{height:40px;margin-bottom:15px;display:inline-block}
.signin-text{font-size:18px;color:#444;margin-bottom:25px;line-height:1.5}

.wp-login-form-wrapper label{display:block;text-align:left;margin-bottom:8px;font-size:17px;font-weight:700;color:#222}
.wp-login-form-wrapper input[type=text],
.wp-login-form-wrapper input[type=password]{width:100%;padding:12px 15px;margin-bottom:20px;border:1px solid #ccc;border-radius:5px;font-size:17px;height:50px;box-sizing:border-box;transition:border-color .3s}
.wp-login-form-wrapper input[type=text]:focus,
.wp-login-form-wrapper input[type=password]:focus{border-color:#0b57d0;outline:none;border-width:2px}

.wp-login-form-wrapper input[type=submit]{background:#0b57d0;color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:18px;font-weight:700;cursor:pointer;width:100%;margin-top:10px;transition:background-color .3s}
.wp-login-form-wrapper input[type=submit]:hover{background:#0043a8}

.login-remember{margin:10px 0 20px;display:flex;align-items:center;text-align:left}
.login-remember label{font-size:16px;font-weight:500;color:#555;margin:0;cursor:pointer;display:flex;align-items:center}
.login-remember input[type=checkbox]{width:20px;height:20px;margin-right:10px;cursor:pointer}


/* ================================================= */ /* === HOME PAGE - WEB STORIES (Fixed Alignment) === */ /* ================================================= */

.web-stories-container-wrapper{background:#fbf6e2;padding:20px 0;margin:20px 0;width:98%;border-top:1px solid #efe8cc;border-bottom:1px solid #efe8cc;box-sizing:border-box}.web-stories-inner{width:100%;padding:0}.ws-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;border-bottom:1px solid #eaddb6;padding:0!important}.ws-title{margin:0;font-size:22px;font-weight:700;color:#000;padding-left:10px;border-left:5px solid #ffc700;line-height:1}.ws-view-more{background:#000;color:#fff;padding:2px 15px;border-radius:20px;font-size:15px;font-weight:700;text-decoration:none}.ws-scroll-wrapper{overflow-x:auto;padding:0!important;scrollbar-width:thin;scrollbar-color:#ff4400 transparent}.ws-scroll-wrapper::-webkit-scrollbar{height:6px}.ws-scroll-wrapper::-webkit-scrollbar-track{background:#efe8cc;border-radius:3px}.ws-scroll-wrapper::-webkit-scrollbar-thumb{background:#dcd3b8;border-radius:3px}.ws-track{display:flex;gap:15px}.ws-card{flex:0 0 190px;background:#fff;border-radius:12px;overflow:hidden;text-decoration:none;box-shadow:0 2px 5px rgba(0,0,0,.05);border:1px solid #eaddb6;display:flex;flex-direction:column}.ws-card-image{width:100%;height:260px;position:relative;overflow:hidden}.ws-card-image img{width:100%;height:100%;object-fit:cover;display:block}.ws-card-content{padding:12px;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;height:100px}.ws-headline{font-size:17px;font-weight:500;color:#222;line-height:1.2;margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.ws-date{font-size:11px;color:#888;margin-top:auto}@media(max-width:768px){.web-stories-container-wrapper{padding:10px 0}.ws-card{flex:0 0 155px}.ws-card-image{height:220px}.ws-scroll-wrapper{padding-left:1px!important;padding-right:2px!important}}

/* ================================================= */ /* === HOME PAGE - YOUTUBE VIDEO GALLERY (Fixed) === */ /* ================================================= */
.video-gallery-section{background:#f5f5f5;padding:5px 0 40px;margin:10px 0 30px;border-top:1px solid #e0e0e0}.video-gallery-section .container{display:block!important}.video-gallery-section .grid-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:10px;border-bottom:1px solid #ddd;width:100%}.video-gallery-section .grid-title{margin:0;font-size:22px;font-weight:700;padding-left:12px;border-left:5px solid #f1c40f;line-height:1;color:#000}.video-layout-wrapper{display:flex;gap:10px;align-items:flex-start;width:100%}.vid-left-col{width:45%;flex-shrink:0}.vid-big-card{display:block;text-decoration:none}.vid-big-thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#000}.vid-big-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:transform .3s ease}.vid-big-card:hover .vid-big-thumb img{transform:scale(1.05);opacity:1}.vid-big-title{font-size:22px;font-weight:700;line-height:1.3;color:#000;margin:15px 0 0}.vid-big-card:hover .vid-big-title{color:#d92429}.vid-right-col{width:55%;flex-grow:1}.vid-small-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;row-gap:20px}.vid-small-card{display:block;text-decoration:none}.vid-small-thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:6px;margin-bottom:8px;background:#000}.vid-small-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:transform .3s ease}.vid-small-card:hover img{transform:scale(1.1);opacity:1}.vid-small-title{font-size:19px;font-weight:500;line-height:1.3;color:#333;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.vid-small-card:hover .vid-small-title{color:#d92429}.vid-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 5px rgba(0,0,0,.3);pointer-events:none}.vid-play-icon.big{width:50px;height:35px;border-radius:8px}.vid-play-icon.big i{color:#d92429;font-size:18px}.vid-play-icon.small{width:30px;height:30px;border-radius:5px}.vid-play-icon.small i{color:#333;font-size:10px}@media(max-width:1024px){.vid-small-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.video-layout-wrapper{flex-direction:column;gap:30px}.vid-left-col,.vid-right-col{width:100%}.vid-small-grid{grid-template-columns:repeat(2,1fr);gap:10px}.video-gallery-section .grid-title{font-size:20px}}.grid-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #e0e0e0;width:100%}.grid-title{margin:0;font-size:22px;font-weight:700;color:#000;padding-left:12px;border-left:5px solid #f1c40f;line-height:1;font-family:'Tiro Devanagari Hindi',sans-serif}.grid-read-more{background:#000;color:#fff!important;padding:6px 18px;border-radius:50px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;display:inline-block;transition:background-color .3s ease;line-height:normal}.grid-read-more:hover{background:#333;color:#fff;text-decoration:none}@media(max-width:768px){.grid-title{font-size:18px;padding-left:8px;border-left-width:4px}.grid-read-more{padding:4px 12px;font-size:11px}}




/* ================================================= */
/* === HOME PAGE - CATEGORY TABS (FIXED LAYOUT)  === */
/* ================================================= */

/* 1. Main Section Spacing */
.state-news-section {
    margin: 30px 0;
    width: 100%;
    box-sizing: border-box;
}

/* 2. Wrapper (Sidebar + Content) */
.state-news-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-start; /* Top alignment for better flow */
}

/* 3. Left Sidebar (The Links) */
.state-tabs-sidebar {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Link Button Styling */
.state-tab-btn {
    display: block;
    text-decoration: none;
    background-color: #fff;
    color: #555;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    position: relative;
    text-align: left;
    cursor: pointer;
}

/* Hover Effect */
.state-tab-btn:hover {
    background-color: #f9f9f9;
    color: #000;
    border-color: #ccc;
    transform: translateX(5px);
}

/* Active State */
.state-tab-btn.active {
    background-color: #fff;
    color: #d92429; /* Red Text */
    border-left: 6px solid #fac42f; /* Yellow Border Left */
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* 4. Right Content Panel */
.state-content-panel {
    flex-grow: 1;
    background-color: #f5f5f5; /* Light Gray Background */
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #eee;
    width: 100%; /* Ensures it fills remaining space */
    min-width: 0; /* Critical for Flexbox text wrapping */
    box-sizing: border-box;
}

/* Panel Header */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

.panel-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #222;
    padding-left: 12px;
    border-left: 5px solid #d92429;
    line-height: 1;
    font-family: 'Tiro Devanagari Hindi', serif;
}

/* 5. Inner Grid (Images + List) */
.panel-body-grid {
    display: flex;
    gap: 20px;
}

/* Middle Column (Image Cards) */
.featured-grid-col {
    width: 65%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns */
    gap: 15px;
}

.img-card {
    position: relative;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.img-card a { display: block; height: 100%; width: 100%; }

.img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}
.img-card:hover img { transform: scale(1.05); }

.img-card-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.img-card-title {
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Right Column (Text List) */
.list-grid-col {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.text-card-white {
    background-color: #fff;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}
.text-card-white:hover { transform: translateY(-2px); border-color: #ccc; }
.text-card-white a { text-decoration: none; display: block; }

.text-card-title {
    font-size: 19px;
    font-weight: 500;
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-card-date { font-size: 11px; color: #888; }


/* ========================================= */
/* === BUTTON STYLE (Yellow/Black)       === */
/* ========================================= */
.panel-view-more,
.panel-read-more {
    background-color: #fac42f; /* Yellow Background */
    color: #fff !important;    /* White Text */
    padding: 5px 18px;
    border-radius: 20px;       /* Round Pill */
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease;
    display: inline-block;
    line-height: normal;
}

.panel-view-more:hover,
.panel-read-more:hover {
    background-color: #333; /* Dark Grey on Hover */
    color: #fff !important;
}


/* ================================================= */
/* === MOBILE RESPONSIVE DESIGN (Screenshot Match) === */
/* ================================================= */

@media (max-width: 768px) {
    
    /* 1. Container & Wrapper Styling */
    .state-news-section {
        margin: 20px 0;
        background-color: #f4f4f4; /* लाइट ग्रे बैकग्राउंड */
        padding-bottom: 20px;
    }

    .state-news-wrapper {
        flex-direction: column;
        gap: 5px;
        width: 100%;
        overflow: hidden;
    }

    /* 2. Top Scrollable Tabs (Pills) */
    .state-tabs-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0px 0px 10px 0px;
        border-bottom: none;
        background: #fff;
    }

    /* Orange Scrollbar */
    .state-tabs-sidebar::-webkit-scrollbar { height: 5px; display: block; }
    .state-tabs-sidebar::-webkit-scrollbar-track { background: #ffe0b2; border-radius: 4px; }
    .state-tabs-sidebar::-webkit-scrollbar-thumb { background: #ff9800; border-radius: 4px; }

    /* Tab Buttons */
    .state-tab-btn {
        flex-shrink: 0;
        width: auto;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 700;
        color: #555;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px; /* Pill Shape */
        margin-right: 0px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        text-align: center;
    }
    
    /* Active Tab (Red with Yellow Border) */
    .state-tab-btn.active {
        background-color: #d32f2f;
        color: #fff;
        border: none;
        border-left: 2px solid #ffeb3b;
        font-weight: 800;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* 3. Header Section */
    .state-content-panel {
        padding: 0 10px;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .panel-header {
        margin-bottom: 8px;
        padding-bottom: 2px;
        border-bottom: none; 
    }

    .panel-title {
        font-size: 18px;
        border-left: 4px solid #d32f2f;
        padding-left: 5px;
        color: #000;
    }

    /* Yellow Button */
    .panel-view-more {
        background-color: #fac42f;
        color: #fff !important;
        font-size: 11px;
        padding: 4px 12px;
        border-radius: 15px;
        text-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }

    /* 4. Content Layout */
    .panel-body-grid {
        flex-direction: column;
        gap: 8px;
    }

    /* 5. Featured Image (ONLY ONE) */
    .featured-grid-col {
        grid-template-columns: 1fr;
        width: 100%;
        display: block;  
    }

    /* --- MAGIC: Hide all images except the first one --- */
    .featured-grid-col .img-card:not(:first-child) {
        display: none;
    }

    /* Styling the one visible image card */
    .img-card {
        height: 200px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        margin-bottom: 0;
    }
    
    .img-card-content {
        background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 100%);
        padding: 15px;
    }
    
    .img-card-title {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    }

    /* 6. List Items (White Cards below image) */
    .list-grid-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .text-card-white {
        background-color: #fff;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #e0e0e0;
        border-left: 2px solid #e0e0e0; /* Optional: Adds a small border accent */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        margin-bottom: 0;
    }

    .text-card-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        margin-bottom: 0px;
        color: #333;
    }

    .text-card-date {
        font-size: 12px;
        color: #999;
        font-weight: 500;
    }
}




/* ===============================
   Footer Legal Navigation
   =============================== */

.footer-legal-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    padding: 12px 0;
}

.footer-legal-nav a {
    text-decoration: none;
    color: #555;
    transition: color 0.2s ease;
}

.footer-legal-nav a:hover {
    color: #000;
}

.footer-legal-separator {
    color: #ccc;
    margin: 0 4px;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .footer-legal-nav {
        font-size: 13px;
        line-height: 1.6;
    }
}



/* ================================================= */
/* === PAGE TEMPLATE STYLES                      === */
/* ================================================= */

.page-container-wrapper {
    background-color: #fff;
    padding: 20px 0 40px 0;
}

/* 1. Layout Grid */
.page-layout-grid {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.page-main-col {
    width: 66%; /* Left side width */
}

.page-sidebar-col {
    width: 34%; /* Right side width */
}

/* 2. Breadcrumbs */
.page-breadcrumbs {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
    font-family: sans-serif;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.page-breadcrumbs a { text-decoration: none; color: #0056b3; }
.page-breadcrumbs .sep { margin: 0 5px; color: #ccc; }
.page-breadcrumbs .current { color: #333; font-weight: 500; }

/* 3. Page Title (Yellow Bar Style) */
.page-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 5px solid #f1c40f; /* Yellow Line */
    line-height: 1.2;
}

/* 4. Featured Image */
.page-featured-image {
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden;
}
.page-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 5. Content Typography */
.entry-content {
    font-family: 'Noto Sans', sans-serif;
    color: #333;
    font-size: 17px;
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content h2, 
.entry-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #111;
}

.entry-content ul, 
.entry-content ol {
    margin-bottom: 20px;
    padding-left: 20px;
}

.entry-content li {
    margin-bottom: 10px;
}

/* --- Mobile Responsive --- */
@media (max-width: 991px) {
    .page-layout-grid {
        flex-direction: column;
    }
    .page-main-col, 
    .page-sidebar-col {
        width: 100%;
    }
    .page-sidebar-col {
        margin-top: 40px;
        border-top: 4px solid #eee;
        padding-top: 20px;
    }
    .page-title {
        font-size: 26px;
        padding-left: 10px;
        border-left-width: 4px;
    }
}












/*=============================================
  #11 Global Effects (Image Hover)
===============================================*/
img:hover {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

/* =================================================================
   #COMPONENT: BREADCRUMBS
   =================================================================
   - Styling for the breadcrumb navigation trail.
   - Includes styles for links, separators, and the current/active page.
   ================================================================= */

/* --- Variables (to manage colors and fonts from one place) --- */
:root {
    --breadcrumb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --breadcrumb-link-color: #0056b3;      /* Blue color, matching the screenshot */
    --breadcrumb-link-hover-color: #003d82; /* Darker blue for hover state */
    --breadcrumb-separator-color: #666;   /* Color for the separator */
    --breadcrumb-current-color: #0056b3;  /* Color for the current page item */
}

/* --- Main breadcrumb container --- */
.archive-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding: 10px 0;
    font-family: var(--breadcrumb-font);
    font-size: 14px;
}

/* --- Navigation links (e.g., 'Home', 'Parent Category') --- */
.archive-breadcrumbs a {
    color: var(--breadcrumb-link-color);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease-in-out; /* Adds a smooth color transition on hover */
}

.archive-breadcrumbs a:hover {
    color: var(--breadcrumb-link-hover-color);
    text-decoration: underline;
}

/* --- Separator icon or text (e.g., ›) --- */
.archive-breadcrumbs .sep {
    margin: 0 8px; /* Slightly increased spacing for better readability */
    color: var(--breadcrumb-separator-color);
    font-size: 16px;
    line-height: 1; /* Ensures proper vertical alignment */
}

/* --- Current/active page (which is typically not a link) --- */
.archive-breadcrumbs .current {
    color: var(--breadcrumb-current-color); /* Kept blue to match the links as requested */
    font-weight: 400;
}







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

/* --- Footer Container --- */
.site-footer {
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 30px 15px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 40px;
}

.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    /* Remove flex direction column here to match your demo structure */
    display: block; 
}

/* --- 1. Follow Us Section --- */
.follow-heading {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 0 0 15px 0;
}

.social-icons-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: #f2f2f2;
    color: #333;
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s;
}

.social-icon:hover {
    background-color: #ddd;
}

/* --- 2. Footer Menu (Responsive Wrapping) --- */
/* Note: WordPress wraps menu in div or nav, we target .footer-nav ul */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap; /* Magic for mobile wrapping */
    justify-content: center;
    line-height: 1.8;
}

.footer-nav li {
    padding: 0;
    margin: 0;
}

.footer-nav li a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    padding: 0 6px;
}

.footer-nav li a:hover {
    color: #000;
}

/* The Pipe Separator (|) */
.footer-nav li::after {
    content: '|';
    color: #ccc;
    font-size: 12px;
    vertical-align: middle;
}

/* Remove pipe from the very last item */
.footer-nav li:last-child::after {
    display: none;
}

/* --- 3. Copyright Section --- */
.copyright-text {
    font-size: 13px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

.copyright-text a {
    color: #0056b3;
    text-decoration: none;
}

/* --- Mobile Adjustments --- */
@media (max-width: 480px) {
    .site-footer {
        padding: 20px 10px;
    }
    
    .footer-nav li a {
        font-size: 13px;
        padding: 0 4px;
    }

    /* Lighter pipe color on mobile */
    .footer-nav li::after {
        color: #ddd; 
    }
    
    .copyright-text {
        font-size: 12px;
        margin-top: 10px;
    }
}


.webinshot-inline-related{margin:15px 0;font-size:17px;line-height:1.4;display:block;padding:5px 0;border-bottom:1px solid #f0f0f0}
.webinshot-inline-related .inline-label{color:#000;font-weight:800}
.webinshot-inline-related a{color:#00f;font-weight:700;text-decoration:none}
.webinshot-inline-related a:hover{color:#d92429;text-decoration:underline}
@media(max-width:768px){.webinshot-inline-related{font-size:19px;margin:12px 0}}


.verified-badge-official{display:inline-flex;align-items:center;margin-left:0;width:18px;height:16px;vertical-align:middle}
.verified-badge-official svg{width:100%;height:100%;fill:#1d9bf0}
.author-name{display:flex;align-items:center;font-size:15px;font-weight:700;margin:0 0 4px;color:#000}


/* === DOWNLOAD APP BUTTON STYLES === */ /* ================================================= */
.download-app-link{background:#ffb303;color:#fff!important;padding:2px 10px;border-radius:5px;font-size:12px;font-weight:700;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;text-decoration:none;border:1px solid #000;margin-right:6px}
.download-app-link i{font-size:15px;color:#fff}


.author-archive-page{background-color:#fff;padding:40px 0}
.author-profile-card{max-width:700px;margin:0 auto 50px;background-color:#f7f3e9;padding:40px 30px;border-radius:15px;text-align:center;border:1px solid #eaddca;box-shadow:0 4px 15px rgba(0,0,0,.05)}
.author-avatar-wrap{margin-top:-80px;margin-bottom:15px}
.author-avatar-wrap img{width:130px;height:130px;border-radius:50%;border:5px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.1);object-fit:cover}
.author-display-name{font-size:26px;font-weight:700;color:#333;margin:10px 0 5px;font-family:'Tiro Devanagari Hindi',serif}
.author-designation{display:inline-block;font-size:18px;font-weight:800;color:#444;margin-bottom:20px;text-transform:uppercase;letter-spacing:1px}
.author-bio-description{font-size:15px;color:#555;line-height:1.7;max-width:600px;margin:0 auto}
@media(max-width:768px){
.author-profile-card{margin:60px 15px 30px;padding:30px 20px}
.author-avatar-wrap{margin-top:-70px}
.author-avatar-wrap img{width:100px;height:100px}
.author-display-name{font-size:22px}
}

/* ================================================= */ /* === AUTHOR PROFILE PAGE STYLES === */ /* ================================================= */
.footer-bottom-bar{background-color:#f78c00;padding:10px 0;width:100%;margin-top:0}
.footer-bottom-flex{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center}
.copyright-text{color:#fff!important;font-size:14px;margin:0;font-family:sans-serif;letter-spacing:.3px}
.copyright-text span{font-weight:600}
.powered-by-webinshot{display:flex;align-items:center;justify-content:center;gap:10px}
.powered-label{color:#fff;font-size:14px;font-weight:700}
.webinshot-pill{background-color:#fff;border-radius:25px;padding:2px 8px 2px 15px;display:flex;align-items:center;gap:8px;text-decoration:none!important;border:1px solid rgba(0,0,0,.1)}
.brand-name{color:#000;font-size:12px;font-weight:500;text-transform:uppercase;font-family:Arial,sans-serif}
.blue-dot{width:12px;height:12px;background-color:#2b60de;border-radius:50%;display:inline-block}
@media(min-width:768px){
.footer-bottom-bar{padding:20px 0}
}


/* ================================================= */
/* === AUTHOR PAGE BOX STYLE   === */
/* ================================================= */

.author-page-wrapper {
    background-color: #fff;
    padding-top: 60px; /* Space for the overlapping avatar */
}

/* 1. Main Hero Box */
.author-box-hero {
    max-width: 750px;
    margin: 0 auto 50px auto;
    background-color: #f7f3e9; /* Light cream/beige from screenshot */
    border: 1px solid #eaddca;
    border-radius: 15px;
    padding: 20px 40px 40px 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 2. Avatar Overlap */
.author-avatar-container {
    position: absolute;
    top: -65px; /* Half of image size */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.author-img-circle {
    width: 130px;
    height: 130px;
    border-radius: 50% !important;
    border: 6px solid #fff; /* White thick border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    object-fit: cover;
    display: block;
}

/* 3. Text Styles */
.author-info-content {
    margin-top: 60px; /* Space after avatar */
}

.author-full-name {
    font-family: 'Tiro Devanagari Hindi', serif;
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 5px 0;
}

.author-title-label {
    display: inline-block;
    font-size: 18px;
    font-weight: 900; /* Extra Bold */
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-family: sans-serif;
}

.author-bio-text {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    max-width: 650px;
    margin: 0 auto;
}

/* 4. Pagination (Center Column) */
.pagination-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.pagination-wrapper .page-numbers {
    padding: 8px 15px;
    background: #f4f4f4;
    margin: 0 3px;
    border-radius: 4px;
    font-weight: bold;
}
.pagination-wrapper .page-numbers.current {
    background: #d92429;
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .author-box-hero {
        margin: 0 15px 40px 15px;
        padding: 20px;
    }
    .author-full-name { font-size: 22px; }
    .author-title-label { font-size: 16px; }
}



.header-right-actions{display:flex;align-items:center;margin-left:auto;gap:20px}
.state-nav-link{display:flex;flex-direction:column;align-items:center;text-decoration:none!important;color:#333;transition:color .2s}
.state-nav-link i{font-size:16px;margin-bottom:-2px}
.state-nav-text{font-size:11px;font-weight:700;color:#000;white-space:nowrap}
.state-nav-link:hover{color:#d92429}




/* --- Sub Menu Bar (The list that opens) --- */
.bottom-sub-menu-bar {
    position: fixed;
    bottom: 65px;
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: 999998; /* Just below the nav bar */
    display: none;
    border-top: 1px solid #eee;
    box-shadow: 0 -8px 20px rgba(0,0,0,0.1);
    padding: 12px 0;
}
.bottom-sub-menu-bar.active {
    display: flex !important;
}



/* ================================================= */
/* === MOBILE BOTTOM NAVIGATION (PIXEL PERFECT FIX) === */
/* ================================================= */

/* 1. Prevent whole page from shifting horizontally */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 991px) {
    .webinshot-mobile-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 65px;
        background: #ffffff;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
        z-index: 999999; /* Highest priority */
        border-radius: 20px 20px 0 0;
        display: flex !important; /* Force visibility */
        transition: transform 0.4s ease;
        box-sizing: border-box;
    }

    /* Logic for Hide on Scroll down */
    .webinshot-mobile-nav.nav-hidden {
        transform: translateY(110%);
    }

    .nav-content {
        display: flex !important;
        width: 100%;
        height: 100%;
        justify-content: space-between; /* Equal spacing */
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        position: relative;
    }

    .nav-item {
        flex: 1; /* All items take equal width */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        color: #000000;
        min-width: 0; /* Prevents flex items from overflowing */
    }

    .nav-item i {
        font-size: 18px;
        margin-bottom: 2px;
        display: block;
    }

    .nav-item span {
        font-size: 10px;
        font-weight: 700;
        display: block;
        text-align: center;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- CENTER RAISED BUTTON FIX --- */
    .center-wrap {
        position: relative;
        overflow: visible; /* Let the circle pop out */
        z-index: 10;
    }

    .center-raised-btn {
        width: 52px;
        height: 52px;
        background: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -42px; /* Lift it up */
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 -5px 12px rgba(0,0,0,0.12);
        border: 1px solid #f2f2f2;
    }

    .center-raised-btn i {
        font-size: 24px;
        color: #000000;
        margin: 0;
    }

    .center-label {
        margin-top: 15px; /* Alignment below circle */
        font-size: 10px;
        font-weight: 700;
    }

    /* Body Padding to prevent content overlap */
    body {
        padding-bottom: 70px !important;
    }
}


/* ================================================= */
/* === MOBILE BOTTOM NAVIGATION (EXACT STYLE)    === */
/* ================================================= */

/* Hide on Desktop Devices */
@media (min-width: 992px) {
    .webinshot-mobile-nav { display: none !important; }
}

/* Styles for Mobile View */
@media (max-width: 991px) {
    .webinshot-mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px; /* Base height of the bar */
        background: #ffffff;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.08); /* Upward shadow */
        z-index: 99999;
        border-radius: 20px 20px 0 0; /* Smooth rounded top corners */
        transition: transform 0.4s ease-in-out; /* For hide/show on scroll */
    }

    /* Used by JavaScript to hide when scrolling down */
    .webinshot-mobile-nav.nav-hidden {
        transform: translateY(110%);
    }

    .nav-container {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        height: 100%;
        position: relative;
        padding-bottom: 8px; /* Spacing for labels */
    }

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none !important;
        color: #000000; /* Solid Black Icons/Text */
    }

    .nav-item i {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .nav-item span {
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }

    /* --- CENTER RAISED BUTTON STYLE --- */
    .center-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: visible; /* Allows button to pop out of the container */
    }

    .center-raised-btn {
        width: 40px;
        height: 40px;
        background: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -20px; /* Lift above the navigation bar */
        box-shadow: 0 -5px 10px rgba(0,0,0,0.12); /* Shadow for the floating effect */
        border: 1px solid #f2f2f2;
        z-index: 100;
    }

    .center-raised-btn i {
        font-size: 25px;
        color: #000000;
        margin: 0;
    }

    .center-label {
        font-size: 10px;
        font-weight: 700;
        color: #000000;
        margin-top: 18px; /* Alignment with other labels */
    }

    /* Feedback on tap */
    .nav-item:active i, .nav-item:active span {
        color: #d92429;
    }

    /* Important: Add padding to body so footer doesn't hide content */
    body { padding-bottom: 75px !important; }
}





/* ================================================= */