/*
Theme Name: LokmayaNews
Author: LokmayaNews
Description: Custom Hindi News Portal Theme
Version: 1.0
Text Domain: lokmayanews
*/


/* =====================================================
   GLOBAL
===================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f5f5;
    color: #222;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 1200px;
    max-width: 94%;
    margin: 0 auto;
}


/* =====================================================
   TOP ADVERTISEMENT
===================================================== */

.top-ad {

    margin-top: 10px;
}
/* CATEGORY 2 COLUMN FORCE */

.category-news-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
}

.category-news-grid .category-news-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}


/* IMAGE */

.category-news-grid .category-news-image {
    display: block !important;
    width: 100% !important;
}

.category-news-grid .category-news-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}


/* MOBILE */

@media (max-width: 768px) {
    .category-news-grid {
        grid-template-columns: 1fr !important;
    }
}

.breaking-news .container {
    display: flex;
    align-items: center;

    overflow: hidden;

    max-width: 100%;
}

.breaking-label {
    flex: 0 0 auto;

    background: #e31b23;
    color: #fff;

    font-weight: 700;

    padding: 9px 18px;

    white-space: nowrap;

    position: relative;
    z-index: 5;
}

.breaking-wrapper {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    position: relative;
}

.breaking-text {
    display: inline-block;

    white-space: nowrap;

    padding-left: 100%;

    animation: breaking-scroll 25s linear infinite;

    will-change: transform;
}

.breaking-text a {
    color: #222;

    text-decoration: none;

    font-size: 15px;
    font-weight: 500;
}

.breaking-text a:hover {
    color: #e31b23;
}

.breaking-separator {
    color: #e31b23;

    font-weight: bold;

    margin: 0 20px;
}

@keyframes breaking-scroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }

}


/* =====================================================
   HOMEPAGE EPAPER
   RAIPUR | NUTAN | LOKMAYA | BHOPAL
===================================================== */

.magazine-section {
    width: 100%;

    margin: 5px 0 10px;

}


/* FOUR CARDS */

.magazine-container {
    width: 100%;

    display: grid;

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

    gap: 8px;

    margin: 0;
    padding: 0;
}


/* EACH CARD */

.magazine-card {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: #fff;

    border: 1px solid #ddd;

    overflow: hidden;
}


/* IMAGE */

.magazine-card .magazine-image {
    display: block;

    width: 100% !important;

    height: 200px !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    object-position: center center !important;

    background: #f5f5f5;
}


/* TITLE */

.magazine-title {
    width: 100%;

    min-height: 40px;

    margin: 0;
    padding: 6px 5px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.3;
}


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

.latest-bar {
    background: #fff;

    margin: 15px 0;

    border-left: 5px solid #d71920;

    padding: 12px 15px;
}

.latest-title {
    font-size: 20px;

    font-weight: bold;

    color: #d71920;
}


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

.main-layout {
    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 20px;

    align-items: start;
}


/* =====================================================
   LEFT - LATEST POST
===================================================== */

.latest-posts {
    width: 100%;
}

.post-card {
    background: #fff;

    margin-bottom: 20px;

    padding: 15px;

    border: 1px solid #e5e5e5;
}

.post-card > a {
    display: block;
}

.post-card img {
    width: 100%;

    height: auto;

    object-fit: cover;
}

.post-card h2 {
    margin: 12px 0 8px;

    font-size: 24px;

    line-height: 1.35;
}

.post-card h2 a {
    color: #222;
}

.post-card h2 a:hover {
    color: #d71920;
}

.post-meta {
    color: #777;

    font-size: 13px;

    margin-bottom: 10px;
}

.post-excerpt {
    color: #444;

    font-size: 15px;

    line-height: 1.6;
}


/* =====================================================
   RIGHT - FEATURED POSTS
===================================================== */

.featured-box {
    width: 100%;
}

.featured-box > h2 {
    margin: 0 0 15px;

    padding: 0 0 8px;

    font-size: 24px;

    line-height: 1.3;

    color: #222;

    border-bottom: 3px solid #d71920;
}


/* FEATURED GRID */

.featured-grid {
    display: grid;

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

    gap: 15px;
}


/* FEATURED CARD */

.featured-post {
    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    min-width: 0;
}


/* FEATURED IMAGE */

.featured-image {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    position: relative;

    overflow: hidden;

    background: #eee;
}

.featured-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* CATEGORY */

.featured-category {
    position: absolute;

    left: 0;
    bottom: 0;

    background: #d71920;

    color: #fff;

    padding: 5px 9px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;

    z-index: 2;
}


/* FEATURED TITLE */

.featured-post h3 {
    margin: 7px 0 4px;

    font-size: 15px;

    line-height: 1.4;
}

.featured-post h3 a {
    color: #222;
}

.featured-post h3 a:hover {
    color: #d71920;
}

.featured-post .post-meta {
    margin-bottom: 10px;
}


/* =====================================================
   NEWS SLIDER
===================================================== */

.news-slider {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #fff;

    padding: 0 45px;
}

.news-slider-window {
    width: 100%;

    overflow: hidden;
}

.news-slider-track {
    display: flex;

    transition: transform 0.6s ease;

    will-change: transform;
}

.news-slide {
    flex: 0 0 20%;

    width: 20%;

    padding: 0 7px;

    min-width: 0;
}

.news-slide-image {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #eee;
}

.news-slide-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}

.news-slide-content {
    padding: 8px 2px 12px;
}

.news-slide-category {
    display: inline-block;

    background: #d71920;

    color: #fff;

    padding: 4px 7px;

    font-size: 10px;

    font-weight: 700;

    margin-bottom: 5px;
}

.news-slide h2 {
    margin: 4px 0 6px;

    font-size: 16px;

    line-height: 1.4;
}

.news-slide h2 a {
    color: #222;
}

.news-slide h2 a:hover {
    color: #d71920;
}

.news-slide .post-meta {
    font-size: 11px;

    color: #777;
}


/* SLIDER BUTTON */

.slider-btn {
    position: absolute;

    top: 35%;

    transform: translateY(-50%);

    width: 34px;

    height: 34px;

    border: none;

    border-radius: 50%;

    background: #d71920;

    color: #fff;

    font-size: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 5;
}

.slider-btn:hover {
    background: #a90000;
}

.slider-prev {
    left: 5px;
}

.slider-next {
    right: 5px;
}


/* =====================================================
   E-PAPER PAGE
===================================================== */

.epaper-page {
    padding: 20px 0 40px;
}

.epaper-heading {
    background: #fff;

    border-left: 5px solid #d71920;

    padding: 15px 18px;

    margin-bottom: 20px;
}

.epaper-heading h1 {
    margin: 0 0 5px;

    font-size: 28px;

    color: #d71920;
}

.epaper-heading p {
    margin: 0;

    color: #666;
}


/* E-PAPER GRID */

.epaper-grid {
    display: grid;

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

    gap: 25px;
}


/* CARD */

.epaper-card {
    background: #fff;

    border: 1px solid #ddd;

    padding: 12px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.06);
}


/* COVER */

.epaper-cover {
    display: block;

    width: 100%;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    background: #eee;
}

.epaper-cover img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* INFO */

.epaper-info {
    text-align: center;

    padding: 12px 5px 5px;
}

.epaper-info h2 {
    margin: 0 0 5px;

    font-size: 20px;
}

.epaper-date {
    color: #777;

    font-size: 13px;

    margin-bottom: 12px;
}


/* BUTTON */

.epaper-button {
    display: inline-block;

    background: #d71920;

    color: #fff;

    padding: 9px 18px;

    font-size: 14px;

    font-weight: bold;

    border-radius: 3px;
}

.epaper-button:hover {
    background: #a90000;

    color: #fff;
}


/* =====================================================
   MP + CHHATTISGARH NEWS
===================================================== */

.mp-cg-wrapper {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    width: 100%;

    margin: 30px 0;

    box-sizing: border-box;
}


/* COLUMNS */

.mp-news-column,
.chhattisgarh-column {
    width: 100%;

    min-width: 0;

    box-sizing: border-box;
}


/* HEADINGS */

.mp-news-heading,
.cg-news-heading {
    height: 35px;

    border-bottom: 2px solid #e21b23;

    margin: 0 0 10px;

    box-sizing: border-box;
}

.mp-news-heading span,
.cg-news-heading span {
    display: inline-block;

    background: #e21b23;

    color: #fff;

    padding: 8px 14px;

    font-size: 16px;

    line-height: 19px;

    font-weight: 700;

    box-sizing: border-box;
}


/* =====================================================
   CITY TABS
===================================================== */

.mp-city-tabs,
.cg-city-tabs {
    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 4px !important;

    margin: 0 0 10px !important;

    padding: 0 !important;

    box-sizing: border-box;
}


/* TAB */

.mp-city-tab,
.cg-city-tab {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 1 1 25% !important;

    width: 25% !important;

    min-width: 0 !important;

    height: 40px !important;

    margin: 0 !important;

    padding: 8px 5px !important;

    border: 1px solid #ddd !important;

    border-radius: 0 !important;

    background: #f5f5f5 !important;

    color: #222 !important;

    font-family: inherit !important;

    font-size: 13px !important;

    line-height: 20px !important;

    font-weight: 700 !important;

    text-align: center !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    appearance: none !important;

    -webkit-appearance: none !important;
}


/* ACTIVE */

.mp-city-tab.active,
.cg-city-tab.active,
.cg-city-tab.cg-active {
    background: #e21b23 !important;

    background-color: #e21b23 !important;

    color: #fff !important;

    border-color: #e21b23 !important;
}


/* HOVER */

.mp-city-tab:hover,
.cg-city-tab:hover {
    background: #e21b23 !important;

    background-color: #e21b23 !important;

    color: #fff !important;

    border-color: #e21b23 !important;
}


/* =====================================================
   NEWS LIST
===================================================== */

.mp-news-list,
.cg-news-list {
    width: 100%;

    border: 1px solid #ddd;

    background: #fff;

    box-sizing: border-box;
}


/* CITY NEWS */

.mp-city-news,
.cg-city-news {
    width: 100%;

    box-sizing: border-box;
}


/* NEWS ITEM */

.compact-news-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    width: 100%;

    padding: 10px;

    border-bottom: 1px solid #eee;

    box-sizing: border-box;
}

.compact-news-item:last-child {
    border-bottom: none;
}


/* THUMBNAIL */

.compact-news-thumb {
    display: block;

    width: 60px;

    min-width: 60px;

    height: 45px;

    overflow: hidden;

    background: #eee;

    box-sizing: border-box;
}

.compact-news-thumb img {
    display: block;

    width: 60px;

    height: 45px;

    object-fit: cover;
}

.no-thumbnail {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    height: 45px;

    background: #ddd;

    color: #666;

    font-size: 9px;

    box-sizing: border-box;
}


/* CONTENT */

.compact-news-content {
    flex: 1;

    min-width: 0;
}

.compact-news-content h3 {
    margin: 0 0 3px;

    padding: 0;

    font-size: 13px;

    line-height: 17px;

    font-weight: 700;
}

.compact-news-content h3 a {
    color: #222;

    text-decoration: none;
}

.compact-news-content h3 a:hover {
    color: #e21b23;
}


/* EXCERPT */

.compact-excerpt {
    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    margin-bottom: 4px;

    color: #666;

    font-size: 11px;

    line-height: 15px;
}


/* DATE + READ MORE */

.compact-news-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    gap: 5px;
}

.compact-date {
    color: #999;

    font-size: 10px;
}

.compact-read-more {
    color: #e21b23;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}

.compact-read-more:hover {
    text-decoration: underline;
}


/* NO NEWS */

.no-city-news {
    padding: 15px;

    color: #777;

    font-size: 13px;
}



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

@media (min-width: 769px) {

    .main-navigation ul {
        position: relative;
    }

    .main-navigation ul li {
        position: relative;
    }

    .main-navigation ul li > ul.sub-menu {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;

        min-width: 210px;

        width: max-content;

        margin: 0;
        padding: 0;

        background: #d71920;

        z-index: 99999;
    }

    .main-navigation ul li:hover > ul.sub-menu {
        display: block;
    }

    .main-navigation ul li > ul.sub-menu > li {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0;
    }

    .main-navigation ul li > ul.sub-menu > li > a {
        display: block;

        width: 100%;

        padding: 11px 15px;

        color: #fff;

        background: #d71920;

        white-space: nowrap;
    }

    .main-navigation ul li > ul.sub-menu > li > a:hover {
        background: #a90000;
    }

}


/* =====================================================
   MENU TOGGLE
===================================================== */

.menu-toggle {
    display: none;
}


/* =====================================================
   TABLET
   769px - 1000px
===================================================== */

@media (max-width: 1000px) {

    /* MAIN */

    .main-layout {
        grid-template-columns: 1.5fr 1fr;

        gap: 15px;
    }


    /* FEATURED */

    .featured-grid {
        gap: 10px;
    }

    .featured-post h3 {
        font-size: 14px;
    }


    /* EPAPER HOMEPAGE */

    .magazine-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .magazine-card .magazine-image {
        height: 200px !important;
    }


    /* MP + CG */

    .mp-cg-wrapper {
        grid-template-columns: 1fr;

        gap: 25px;
    }

}

@media (max-width: 768px) {

    body {
        width: 100%;

        overflow-x: hidden;
    }


    /* GLOBAL */

    .container {
        width: 100%;

        max-width: 94%;

        margin: 0 auto;
    }


    /* TOP AD */

    .top-ad {
        padding: 8px 0;
    }

    .top-ad .container {
        width: 100%;

        max-width: 100%;

        height: 70px;

        margin: 0 auto;

        font-size: 11px;
    }


    /* BREAKING */

    .breaking-news {
        margin-top: 8px;
    }

    .breaking-news .container {
        width: 100%;

        max-width: 100%;
    }

    .breaking-label {
        padding: 8px 10px;

        font-size: 12px;
    }

    .breaking-text a {
        font-size: 13px;
    }

    .breaking-separator {
        margin: 0 12px;
    }


    /* =================================================
       HOMEPAGE EPAPER
       MOBILE HORIZONTAL SCROLL
    ================================================= */

    .magazine-section {
        margin: 5px 0 10px;
    }

    .magazine-container {
        display: flex !important;

        flex-wrap: nowrap !important;

        grid-template-columns: none !important;

        gap: 10px !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        justify-content: flex-start !important;

        padding: 0 0 8px !important;

        -webkit-overflow-scrolling: touch;
    }

    .magazine-card {
        flex: 0 0 250px !important;

        width: 250px !important;

        min-width: 250px !important;

        margin: 0 !important;
    }

    .magazine-card .magazine-image {
        width: 250px !important;

        height: 200px !important;
    }

    .magazine-title {
        width: 250px;

        min-height: 40px;

        font-size: 14px;
    }


    /* LATEST BAR */

    .latest-bar {
        margin: 12px 0;

        padding: 10px 12px;

        border-left-width: 4px;
    }

    .latest-title {
        font-size: 18px;
    }


    /* MAIN LAYOUT */

    .main-layout {
        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;
    }


    /* FEATURED */

    .featured-box {
        width: 100%;
    }

    .featured-box > h2 {
        margin-bottom: 12px;

        padding-bottom: 7px;

        font-size: 20px;

        border-bottom-width: 3px;
    }

    .featured-grid {
        display: grid;

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

        gap: 10px;
    }

    .featured-post {
        width: 100%;

        min-width: 0;
    }

    .featured-image {
        width: 100%;

        aspect-ratio: 1 / 1;
    }

    .featured-post h3 {
        margin: 6px 0 4px;

        font-size: 13px;

        line-height: 1.4;
    }

    .featured-post .post-meta {
        font-size: 11px;
    }

    .featured-category {
        padding: 4px 6px;

        font-size: 9px;
    }


    /* NEWS SLIDER */

    .news-slider {
        padding: 0 35px;
    }

    .news-slide {
        flex: 0 0 20%;

        width: 20%;

        padding: 0 4px;
    }

    .news-slide h2 {
        font-size: 12px;
    }

    .news-slide-category {
        font-size: 8px;

        padding: 3px 5px;
    }

    .slider-btn {
        width: 30px;

        height: 30px;

        font-size: 14px;
    }


    /* E-PAPER PAGE */

    .epaper-page {
        padding: 15px 0 30px;
    }

    .epaper-heading {
        padding: 12px 14px;

        margin-bottom: 15px;
    }

    .epaper-heading h1 {
        font-size: 24px;
    }

    .epaper-heading p {
        font-size: 13px;
    }

    .epaper-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .epaper-card {
        width: 100%;

        padding: 10px;
    }

    .epaper-cover {
        width: 100%;

        aspect-ratio: 3 / 4;
    }

    .epaper-info {
        padding: 10px 5px 5px;
    }

    .epaper-info h2 {
        font-size: 18px;
    }

    .epaper-date {
        font-size: 12px;

        margin-bottom: 10px;
    }

    .epaper-button {
        padding: 8px 16px;

        font-size: 13px;
    }


    /* MP + CG */

    .mp-cg-wrapper {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 20px;

        margin-bottom: 20px;
    }

    .mp-news-heading,
    .cg-news-heading {
        height: 33px;

        margin-bottom: 8px;
    }

    .mp-news-heading span,
    .cg-news-heading span {
        padding: 7px 12px;

        font-size: 14px;

        line-height: 18px;
    }

    .mp-city-tabs,
    .cg-city-tabs {
        gap: 3px !important;

        margin-bottom: 8px !important;
    }

    .mp-city-tab,
    .cg-city-tab {
        height: 36px !important;

        min-height: 36px !important;

        padding: 7px 2px !important;

        font-size: 11px !important;

        line-height: 18px !important;
    }

    .compact-news-item {
        gap: 8px;

        padding: 8px;
    }

    .compact-news-thumb {
        width: 55px;

        min-width: 55px;

        height: 42px;
    }

    .compact-news-thumb img {
        width: 55px;

        height: 42px;
    }

    .no-thumbnail {
        width: 55px;

        height: 42px;
    }

    .compact-news-content h3 {
        font-size: 12px;

        line-height: 16px;
    }

    .compact-excerpt {
        font-size: 10px;

        line-height: 14px;
    }

    .compact-date,
    .compact-read-more {
        font-size: 9px;
    }


    /* FOOTER */

    .site-footer {
        margin-top: 20px;

        padding: 25px 10px;

        font-size: 13px;
    }

}


/* =====================================================
   SMALL MOBILE - CONTENT
===================================================== */

@media (max-width: 480px) {

    .post-card h2 {
        font-size: 19px;
    }

    .post-excerpt {
        font-size: 13px;
    }

    .featured-grid {
        gap: 8px;
    }
    

    .featured-post h3 {
        font-size: 12px;
    }

    .featured-category {
        font-size: 8px;
        padding: 3px 5px;
    }

    .news-slider {
        padding: 0 30px;
    }

    .news-slide {
        flex: 0 0 20%;
        width: 20%;
        padding: 0 2px;
    }

    .news-slide h2 {
        font-size: 10px;
        line-height: 1.3;
    }

    .news-slide-category {
        font-size: 7px;
        padding: 2px 3px;
    }

    .news-slide .post-meta {
        font-size: 8px;
    }

    .slider-btn {
        width: 27px;
        height: 27px;
        font-size: 12px;
    }
}


/* =========================================
   DESH + VIDESH NEWS
========================================= */

.desh-videsh-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
}


/* DESH */

.desh-news-column,
.videsh-news-column {
    width: 100%;
}


/* HEADINGS */

.desh-news-heading,
.videsh-news-heading {
    border-bottom: 2px solid #ed1c24;
    margin-bottom: 10px;
}

.desh-news-heading span,
.videsh-news-heading span {
    display: inline-block;
    background: #ed1c24;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 9px 14px;
}


/* NEWS LIST */

.desh-news-list,
.videsh-news-list {
    width: 100%;
}


/* MOBILE */

@media (max-width: 768px) {

    .desh-videsh-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* =========================================
   KHEL NEWS SLIDER
========================================= */

.khel-slider-box {
    position: relative;
    width: 100%;
    border: 3px solid #ed1c24;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================
   SLIDER TRACK
========================================= */

.khel-slides {
    display: flex !important;
    width: 400% !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.7s ease-in-out !important;
    will-change: transform;
}


/* =========================================
   EACH SLIDE
========================================= */

.khel-slide {
    display: block !important;
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}


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

.khel-slide-image {
    display: block;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: #eee;
}


.khel-slider-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center;
}


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

.khel-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #777;
    font-size: 25px;
    font-weight: 700;
}


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

.khel-slide-content {
    padding: 12px 15px 15px;
    background: #fff;
}


.khel-slide-content h2 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.4;
}


.khel-slide-content h2 a {
    color: #222;
    text-decoration: none;
}


.khel-slide-date {
    font-size: 13px;
    color: #777;
}


/* =========================================
   ARROWS
========================================= */

.khel-slider-prev,
.khel-slider-next {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 25px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    z-index: 50;
}


.khel-slider-prev {
    left: 12px;
}


.khel-slider-next {
    right: 12px;
}


.khel-slider-prev:hover,
.khel-slider-next:hover {
    background: #ed1c24;
}


/* =========================================
   DOTS
========================================= */

.khel-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 75px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 50;
}


.khel-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}


.khel-dot.active {
    background: #ed1c24;
    border-color: #ed1c24;
}


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

@media (max-width: 768px) {

    .khel-slide-image {
        height: 280px;
    }

    .khel-slide-content h2 {
        font-size: 18px;
    }

}


@media (max-width: 480px) {

    .khel-slide-image {
        height: 220px;
    }

    .khel-slide-content h2 {
        font-size: 16px;
    }

    .khel-slider-prev,
    .khel-slider-next {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 20px;
    }

}


/* =====================================================
   POLITICAL NEWS + AUTO MOBILE NEWS
   DESKTOP: 2 COLUMNS | MOBILE: 1 COLUMN
===================================================== */

.desh-videsh-wrapper,
.political-auto-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin: 25px 0;
    padding: 0;
    box-sizing: border-box;
}

.desh-videsh-wrapper > section,
.political-auto-wrapper > section {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.desh-videsh-wrapper .desh-videsh-heading,
.political-auto-wrapper .desh-videsh-heading {
    margin: 0 0 10px;
    border-bottom: 2px solid #ed1c24;
    padding-bottom: 8px;
}

.desh-videsh-wrapper .desh-videsh-item,
.political-auto-wrapper .desh-videsh-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.desh-videsh-wrapper .desh-videsh-item:last-child,
.political-auto-wrapper .desh-videsh-item:last-child {
    border-bottom: 0;
}

.desh-videsh-wrapper .desh-videsh-item img,
.political-auto-wrapper .desh-videsh-item img {
    width: 80px;
    height: 60px;
    min-width: 80px;
    object-fit: cover;
}

.desh-videsh-wrapper .desh-videsh-item > div,
.political-auto-wrapper .desh-videsh-item > div {
    flex: 1;
    min-width: 0;
}

.desh-videsh-wrapper .desh-videsh-item h3,
.political-auto-wrapper .desh-videsh-item h3 {
    margin: 0 0 5px;
    font-size: 16px;
    line-height: 1.35;
}

.desh-videsh-wrapper .desh-videsh-item h3 a,
.political-auto-wrapper .desh-videsh-item h3 a {
    color: #222;
}

.desh-videsh-wrapper .desh-videsh-item h3 a:hover,
.political-auto-wrapper .desh-videsh-item h3 a:hover {
    color: #ed1c24;
}

.desh-videsh-wrapper .desh-videsh-item small,
.political-auto-wrapper .desh-videsh-item small {
    color: #777;
    font-size: 11px;
}

@media (max-width: 768px) {
    .desh-videsh-wrapper,
    .political-auto-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}


/* =========================================================
   LOKMAYA NEWS - COMPLETE HEADER CSS
========================================================= */


/* =========================================================
   TOP ADVERTISEMENT
========================================================= */

.top-ad {
    width: 100%;
    min-height: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f5f5;

    color: #777;

    font-size: 12px;

    text-align: center;

    border-bottom: 1px solid #e5e5e5;

    box-sizing: border-box;
}

.top-ad .container {
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   SOCIAL ROW
========================================================= */

.social-row {
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    box-sizing: border-box;
}

.social-icons {
    display: flex;

    align-items: center;

    gap: 7px;
}

.social-icons a {
    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    background: #d71920;

    color: #fff;

    border-radius: 50%;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;
}

.social-icons a:hover {
    background: #a90000;
}


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

.site-header {
    width: 100%;

    margin: 0;

    padding: 0;

    background: #fff;

    position: relative;

    z-index: 9999;
}


/* =========================================================
   LOGO + DATE AREA
========================================================= */

.site-header .header-main {
    width: 100%;

    min-height: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;

    padding-top: 4px;
    padding-bottom: 4px;
}


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

.site-header .site-logo {
    display: flex;

    align-items: center;

    height: 54px;

    max-width: 70%;

    overflow: hidden;
}

.site-header .site-logo a {
    display: flex;

    align-items: center;

    text-decoration: none;

    color: inherit;
}

.site-header .site-logo img {
    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 52px;

    object-fit: contain;
}


/* =========================================================
   DATE + TIME
========================================================= */

.site-header .header-date {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    text-align: right;

    font-size: 12px;

    line-height: 18px;

    color: #555;

    white-space: nowrap;
}

.site-header .header-date strong {
    font-size: 13px;

    line-height: 18px;

    color: #111;
}


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

.site-header .main-navigation {
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    background: #d71920;
    position: relative;
    z-index: 99999;
    box-sizing: border-box;
}


/* =========================================================
   NAVIGATION INNER
   MENU BUTTON LEFT + MAIN MENU CENTER
========================================================= */

.site-header .navigation-inner {
    position: relative;

    width: 100%;
    height: 40px;
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
    overflow: visible;
}


/* =========================================================
   OLD MOBILE MENU HIDE
========================================================= */

.site-header .menu-toggle {
    display: none !important;
}


/* =========================================================
   CUSTOM MENU WRAPPER
   LEFT SIDE FIXED
========================================================= */

.site-header .lm-menu-wrapper {
    position: absolute;

    left: 0;
    top: 0;

    width: auto;
    height: 40px;

    margin: 0;
    padding: 0;

    z-index: 100000;
}


/* =========================================================
   CUSTOM MENU BUTTON
========================================================= */

.site-header .lm-menu-button {
    width: auto;
    min-width: 82px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin: 0;
    padding: 0 14px;

    border: 0;
    border-radius: 0;
    outline: none;

    background: #d71920;
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    line-height: 40px;

    cursor: pointer;

    box-sizing: border-box;
}


.site-header .lm-menu-button:hover {
    background: #b50000;
    color: #fff;
}


.site-header .lm-menu-button:focus {
    outline: none;
}


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

.site-header .lm-dropdown-menu {
    display: none;

    position: absolute;

    top: 40px;
    left: 0;

    width: 210px;
    min-width: 210px;

    margin: 0;
    padding: 0;

    background: #fff;

    border: 1px solid #ddd;

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

    z-index: 999999;

    box-sizing: border-box;
}


/* =========================================================
   OPEN
========================================================= */

.site-header .lm-dropdown-menu.show {
    display: block;
}


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

.site-header .lm-dropdown-menu a {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 10px 14px;

    background: #fff;
    color: #222;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    line-height: 20px;

    border-bottom: 1px solid #eee;

    box-sizing: border-box;
}


.site-header .lm-dropdown-menu a:last-child {
    border-bottom: 0;
}


.site-header .lm-dropdown-menu a:hover {
    background: #d71920;
    color: #fff;
}


/* =========================================================
   WORDPRESS PRIMARY MENU
   CENTER ALIGNMENT
========================================================= */

.site-header #primary-menu {
    display: flex !important;

    align-items: center;
    justify-content: center;

    /*
     * IMPORTANT:
     * Menu ko left button ke baad nahi,
     * poore navigation bar ke center mein rakhta hai.
     */
    flex: 0 0 100% !important;

    width: 100% !important;

    height: 40px;
    min-height: 40px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;

    box-sizing: border-box;

    overflow: visible;
}


/* =========================================================
   PRIMARY MENU - LEVEL 1
========================================================= */

.site-header #primary-menu {
    display: flex !important;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto !important;

    width: auto !important;

    height: 40px;
    min-height: 40px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;

    box-sizing: border-box;

    overflow: visible;
}

/* =========================================================
   PRIMARY MENU LINKS
========================================================= */

.site-header #primary-menu > li > a {
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;

    padding: 0 13px;

    color: #fff;
    background: transparent;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    line-height: 40px;

    white-space: nowrap;

    box-sizing: border-box;
}


.site-header #primary-menu > li > a:hover {
    background: #b50000;
    color: #fff;
}


/* =========================================================
   WORDPRESS SUBMENU
========================================================= */

.site-header #primary-menu ul.sub-menu {
    display: none;

    position: absolute;

    top: 40px;
    left: 0;

    width: 210px;
    min-width: 210px;

    margin: 0;
    padding: 0;

    background: #fff;

    border: 1px solid #ddd;

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

    z-index: 999999;

    list-style: none;

    box-sizing: border-box;
}


/* =========================================================
   SHOW SUBMENU
========================================================= */

.site-header #primary-menu li:hover > ul.sub-menu {
    display: block;
}


/* =========================================================
   SUBMENU ITEM
========================================================= */

.site-header #primary-menu ul.sub-menu li {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   SUBMENU LINK
========================================================= */

.site-header #primary-menu ul.sub-menu li a {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    padding: 9px 13px;

    background: #fff;
    color: #222;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    line-height: 20px;

    border-bottom: 1px solid #eee;

    box-sizing: border-box;
}


.site-header #primary-menu ul.sub-menu li:last-child > a {
    border-bottom: 0;
}


.site-header #primary-menu ul.sub-menu li a:hover {
    background: #d71920;
    color: #fff;
}


/* =========================================================
   SUBMENU - SECOND LEVEL
========================================================= */

.site-header #primary-menu ul.sub-menu ul.sub-menu {
    top: -1px;
    left: 100%;
}


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

@media (max-width: 768px) {

    /* HEADER */

    .site-header .header-main {
        min-height: 56px;
        height: 56px;

        padding-top: 4px;
        padding-bottom: 4px;
    }


    /* LOGO */

    .site-header .site-logo {
        height: 48px;
        max-width: 65%;
    }


    .site-header .site-logo img {
        max-height: 46px;
    }


    /* DATE */

    .site-header .header-date {
        font-size: 10px;
        line-height: 15px;
    }


    .site-header .header-date strong {
        font-size: 11px;
        line-height: 15px;
    }


    /* NAVIGATION */

    .site-header .main-navigation {
        height: 40px;
        min-height: 40px;
    }


    .site-header .navigation-inner {
        height: 40px;
        min-height: 40px;

        justify-content: center;
    }


    /* MENU BUTTON */

    .site-header .lm-menu-wrapper {
        position: absolute;

        left: 0;
        top: 0;

        height: 40px;
    }


    .site-header .lm-menu-button {
        height: 40px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 13px;

        line-height: 40px;
    }


    /* MOBILE DROPDOWN */

    .site-header .lm-dropdown-menu {
        top: 40px;

        width: 200px;
        min-width: 200px;
    }


    /* HIDE WORDPRESS MENU ON MOBILE */

    .site-header #primary-menu {
        display: none !important;
    }


    /* HIDE OLD SUBMENU */

    .site-header #primary-menu ul.sub-menu {
        display: none !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .site-header .header-main {
        height: 52px;
        min-height: 52px;
    }


    .site-header .site-logo {
        height: 44px;
        max-width: 62%;
    }


    .site-header .site-logo img {
        max-height: 42px;
    }


    .site-header .header-date {
        font-size: 9px;
        line-height: 13px;
    }


    .site-header .header-date strong {
        font-size: 10px;
        line-height: 13px;
    }


    .site-header .main-navigation {
        height: 38px;
        min-height: 38px;
    }


    .site-header .navigation-inner {
        height: 38px;
        min-height: 38px;
    }


    .site-header .lm-menu-wrapper {
        height: 38px;

        left: 0;
        top: 0;
    }


    .site-header .lm-menu-button {
        height: 38px;

        min-width: 74px;

        padding: 0 10px;

        font-size: 12px;

        line-height: 38px;
    }


    .site-header .lm-dropdown-menu {
        top: 38px;

        width: 190px;
        min-width: 190px;
    }

}
/* =========================================================
   SINGLE NEWS - SHARE BUTTONS
========================================================= */

.lm-share-buttons {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;

    margin: 0 0 18px 0;
    padding: 0;
}

.lm-share-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-right: 4px;
}

.lm-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 36px;
    padding: 0 14px;

    border-radius: 4px;

    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition: opacity 0.2s ease;
}

.lm-share:hover {
    opacity: 0.85;
    color: #ffffff !important;
}


/* WHATSAPP */
.lm-share.whatsapp {
    background: #25D366;
}


/* FACEBOOK */
.lm-share.facebook {
    background: #1877F2;
}


/* X */
.lm-share.x {
    background: #000000;
}


/* INSTAGRAM */
.lm-share.instagram {
    background: #E1306C;
}


/* MOBILE */
@media (max-width: 600px) {

    .lm-share-buttons {
        gap: 5px;
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .lm-share {
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
    }

    .lm-share-title {
        font-size: 14px;
        flex-shrink: 0;
    }

}
<!-- FOOTER -->

<footer
    class="site-footer"
    style="
        background:#d90000;
        color:#ffffff;
        padding:25px 0;
    "
>

    <div class="container">

        <div
            style="
                display:flex;
                align-items:center;
                justify-content:space-between;
                width:100%;
                gap:20px;
            "
        >

            <!-- COPYRIGHT -->
            <div
                style="
                    color:#ffffff;
                    white-space:nowrap;
                "
            >
                &copy;
                <?php echo date('Y'); ?>
                <?php bloginfo('name'); ?>।
                सर्वाधिकार सुरक्षित।
            </div>


            <!-- MENU -->
            <div
                style="
                    white-space:nowrap;
                    text-align:center;
                "
            >

                <a
                    href="<?php echo esc_url(home_url('/')); ?>"
                    style="color:#ffffff;"
                >
                    होम
                </a>

                &nbsp; | &nbsp;

                <a
                    href="<?php echo esc_url(home_url('/news-epaper/')); ?>"
                    style="color:#ffffff;"
                >
                    ई-पेपर
                </a>

                &nbsp; | &nbsp;

                <a
                    href="<?php echo esc_url(home_url('/contact/')); ?>"
                    style="color:#ffffff;"
                >
                    संपर्क करें
                </a>

                &nbsp; | &nbsp;

                <a
                    href="<?php echo esc_url(home_url('/about/')); ?>"
                    style="color:#ffffff;"
                >
                    हमारे बारे में
                </a>

            </div>


            <!-- DESIGNER -->
            <div
                style="
                    color:#ffffff;
                    white-space:nowrap;
                    text-align:right;
                    margin-left:auto;
                "
            >
                Designed by
                <strong>@Gyansheelinfotec</strong>
            </div>

        </div>

    </div>
    /* =========================================================
   FOOTER MOBILE FIX
========================================================= */

@media (max-width: 768px) {

    .site-footer {
        padding: 20px 10px !important;
        overflow: hidden;
    }

    .site-footer .container > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .site-footer .container > div > div {
        white-space: normal !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
        line-height: 1.6;
    }

    .site-footer a {
        color: #ffffff !important;
        text-decoration: none;
    }

    .site-footer strong {
        white-space: normal !important;
    }
}


/* छोटे मोबाइल */
@media (max-width: 480px) {

    .site-footer {
        padding: 18px 8px !important;
    }

    .site-footer .container > div {
        gap: 10px !important;
    }

    .site-footer .container > div > div {
        font-size: 14px;
        line-height: 1.7;
    }
}
/* =========================================================
   FOOTER MOBILE ONLY FIX
   Desktop footer remains unchanged
========================================================= */

@media (max-width: 768px) {

    .site-footer {
        width: 100% !important;
        overflow: hidden !important;
    }

    .site-footer > .container > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
    }

    /* COPYRIGHT */
    .site-footer > .container > div > div:nth-child(1) {
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        flex-shrink: 1 !important;
        font-size: 13px !important;
    }

    /* MENU */
    .site-footer > .container > div > div:nth-child(2) {
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        flex-shrink: 1 !important;
        line-height: 1.8 !important;
    }

    /* DESIGNER */
    .site-footer > .container > div > div:nth-child(3) {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: center !important;
        flex-shrink: 1 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

</footer>


<?php wp_footer(); ?>

</body>

</html>