/* --- General Reset --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background-color: #ffffff; color: #000; font-family: 'Poppins', sans-serif; min-height: 100vh; display: flex; flex-direction: column; }

        /* --- Header --- */
        header {
            position: fixed; top: 0; width: 100%; height: 70px;
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 5%; z-index: 1000; background: #000;
        }
        .logo-area { display: flex; align-items: center; gap: 15px; }
        .logo { font-size: 26px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: 2px; border-right: 1px solid #444; padding-right: 15px; }
        .page-name { text-decoration: none; color: #f7d117; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

        .menu-icon { cursor: pointer; display: flex; flex-direction: column; gap: 7px; z-index: 1100; }
        .menu-icon span { width: 30px; height: 2px; background: #fff; transition: 0.3s; }

        /* --- Sidebar & Overlay --- */
        #overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1050; display: none;
        }
        .sidebar-div {
            position: fixed; top: 0; right: -300px; width: 280px; height: 100%;
            background: #111; padding: 80px 30px; z-index: 1060; transition: 0.4s;
            box-shadow: -5px 0 15px rgba(0,0,0,0.3);
        }
        .sidebar-div.open { right: 0; }
        .sidebar-div a { color: #fff; display: block; padding: 15px 0; text-decoration: none; font-size: 18px; border-bottom: 1px solid #222; }

        /* --- Filter Bar --- */
        .filter-container {
            position: fixed; top: 70px; width: 100%; background: #fff;
            padding: 10px 5%; border-bottom: 1px solid #eee; z-index: 900;
            display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
        }
        .filter-btn { padding: 6px 15px; border: 1px solid #000; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; border-radius: 4px; }
        .filter-btn.active { background: #000; color: #fff; }

        /* --- Main Content --- */
        .main-content { flex: 1; padding-top: 150px; display: flex; flex-direction: column; align-items: center; padding-inline: 20px; }
        .news-container { display: flex; max-width: 1000px; width: 100%; background: #fff; border: 1px solid #eee; margin-bottom: 30px; overflow: hidden; }
        .post-hidden { display: none !important; }

        /* Slider & Preview */
        .img-wrapper { flex: 1.3; position: relative; min-height: 300px; background: #111; overflow: hidden; }
        .slider-container { display: flex; transition: 0.6s ease; height: 100%; }
        .slider-container img { min-width: 100%; height: 100%; object-fit: cover; }
        
        /* Preview Button */
        .preview-btn {
            position: absolute; bottom: 15px; right: 15px;
            background: rgba(255, 255, 255, 0.9); color: #000;
            padding: 6px 12px; font-size: 11px; font-weight: 800;
            text-transform: uppercase; border-radius: 4px; cursor: pointer;
            z-index: 10; transition: 0.3s; border: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .preview-btn:hover { background: #f7d117; transform: translateY(-2px); }

        .content-wrapper { flex: 1; display: flex; padding: 30px; }
        .vertical-date { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; color: #777; border-left: 1px solid #ddd; padding: 10px 0; margin-right: 20px; }
        .text-info h2 { font-size: 24px; font-weight: 900; margin-bottom: 15px; }

        /* --- Modal (Preview Pop-up) --- */
        .modal {
            display: none; position: fixed; z-index: 2000; 
            left: 0; top: 0; width: 100%; height: 100%; 
            background-color: rgba(0,0,0,0.95); align-items: center; justify-content: center;
        }
        .modal-content { max-width: 90%; max-height: 85vh; border-radius: 8px; box-shadow: 0 0 20px rgba(255,255,255,0.1); }
        .close-modal {
            position: absolute; top: 20px; right: 30px;
            color: #fff; font-size: 40px; cursor: pointer; transition: 0.3s;
        }
        .close-modal:hover { color: #f7d117; }

        /* --- Footer --- */
        footer { background: #000; color: #fff; padding: 40px 5%; text-align: center; margin-top: 50px; }
        .footer-logo { font-size: 20px; font-weight: 800; margin-bottom: 10px; display: block; color: #fff; text-decoration: none; }
        .copy-text { font-size: 12px; color: #666; }

        @media (max-width: 800px) { .news-container { flex-direction: column; } .img-wrapper { height: 250px; } }
     
.desktop {display: block;}
.mobile {display: none;}

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

.desktop {display: none;}
.mobile {display: block;}

}