@media screen and (min-width: 678px){

            #notificationContainer{

                position: fixed; 

                top: 20px; 

                right: 20px; 

                z-index: 11000;

            }

        }



        @media screen and (max-width: 676px){

             #notificationContainer{

                position: fixed; 

                top: 70px; 

                right: 10px; 

                z-index: 11000;

                /* left: 20px; */

                z-index: 11000;

                /* left: 20px; */

                z-index: 11000;

                /* left: 20px; */

            }

        }





        .large-menu-area {

            width: 700px;

        }



        /* MOBILE OVERLAY STYLES - ADDED */

        @media (max-width: 991px) {



            /* Hide the default Bootstrap collapse behavior */

            .navbar-collapse {

                display: none !important;

            }



            /* Mobile overlay background */

            .mobile-overlay {

                position: fixed;

                top: 0;

                left: 0;

                width: 100%;

                height: 100vh;

                background: rgba(0, 0, 0, 0.5);

                z-index: 1040;

                opacity: 0;

                visibility: hidden;

                transition: all 0.3s ease;

            }



            .mobile-overlay.active {

                opacity: 1;

                visibility: visible;

            }



            /* Mobile menu panel sliding from left */

            .mobile-menu {

                position: fixed;

                top: 0;

                left: -100%;

                width: 100%;

                /* max-width: 350px; */

                height: 100vh;

                background: #fff;

                z-index: 1041;

                transition: left 0.3s ease;

                overflow-y: auto;

                box-shadow: 2px 0 20px var(--shadow-light);

                /* Hide scrollbar */

                scrollbar-width: none;

                /* Firefox */

                -ms-overflow-style: none;

                /* IE and Edge */

            }



            .mobile-menu::-webkit-scrollbar {

                display: none;

                /* Chrome, Safari, Edge */

            }



            .mobile-menu.active {

                left: 0;

            }



            /* Mobile menu header */

            .mobile-menu-header {

                padding: 1.5rem;

                background: var(--primary-color, #007bff);

                color: white;

                display: flex;

                justify-content: space-between;

                align-items: center;

            }



            .mobile-menu-header .navbar-brand {

                color: #fff !important;

                margin: 0;

                text-shadow: 0 0 #fff;

            }



            .mobile-close-btn {

                background: none;

                border: none;

                color: white;

                font-size: 1.5rem;

                cursor: pointer;

                padding: 0.5rem;

                border-radius: 5px;

                transition: all 0.3s ease;

            }



            .mobile-close-btn:hover {

                background: rgba(255, 255, 255, 0.1);

            }



            /* Mobile menu content */

            .mobile-menu-content {

                padding: 1rem 0;

            }



            /* Mobile navigation items */

            .mobile-nav-item {

                border-bottom: 1px solid var(--border-light, #dee2e6);

            }



            .mobile-nav-item:last-child {

                border-bottom: none;

            }



            .mobile-nav-link {

                display: block;

                padding: 1rem 1.5rem;

                color: var(--text-dark, #333);

                text-decoration: none;

                font-weight: 500;

                transition: all 0.3s ease;

                position: relative;

            }



            .mobile-nav-link:hover {

                background: var(--bg-light, #f8f9fa);

                color: var(--primary-color, #007bff);

                padding-left: 2rem;

            }



            .mobile-nav-link i {

                margin-right: 0.75rem;

                width: 20px;

                text-align: center;

            }



            /* Mobile dropdown styles */

            .mobile-dropdown {

                position: relative;

            }



            .mobile-dropdown-toggle {

                display: flex;

                justify-content: space-between;

                align-items: center;

                cursor: pointer;

            }



            .mobile-dropdown-toggle::after {

                content: '\f107';

                font-family: 'Font Awesome 6 Free';

                font-weight: 900;

                transition: transform 0.3s ease;

            }



            .mobile-dropdown.active .mobile-dropdown-toggle::after {

                transform: rotate(180deg);

            }



            .mobile-dropdown-menu {

                max-height: 0;

                overflow: hidden;

                background: var(--bg-light, #f8f9fa);

                transition: max-height 0.3s ease;

            }



            .mobile-dropdown.active .mobile-dropdown-menu {

                max-height: 500px;

            }



            .mobile-dropdown-item {

                padding: 0.75rem 3rem;

                color: var(--text-dark, #333);

                text-decoration: none;

                display: block;

                transition: all 0.3s ease;

                border-bottom: 1px solid rgba(0, 0, 0, 0.05);

            }



            .mobile-dropdown-item:hover {

                background: white;

                color: var(--primary-color, #007bff);

                padding-left: 3.5rem;

            }



            /* Mobile tools section */

            .mobile-tools {

                padding: 1.5rem;

                background: var(--bg-light, #f8f9fa);

                margin-top: 1rem;

            }



            .mobile-search-box {

                position: relative;

                margin-bottom: 1.5rem;

            }



            .mobile-search-input {

                width: 100%;

                padding: 0.75rem 1rem 0.75rem 3rem;

                border: 2px solid var(--border-light, #dee2e6);

                border-radius: 25px;

                background: white;

                font-size: 1rem;

            }



            .mobile-search-icon {

                position: absolute;

                left: 2rem;

                top: 50%;

                transform: translateY(-50%);

                color: #999;

            }



            /* Mobile theme toggle */

            .mobile-theme-section {

                display: flex;

                align-items: center;

                justify-content: center;

                gap: 0.5rem;

                margin-bottom: 1.5rem;

            }



            /* Mobile profile section */

            .mobile-profile {

                text-align: center;

            }



            .mobile-profile-info {

                display: flex;

                align-items: center;

                justify-content: center;

                gap: 1rem;

                margin-bottom: 1rem;

            }



            .mobile-profile-img {

                width: 50px;

                height: 50px;

                border-radius: 50%;

                object-fit: cover;

            }



            .mobile-profile-icon {

                font-size: 2.5rem;

                color: var(--primary-color, #007bff);

            }



            .mobile-profile-name {

                font-weight: 600;

                color: var(--text-dark, #333);

            }



            .mobile-profile-actions {

                display: flex;

                flex-direction: column;

                gap: 0.5rem;

            }



            .mobile-profile-link {

                padding: 0.75rem 1rem;

                color: var(--text-dark, #333);

                text-decoration: none;

                border-radius: 8px;

                transition: all 0.3s ease;

                display: flex;

                align-items: center;

                justify-content: center;

                gap: 0.5rem;

                background: white;

                border: 1px solid var(--border-light, #dee2e6);

                font-weight: 500;

            }



            .mobile-profile-link:hover {

                background: var(--primary-color, #007bff);

                color: white;

                transform: translateY(-2px);

                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

            }



            .mobile-profile-link.primary {

                background: var(--primary-color, #007bff);

                color: white;

                border-color: var(--primary-color, #007bff);

            }



            .mobile-profile-link.danger {

                color: #dc3545;

            }



            .mobile-profile-link.danger:hover {

                background: #dc3545;

                color: white;

            }



            /* Custom mobile toggle button */

            .mobile-navbar-toggler {

                background: none;

                border: none !important;

                font-size: 2rem;

                color: var(--primary-color, #007bff);

                cursor: pointer;

                padding: 0 0.5rem 0 0;

                border-radius: 5px;

                transition: all 0.3s ease;

            }



            /* .mobile-navbar-toggler:hover {

                background: var(--bg-light, #f8f9fa);

            } */



            .mobile-navbar-toggler:focus {

                background: none;

            }

        }



        /* Keep your existing tablet styles but modify them */

        @media (max-width: 991px) {

            .large-menu-area {

                width: auto;

            }

        }





        .hindi-text {

            font-family: "Tiro Devanagari Hindi", serif;

            /* font-weight: 400; */

            /* font-style: normal; */

        }



        .mobile-theme-section .fa-sun.theme-icon{

            color: yellow;

        }

        .mobile-theme-section .fa-moon.theme-icon{

            color: skyblue;

        }



// ===========================================



 .page-wrapper {

  display: flex;

  justify-content: center;

  position: relative;

  gap: 1rem; /* Modern spacing */

}



.left-ad, .right-ad {

  /* Both ads now have equal width - shrinks from 180px to 100px */

  width: clamp(100px, 13vw, 180px);

  position: sticky;

  top: 90px;

  height: fit-content;

  z-index: 999;

}



.ad-box {

  /* border: 1px solid #ccc; */

  padding: 10px;

  text-align: center;

  height: 600px;

  width: 100%;

}



/* Progressive width reduction on medium screens */

@media (max-width: 1400px) {

  .left-ad, .right-ad { 

    width: clamp(90px, 11vw, 160px); 

  }

}



@media (max-width: 1200px) {

  .left-ad, .right-ad { 

    width: clamp(80px, 9vw, 140px); 

  }

}



/* Hide on tablets and mobile */

@media (max-width: 1024px) {

  .left-ad, .right-ad {

    display: none;

  }

}





 /* === Post Card Styles === */

    .post-card {

        position: relative;

    }





    /* === Like Button === */

    .like-btn {

        position: absolute;

        bottom: 0;

        right: 0;

        /* background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); */

        background-color: transparent;

        color: #dc3545;

        border: none;

        border-radius: 15px 0 15px 0;

        padding: 0.4rem 0.8rem;

        font-size: 0.75rem;

        font-weight: 500;

        cursor: pointer;

        transition: all 0.3s ease;

        /* box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); */

        display: flex;

        align-items: center;

        gap: 0.3rem;

    }



    .like-btn:hover {

        transform: translateY(-2px);

        /* box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); */

        /* background: linear-gradient(135deg, #ff5252 0%, #e53e3e 100%); */

    }



    .like-btn:active {

        transform: translateY(0);

    }



    .like-btn i {

        transition: transform 0.3s ease;

    }



    .like-btn:hover i {

        transform: scale(1.1);

    }



    .like-count {

        font-weight: 600;

    }



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

    @media (max-width: 768px) {

        .like-btn {

            /* bottom: 1.25rem; */

            /* right: 1.25rem; */

            padding: 0.5rem 0.85rem;

            font-size: 0.8rem;

        }

        .post-type{

            display: none;

        }

    }



    .post-content .post-title:hover{

        color: var(--primary-color) !important;

    }