/* Hide main content until data loads */
#content-div {
    display: none;
}










.scrollable-posts {
    max-height: 400px;
    /* or whatever height you want */
    overflow-y: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollable-posts::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollable-posts {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}






.grid-container {
    columns: 5 200px;
    column-gap: 0.8rem;
    width: 98%;
    margin: 0 auto;
}

.grid-container div {
    width: 150px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    border: solid 1px gray;
    padding: 5px;
    /* box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); */
    border-radius: 5px;
    transition: all 0.25s ease-in-out;
}

.grid-container div:hover img {
    filter: grayscale(0);
}

.grid-container div:hover {
    border-color: coral;
}

.grid-container div img {
    width: 100%;
    filter: grayscale(75%);
    border-radius: 5px;
    transition: all 0.25s ease-in-out;
}

.grid-container div p {
    margin: 5px 0;
    padding: 0;
    text-align: center;
    font-style: italic;
}


.section-title {
    background: #d50000;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 20px;
    margin: 0;
}






.carousel {
    /** Create an anchor for the buttons later on **/
    anchor-name: --carousel;

    /** Set the scroll behaviour & type **/
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    /*
  * Tell the browser where we want to place our marker 
  * https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-marker-group
  */
    scroll-marker-group: after;
}

@media (min-width: 768px) {

    /** 
   * Create the buttons
   * https://developer.mozilla.org/en-US/docs/Web/CSS/::scroll-button
  **/
    .carousel::scroll-button(inline-start),
    .carousel::scroll-button(inline-end) {
        display: block;
        content: "\00AB";
        width: 3rem;
        border: none;
        border-radius: 50%;
        position: fixed;
        position-anchor: --carousel;
        position-area: center left;
        cursor: pointer;
        font-size: 2rem;
        background-color: #21252973;
        color: #fff;
        padding-bottom: 0.5rem;
        transform: translate(50%);
        transition: opacity 0.4s ease-in-out;
        z-index: 5;
    }


    /* .carousel::scroll-button(inline-start),
     .carousel::scroll-button(inline-end):hover {
       
         background-color: rgba(255, 255, 255, 0.37);
         transform: translateY(-50%) scale(1.1);
         color: #fcd9d9;
     } */

    /* Adjusting the right button */
    .carousel::scroll-button(inline-end) {
        content: "\00BB";
        position-area: center right;
        transform: translate(-50%);
    }

    /* Controlling disabled buttons */
    .carousel::scroll-button(inline-start):disabled,
    .carousel::scroll-button(inline-end):disabled {
        opacity: 0.4;
        filter: grayscale(100%);
        cursor: default;
    }
}

/* Set basic style for the scroll maker group */
.carousel::scroll-marker-group {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
    margin-inline: 20%;
}

@media (min-width: 768px) {
    .carousel::scroll-marker-group {
        gap: 0.5rem;
        margin-inline: 0;
    }
}

/** Controlling the items **/

/* Slide for a single card on mobile */
@media (max-width: 767px) {
    .item {
        scroll-snap-align: center;
    }

    .item:first-child {
        scroll-snap-align: start;
    }

    .item:last-child {
        scroll-snap-align: end;
    }
}

/* We want to slide per 3 items on desktop */
@media (min-width: 768px) {
    .item:nth-child(3n + 1) {
        scroll-snap-align: start;
    }
}

/* Styling for the scrollmarker */
.item::scroll-marker {
    content: "";
    border-top: 0.25rem solid rgb(from var(--brand) r g b / 0.2);
    transition: border-color 0.4s ease-in-out;
    display: none;
}

@media (max-width: 767px) {
    .item::scroll-marker {
        flex: 1 1 auto;
        display: block;
    }
}

/**
 * Each item will get it's own scroll marker
 * let's hide the one's we don't use
**/
@media (min-width: 768px) {
    .item:nth-child(3n + 1)::scroll-marker {
        display: block;
        width: 1rem;
        height: 1rem;
        box-sizing: border-box;
    }
}

/* Set active state on current active scroll marker */
.item::scroll-marker:target-current {
    border-color: var(--brand);
}

/** General styling **/
:root {
    --brand: #11abb0;
    --max-width: 1140px;
}

::selection {
    background-color: hsl(from var(--brand) h s 20%);
}



.carousel {
    display: flex;
    gap: 1rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    margin-inline: auto;
    margin-top: 0rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .carousel {
        border-radius: 8px;
    }

    .carousel:has(.item:hover) .item:not(:hover) {
        filter: grayscale(25%);
    }
}

.carousel::-webkit-scrollbar {
    display: none;
}

.item {
    flex: 0 0 80%;
    aspect-ratio: 3 / 4;
    background-color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 2rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: filter 0.4s 1s ease-in-out;
}

.item::before {
    content: "";
    border: 2px solid #fff;
    border-radius: 50%;
    border-right-color: transparent;
    opacity: 0.4;
    position: absolute;
    inset: auto;
    display: flex;
    place-content: center;
    align-item: center;
    animation: rotate 1s infinite;
    aspect-ratio: 1 / 1;
    transform-origin: center center;
    vertical-align: middle;
    width: 1rem;
}

.item img {
    object-fit: cover;
    position: absolute;
}

@media (min-width: 768px) {
    .item {
        /* flex-basis: calc((44% - 2rem) / 3); */
        flex-basis: calc((620% - -5rem) / 51);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



body {
    background-color: #111;
    color: #eee;
    font-family: Monaco, SF Mono, sans-serif;
    font-size: 1.125rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* h1,
p {
    max-width: var(--max-width);
    margin-inline: auto;
} */

/* p {
     opacity: 0.7;
     line-height: 150%;
 } */

em {
    display: block;
}

a {
    color: var(--brand);
    text-underline-offset: 5px;
}








.note {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    max-width: var(--max-width);
    margin-top: 5rem;
}

.warning {
    --color: red;
    --icon: "\00D7";
    font-size: 0.75em;
}

.warning .title {
    display: block;
    margin-bottom: 8px;
    opacity: 0.7;
}

.warning a {
    text-decoration: none;
}

.warning code {
    background-color: hsl(from var(--color) h s 20%);
    color: hsl(from var(--color) h s 80%);
    padding: 4px 6px;
    border-radius: 4px;
}

.warning code::before {
    content: var(--icon);
    margin-inline: 4px;
    font-weight: 700;
}

@supports (scroll-marker-group: after) {
    .smg {
        --color: #00ff00;
        --icon: "\2713";
    }
}

@supports selector(::scroll-button(inline-start)) {
    .sb {
        --color: #00ff00;
        --icon: "\2713";
    }
}

.youtube-thumb {
    position: relative;
    width: 300px;
    height: 180px;
    cursor: pointer;
    overflow: hidden;
}

.youtube-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
}

.play-button::before {
    content: "▶";
    color: #fff;
    font-size: 28px;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-40%, -50%);
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    margin: 5% auto;
    width: 80%;
    max-width: 800px;
    background: #000;
    padding: 0;
}

.modal-content iframe {
    width: 100%;
    height: 450px;
    border: none;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}































.video-slider {
    position: relative;
    max-width: 100%;
    margin: 4px auto;
    overflow: hidden;
    background: #cc000000;
    padding: 13px;
    border-radius: 6px;
}

.video-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    /* smoother easing */
    will-change: transform;
    /* hint to browser for smoother GPU animation */
}

.video-card {
    min-width: 300px;
    margin: 0 8px;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.video-card iframe,
.video-card img {
    width: 100%;
    height: 170px;
    display: block;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 22px;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}

.nav-btn.left {
    left: 5px;
}

.nav-btn.right {
    right: 5px;
}






/* width: 127px;
    height: 93px;
    object-fit: cover;
    border-radius: 7px; */




.btn-gradient {
    background: linear-gradient(135deg, #791f1f, #ff0000);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 1px 15px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #ff0000, #791f1f);
    /* reversed */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(106, 4, 0, 0.4);
}

.btn-gradient:active {
    transform: scale(0.97);
}








.news-item {
    display: flex;
    align-items: flex-start;
    /* image + text align at top */
}

.image-thumb {
    width: 167px;
    /* fixed width */
    height: 91px;
    /* fixed height */
    object-fit: cover;
    /* crop without stretching */
    border-radius: 5px;
    /* rounded corners */
    flex-shrink: 0;
    /* don’t shrink */
    margin-right: 12px;
    /* space between image & text */
}

/* .news-item .fw-semibold {
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;


    font-size: 16px;
    font-weight: 600;
    color: #222;
    line-height: 1.4em;
} */

.news-item small {
    font-size: 13px;
}


/* Default */
.category-posts {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

/* Mobile */
@media (max-width: 576px) {
    .category-posts {
        max-height: 400px;
    }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 992px) {
    .category-posts {
        max-height: 00px;
    }
}

/* Desktop */
@media (min-width: 1600px) {
    .category-posts {
        max-height: 680px;
    }
}

/* ✅ Custom rule for 766px–1000px */
@media (min-width: 766px) and (max-width: 1330px) {
    .category-posts {
        max-height: 361px !important;
    }
}

@media (min-width: 1332px) and (max-width: 1608px) {
    .category-posts {
        max-height: 400px !important;
    }
}


/* Optional: style scrollbar for better look */
.category-posts::-webkit-scrollbar {
    width: 6px;
}

.category-posts::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 3px;
}

.category-posts::-webkit-scrollbar-thumb:hover {
    background: #666;
}






.category-posts {
    max-height: 400px;
    /* adjust height as you like */
    overflow-y: scroll;
    /* enable vertical scroll */
    overflow-x: hidden;
    /* prevent horizontal scroll */
}

/* Hide scrollbar for Chrome, Safari, Opera */
.category-posts::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox, Edge, IE */
.category-posts {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}






/* Remove fixed height */
.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Keep a responsive aspect ratio (16:9 here, you can adjust) */
.slider::before {
    content: "";
    display: block;
    padding-top: 56.25%;
    /* 16:9 ratio = 9/16*100 */
}





.slider-container {
    width: 100%;
    max-width: 90vw;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 7px 31px rgba(0, 0, 0, 0.3);
    z-index: 5;
    background: rgb(10 10 10 / 22%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: appear 1s ease-out;
}


/* .slider-container {
     width: 100%;
     max-width: 90vw;
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
     z-index: 5;
     background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: 15px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     animation: appear 1s ease-out;
 } */

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* .slider {
     position: relative;
     height: 450px;
     overflow: hidden;
 } */

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s ease;
    overflow: hidden;
    pointer-events: none;
}

.slide.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transition: transform 8s ease-in-out; */
}

/* .slide.active img {
     transform: scale(1.1);
 } */

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(#00000000, rgb(0 0 0));
    color: white;
    transform: translateY(100%);
    transition: transform 0.7s ease, opacity 0.5s ease;
    opacity: 0;
}





/* .slide-content {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 20px;
     background: linear-gradient(#00000094, rgb(0 0 0 / 84%));     ;
     color: white;
     transform: translateY(100%);
     transition: transform 0.7s ease, opacity 0.5s ease;
     opacity: 0;
 } */

.slide.active .slide-content {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.3s;
}

.slide:hover .slide-content {
    transform: translateY(0);
    opacity: 1;
}

/* Slide title and description parallax effects */
.slide-title {
    /* transform: translateX(-50px); */
    opacity: 0;
    color: #ffffffef!important;
    /* transition: transform 1s ease, opacity 1s ease; */
    transition-delay: 0.2s;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

/* .slide-description {
     transform: translateX(50px);
     opacity: 0;
     transition: transform 1s ease, opacity 1s ease;
     transition-delay: 0.4s;
     font-size: 1rem;
     opacity: 0.9;
 } */

.slide.active .slide-content .slide-title,
.slide.active .slide-description {
    transform: translateX(0);
    opacity: 1;
}


/* Navigation arrows */
.navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    color: #333;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 30;
}

.nav-btn.prev {
    left: 20px;
    background-color: rgba(255, 255, 255, 0.103);
    color: #eee;

}

.nav-btn.next {
    right: 20px;
    background-color: rgba(255, 255, 255, 0.103);
    color: #eee;


}

.nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.37);
    transform: translateY(-50%) scale(1.1);
    color: #fcd9d9;

}

/* Dots indicators */
.dots-container {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 4px;
    width: 100%;
    z-index: 10;
}

.dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: white;
    transform: scale(1.2);
}

/* Animation keyframes for transitions */
/* @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 } */

/* @keyframes slideInRight {
     from {
         transform: translateX(50px);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 @keyframes slideInLeft {
     from {
         transform: translateX(-50px);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 } */

/* @keyframes zoomIn {
     from {
         transform: scale(1.2);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 } */

/* @keyframes slideInUp {
     from {
         transform: translateY(50px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 } */

/* Transition effect classes */
/* .transition-fade .slide-content {
     animation: fadeIn 1s forwards;
 }

 .transition-slideRight .slide-content {
     animation: slideInRight 1s forwards;
 }

 .transition-slideLeft .slide-content {
     animation: slideInLeft 1s forwards;
 }

 .transition-zoom .slide-content {
     animation: zoomIn 1s forwards;
 }

 .transition-slideUp .slide-content {
     animation: slideInUp 1s forwards;
 } */

















/* 🔹 First big post image */
.mn-img {
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* 🔹 Smaller post images */
/* .side-img {
      height: 180px;
      width: 100%;
      object-fit: cover;
    } */
.side-img-box {
    width: 100%;
    height: 200px;
    /* ✅ Fixed height (adjust as you like: 180px, 220px, etc.) */
    overflow: hidden;
    /* hides overflow */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    /* optional gray bg */
}

.side-img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    /* ✅ crop nicely, keeps aspect ratio */
}

/* 🔹 Uniform text preview */
.card-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Show max 3 lines */
    -webkit-box-orient: vertical;
}

/* 🔹 Card hover effect */
.card:hover {
    transform: translateY(-3px);
    transition: all 0.2s ease-in-out;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
}



/* smruti */




/* Main content scrollable */
.content-scroll {
    max-height: 110vh;
    /* Adjust height as needed */
    overflow-y: auto;
    /* Enable vertical scroll */
    padding-right: 10px;
    /* Hide scrollbar but keep scroll working */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}


.content-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

/* Sidebar fixed (sticky) */
.sticky-sidebar {
    position: sticky;
    top: 80px;
    /* distance from top (header space) */
}













/* .ticker {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

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

.ticker-content p {
    display: inline-block;
    padding-left: 100%;
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    animation: ticker-scroll 20s linear infinite;
}

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

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




.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
        /* start off-screen */
    }

    100% {
        transform: translateX(-100%);
        /* move fully left */
    }
}






@media (min-width: 768px) and (max-width: 1200px) {


    .img-s {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .image-thumb {
        width: auto;
        height: 91px;
    }


    .news-item {
        display: grid !important;
        gap: 10px;
    }
}


.error-card {
    border: 1.5px solid #79030efa;
    border-radius: .6rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.error-code {
    font-size: 6rem;
    font-weight: 900;
    color: #79030efa;
    text-shadow: 2px 2px 6px rgba(121, 3, 14, 0.3);
    animation: bounce 1.5s infinite;
}

.error-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #333;
}

.error-text {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
}

.btn-home {
    background: linear-gradient(45deg, #79030efa, #ff416c);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-home:hover {
    background: linear-gradient(45deg, #ff416c, #79030efa);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Animation for 404 code */
@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }
}


/* smruti */
/* Election updates layout */
.election-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.election-list .update-item {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border: none;
    border-bottom: 1px solid #eee;
    gap: 16px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease, transform 300ms ease;
}

.election-list .time-col {
    width: 86px;
    text-align: center;
    color: #d9230f;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

.election-list .time-col .time {
    font-size: 18px;
    color: #d9230f;
    font-weight: 800;
}

.election-list .content-col {
    flex: 1;
    min-width: 0;
}

.election-list .content-col h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    line-height: 1.2;
}

.election-list .meta {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.election-list .desc {
    color: #333;
    font-size: 15px;
    margin-bottom: 10px;
}

/* .election-list .thumb {
  width: 110px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
} */
.election-list .content-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.election-list .big-image {
    margin-top: 12px;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: 4px;
}

/* Smooth enter/exit */
.item-enter {
    opacity: 0;
    transform: translateY(-8px);
}

.item-enter.item-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 400ms, transform 400ms;
}

.item-exit {
    opacity: 1;
    transform: translateY(0);
}

.item-exit.item-exit-active {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms, transform 300ms;
}

/* highlight update */
.update-highlight {
    animation: highlight 2200ms ease;
}

@keyframes highlight {
    0% {
        background-color: #ffffff;
    }

    100% {
        background-color: transparent;
    }
}

/* responsive */
@media (max-width: 767px) {
    .election-list .update-item {
        flex-direction: column;
    }

    .election-list .time-col {
        width: auto;
        text-align: left;
        margin-bottom: 8px;
    }

    .election-list .thumb {
        width: 100%;
        height: 160px;
        margin-right: 0;
    }
}

/* Title styling */
.election-list .content-col h3 a {
    color: #000 !important;
    /* solid black */
    font-weight: 700;
    /* bold */
    text-decoration: none;
}

/* Meta: "Posted by :- ..." */
.election-list .meta {
    color: #000 !important;
    /* solid black */
    font-weight: 700 !important;
    /* bold */
    font-size: 14px;
    margin-bottom: 6px;
}

/* responsive images under description */
.election-list .thumb {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
}

/* BIG image shown under description (responsive) */
.election-list .big-image {
    display: block;
    width: 100%;
    /* fill the content column width */
    height: auto;
    /* preserve aspect ratio */
    max-height: 420px;
    /* limit height */
    object-fit: cover;
    /* crop to fill if needed */
    border-radius: 6px;
    margin-top: 12px;
}

@media (max-width: 767px) {
    .election-list .thumb {
        width: 100%;
        height: 160px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .election-list .big-image {
        max-height: 300px;
    }
}



.sidebar-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: #fff;
    padding: .55rem .75rem;
    border-bottom: 1px solid #eee;
}

.sidebar-logo {
    height: 28px;
    display: inline-block;
}

.sidebar-view-btn {
    font-size: .82rem;
    padding: .25rem .6rem;
    background: #c92a2a;
    color: #fff;
    border-radius: .35rem;
    text-decoration: none;
}

.sidebar-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Each item */
.sidebar-item {
    display: flex;
    gap: .75rem;
    padding: .6rem;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    background: #fff;
}

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

/* thumbnail */
.sidebar-thumb {
    width: 110px;
    /* matches screenshot proportion */
    height: 74px;
    flex: 0 0 110px;
    border-radius: .35rem;
    object-fit: cover;
    display: block;
    background: #f2f2f2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
}

/* text content */
.sidebar-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-title {
    font-size: 0.98rem;
    margin: 0 0 .25rem;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* show up to 3 lines like screenshot */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-date {
    font-size: .80rem;
    color: #888;
    margin-top: auto;
    /* push date to bottom alignment similar to screenshot */
}

/* responsive tweak */
@media (max-width: 575px) {
    .sidebar-thumb {
        width: 86px;
        height: 60px;
        flex: 0 0 86px;
    }

    .sidebar-title {
        -webkit-line-clamp: 2;
    }
}






.sidebar-title:hover {
    color: #000;
}

/* Safe wrapper — doesn't change .list-group or .list-group-item styles */
.election-scroll-wrapper {
    max-height: 620px;
    /* adjust height as needed */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    /* avoid scrollbar overlapping content */
    scroll-behavior: smooth;
}

/* optional: scrollbar styling for the wrapper */
.election-scroll-wrapper::-webkit-scrollbar {
    width: 8px;
}

.election-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 4px;
}

/* small safety: if any custom li classes were used, let them coexist but not override visuals */
.election-scroll-wrapper .update-item {
    /* only layout helpers — no border/padding overrides */
    margin-bottom: 10px;
}

/* Desktop / Web view */
.col-lg-12.col-md-12.mt-3.mt-md-0 > div {
    display: flex !important;
    gap: 20px !important;
    justify-content: end;
}

/* Mobile view */
@media (max-width: 768px) {
    .col-lg-12.col-md-12.mt-3.mt-md-0 > div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .col-12.col-md-6 {
        width: 100% !important;
    }
}


body {
    background: #f0e8dd;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    
}

.title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* BOX STYLE */
.box {
    background: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.tag {
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    border-radius: 3px;
}

.bjp { background: #db460c; }
.bjd { background: #24db0c; }

/* COLORS */
.nda { background: #b38b2e; }
.mgb { background: #a63c32; }
.jsp { background: #0f6a6c; }
.oth { background: #6a6963; }

.count {
    font-size: 22px;
    font-weight: bold;
}

/* ------------------------------------
   📱 MOBILE VIEW (Responsive)
------------------------------------ */
@media (max-width: 600px) {
    .container {
        flex-direction: column;     /* stack boxes vertically */
        gap: 15px;
        width: 100%;
        align-items: center;
    }

    .box {
        width: 90%;
        justify-content: space-between;
    }

    .count {
        font-size: 24px;
    }

    .tag {
        font-size: 14px;
        padding: 6px 12px;
    }

    .title {
        font-size: 26px;
    }
}








  /* outer container: center content and limit width */
  .elections-outer {
    display: flex;
    justify-content: center;
    padding: 18px 12px;
    box-sizing: border-box;
  }

  .elections-wrapper {
    display: flex !important;
    gap: 24px !important;
    align-items: stretch;
    width: 100%;
    max-width: 1200px; /* keeps cards grouped instead of floating */
    box-sizing: border-box;
  }

  /* each card */
  .election-card {
    flex: 1 1 48% !important;
    background: #efe9dc;
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    min-width: 260px;
  }

  /* title row: keep it compact and aligned left */
  .election-card .title {
    margin: 0 0 12px 0;
    font-size: 1.35rem;
    letter-spacing: 0.6px;
    color: #222;
    padding: 6px 8px;
    display: inline-block;
    background: transparent;
  }

  /* boxes container: center boxes horizontally and wrap */
  .boxes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* individual party box */
  .box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    min-width: 98px;      /* makes counts line up */
    justify-content: space-between;
    box-sizing: border-box;
  }

  .box .tag {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
  }

  .box .count {
    font-weight: 700;
    font-size: 0.95rem;
    color: #222;
    margin-left: 6px;
  }

  /* Party colors */
  .tag.bjp { background: #fd660e; } /* orange */
  .tag.bjd { background: #2ecc71; } /* green */
  .tag.jsp { background: #00796b; } /* teal */
  .tag.oth { background: #7f7f7f; } /* gray */
  .tag.nda { background: #fd660e; } /* gold */
  .tag.mgb { background: #c0392b; } /* red */

  /* Place the search on the right on wide screens (if needed) */
  .search-wrapper {
    display: flex;
    justify-content: end;
    align-items: flex-start;
    margin-left: 18px;
  }

  /* responsive: stack cards */
  @media (max-width: 960px) {
    .elections-wrapper {
      flex-direction: column !important;
      gap: 14px !important;
      max-width: 720px;
    }
.elections-outer {
    display: grid!important;
    justify-content: center;
    padding: 18px 12px;
    box-sizing: border-box;
}
    .election-card {
      width: 100% !important;
      flex: none !important;
    }

    .box {
      min-width: 84px !important;
      padding: 8px 10px !important;
    }
  }

  @media (max-width: 420px) {
    .box { min-width: 68px !important; padding: 6px 8px !important; }
    .box .tag { font-size: 0.75rem !important; padding: 4px 6px !important; }
    .box .count { font-size: 0.85rem !important; }
  }



  /* Minimal tooltip styling — tweak to match your UI */
  .bihar-box .box { position: relative; cursor: pointer; display: inline-block; }
  .bihar-box .tooltip {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 1000;
  }
  .bihar-box .tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  .bihar-box .box.locked .tooltip {
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  }


  /* Minimal tooltip styling — tweak to match your UI */
  .nuapada-box .box { position: relative; cursor: pointer; }
  .nuapada-box .tooltip {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 1000;
  }
  .nuapada-box .tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  /* style when tooltip is locked (toggled) */
  .nuapada-box .box.locked .tooltip {
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }











    .bihar-box .box {
        position: relative;
        cursor: pointer;
        display: inline-block;
        margin: 6px;
        padding: 6px 10px;
        border-radius: 6px;
        background: rgb(255, 255, 255);
    }
    .bihar-box .tooltip {
        position: absolute;
        top: -34px;
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        padding: 6px 8px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease, transform 0.12s ease;
        z-index: 1000;
    }
    .bihar-box .tooltip.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
    .bihar-box .box.locked .tooltip {
        box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    }

    /* make the whole section visually clickable (optional) */
    #bihar-section { cursor: pointer; }
    #bihar-section .container { padding: 8px; }

/* flutter */
  /* CSS class to hide the download block when Flutter detected */
  .hide-flutter .download-app { display: none !important; }

/* flutter */



.social-icons a {
    text-decoration: none !important;
    outline: none !important;
}


.download-app .store-img {
    max-width: 160px;
    height: auto;
    border: 1px solid #fff;
    border-radius: 8px;
}

@media ((min-width: 268px) and (max-width: 468px)){
    .sss {
        font-size: 1.5rem;
    }
     .srs {
        font-size: 1rem;
    }
}





.btn-swarnaaaa {
    display: inline-block;
    padding: 12px 15px;
    background: #2bb92a;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-right: 3px;
}

.btn-swarnaaaa:hover {
    background: linear-gradient(135deg, #2bb92a, #fbb03b);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.btn-swarnaaaa::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transform: skewX(-25deg);
    transition: all 0.5s ease;
}

.btn-swarnaaaa:hover::after {
    left: 125%;
}

/*  */

.btn-swarnaaa {
    display: inline-block;
    padding: 12px 15px;
    background: #2bb92a;
        margin-top: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-right: 3px;
}

.btn-swarnaaa:hover {
    background: linear-gradient(135deg, #2bb92a, #fbb03b);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.btn-swarnaaa::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transform: skewX(-25deg);
    transition: all 0.5s ease;
}

.btn-swarnaaa:hover::after {
    left: 125%;
}

@media (min-width: 560px) {
    .btn-swarnaaaa {
        display: none !important;
    }

 
}


@media (max-width: 560px) {
    .btn-swarnaaa {
        display: none !important;
    }

 
}


.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background: white;
    transition: 0.4s;
}

.navbar-toggler.collapsed .hamburger span:nth-child(1) {
    transform: none;
}
.navbar-toggler.collapsed .hamburger span:nth-child(2) {
    opacity: 1;
}
.navbar-toggler.collapsed .hamburger span:nth-child(3) {
    transform: none;
}

.navbar-toggler:not(.collapsed) .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggler:not(.collapsed) .hamburger span:nth-child(2) {
    opacity: 0;
}
.navbar-toggler:not(.collapsed) .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}