@font-face {font-display: swap; font-family: 'Mockbix'; src: url(https://demo.mockbix.com/css/Righteous.woff2) format('woff2');}
        @font-face {font-display: swap; font-family: 'Material'; src: url(https://demo.mockbix.com/css/Material.woff2) format('woff2');}
        @font-face {font-family: 'Quicksand'; src: url(https://cdn.jsdelivr.net/gh/gkcube/fonts@1/Quicksand.woff2) format('woff2');}
    
        :root {
            --primary: #363636;
            --dark-blue: #1d2e44;
            --bg: #f0f2f5;
            --text-main: #3c4043;
            --text-muted: #5f6368;
            --accent: #be912f;
        }

        body {
            font-family: 'Quicksand', Arial, sans-serif;
            margin: 0; padding: 0;
            background-color: var(--bg);
            color: var(--text-main);
            line-height: 1.6;
        }

        /* HEADER */
        #sticky { position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .menubar { background-color: var(--primary); height: 60px; }
        .logo-box { background-color: #fff; color: var(--primary); padding: 0px 15px; border-radius: 20px; font-family: 'Mockbix'; font-size: 22px; text-decoration: none; font-weight: bold; float: left; margin: 12px 0 0 10px;}
        .nav-icon { background: none; border: none; color: white; cursor: pointer; float: right; margin: 15px 10px 0 0; }
        .closeBtn { background-color: #9e3e3e; }
        .m-i { font-family: 'Material'; font-style: normal; font-size: 28px; vertical-align: middle; }
        
        #downMenu { display: none; background-color: #1a1a1a; width: 100%; position: absolute; top: 60px; left:0; text-align: center; z-index: 1001;}
        #downMenu a { display: block; color: white; text-decoration: none; padding: 15px; border-bottom: 1px solid #333; }

        /* BREADCRUMBS */
        .breadcrumbs { padding: 10px 0; font-size: 14px; color: #666; margin-bottom: 10px; }
        .breadcrumbs a { color: var(--primary); text-decoration: none; font-weight: bold; }
        .breadcrumbs span { margin: 0 5px; color: #ccc; }

        /* POST CONTENT */
        .post-wrapper { max-width: 800px; margin: 85px auto 40px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); width: calc(100% - 30px); }
        .post-inner { padding: 20px 40px 40px; }
        .post-header h1 { font-size: 32px; color: var(--dark-blue); line-height: 1.3; margin: 10px 0 15px 0; }
        .meta-info { color: var(--accent); font-size: 14px; font-weight: bold; text-transform: uppercase; }

        /* Featured Image (Relative Path) */
        .featured-image { width: 100%; height: auto; display: block; }

        .article-content { font-size: 17px; color: #444; margin-top: 25px; }
        .article-content h2 { color: var(--primary); font-size: 24px; margin-top: 35px; border-left: 5px solid var(--accent); padding-left: 15px; }
        .article-content p { margin-bottom: 20px; }

        .ad-placeholder { background: #f8f9fa; border: 1px dashed #ccc; padding: 20px; text-align: center; margin: 25px 0; font-size: 12px; color: #999; border-radius: 8px; }

        /* FOOTER */
        footer { background: var(--dark-blue); color: #fff; padding: 50px 20px; text-align: center; margin-top: 50px; }
        .footer-logo { font-family: 'Mockbix'; font-size: 30px; margin-bottom: 15px; color: #fff; }
        .footer-links { margin-bottom: 30px; }
        .footer-links a { color: #ccc; text-decoration: none; margin: 0 15px; font-weight: bold; transition: 0.3s; }
        .footer-links a:hover { color: #fff; }
        .copyright { font-size: 13px; color: #888; border-top: 1px solid #333; padding-top: 20px; max-width: 800px; margin: 0 auto; }

        @media (max-width: 600px) {
            .post-inner { padding: 20px; }
            .post-header h1 { font-size: 24px; }
        }

          /* CATEGORY LAYOUT */
        .main-container { max-width: 900px; margin: 85px auto 40px; padding: 0 15px; }
        .header-group { margin: 20px 0 35px; border-left: 6px solid var(--accent); padding-left: 20px; }
        .large-title { font-size: 38px; font-weight: 800; color: var(--dark-blue); margin: 0; }
        .section-desc { font-size: 16px; color: var(--text-muted); margin: 5px 0 0 0; font-weight: 500; }

        /* THE GRID SYSTEM */
        .card-grid { 
            display: grid; 
            grid-template-columns: 1fr; /* Default for mobile: 1 column */
            gap: 20px; 
        }

        /* CARD STYLING */
        .article-card { 
            background: white; 
            border-radius: 15px; 
            overflow: hidden; 
            text-decoration: none; 
            color: inherit; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.06);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        
        .article-card:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 12px 25px rgba(0,0,0,0.12); 
        }

        .thumb-box { 
            width: 100%; 
            height: 180px; /* Fixed height for image consistency */
            overflow: hidden;
            position: relative;
        }

        .article-card img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; /* This makes the thumb look professional */
            transition: transform 0.5s ease;
        }

        .article-card:hover img {
            transform: scale(1.05);
        }

        .card-content { 
            padding: 20px; 
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .card-content .title { 
            font-weight: 700; 
            font-size: 18px; 
            line-height: 1.4; 
            color: #1a1a1a; 
            margin: 0;
        }

        .card-category {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--accent);
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        /* MEDIA QUERIES FOR PC (DESKTOP) */
        @media (min-width: 768px) {
            .card-grid { 
                grid-template-columns: repeat(2, 1fr); /* 2 Columns on PC */
            }
            .large-title { font-size: 45px; }
            .thumb-box { height: 210px; } /* Slightly larger thumbs on PC */
        }