/* ========================================
           RESET
        ======================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #f5f7fb;
            color: #222;
            line-height: 1.6;
        }

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

        button,
        input {
            font: inherit;
        }

        img {
            display: block;
            width: 100%;
        }


        /* ========================================
           HEADER
        ======================================== */
        .header {
            position: sticky;
            top: 0;
            z-index: 1000;

            height: 70px;

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

            padding: 0 30px;

            background: #ffffff;
            border-bottom: 1px solid #e5e7eb;

            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        /* Logo */
        .logo-area {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo {
            width: 42px;
            height: 42px;

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

            border-radius: 10px;

            background: #2563eb;
            color: #fff;

            font-size: 20px;
            font-weight: bold;
        }

        .site-title {
            font-size: 20px;
            font-weight: 700;
            color: #111827;
        }


        /* ========================================
           DESKTOP NAVIGATION
        ======================================== */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 8px;

            list-style: none;
        }

        .nav-menu > li {
            position: relative;
        }

        .nav-menu > li > a {
            display: block;
            padding: 10px 14px;

            color: black; /*#374151;*/
            font-size: 15px;

            border-radius: 7px;
        }

        .nav-menu > li > a:hover {
            background: #eff6ff;
            color: #2563eb;
        }


        /* ========================================
           SUBMENU
        ======================================== */
        .submenu {
            position: absolute;
            top: 100%;
            left: 0;

            min-width: 190px;

            display: none;

            background: #fff; 

            border: 1px solid #e5e7eb;
            border-radius: 8px;

            list-style: none;

            padding: 8px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

        .has-submenu:hover .submenu {
            display: block;
        }

        .submenu a {
            display: block;

            padding: 9px 12px;

            border-radius: 6px;

            font-size: 14px;
            color: #374151;
        }

        .submenu a:hover {
            background: #eff6ff;
            color: #2563eb;
        }


        /* ========================================
           MOBILE MENU BUTTON
        ======================================== */
        .menu-toggle {
            display: none;

            border: none;
            background: transparent;

            font-size: 28px;
            cursor: pointer;
        }


        /* ========================================
           PAGE LAYOUT
        ======================================== */
        .page-layout {
            display: flex;

            max-width: 1500px;

            margin: auto;
            min-height: calc(100vh - 70px);
        }


        /* ========================================
           SIDEBAR
        ======================================== */
        .sidebar {
            width: 240px;

            flex-shrink: 0;

            background: #ffffff;

            border-right: 1px solid #e5e7eb;

            padding: 24px 15px;
        }

        .sidebar-title {
            margin-bottom: 15px;
            padding: 0 10px;

            font-size: 17px;
            font-weight: 700;
        }

        .category-list {
            display: flex;
            flex-direction: column;
            gap: 5px;

            list-style: none;
        }

        .category-button {
            width: 100%;

            padding: 11px 13px;

            border: none;
            background: transparent;

            border-radius: 7px;

            text-align: left;

            color: #4b5563;

            cursor: pointer;
        }

        .category-button:hover {
            background: #f3f4f6;
        }

        .category-button.active {
            background: #2563eb;
            color: #fff;
        }


        /* Mobile sidebar button */
        .sidebar-close {
            display: none;

            margin-bottom: 15px;

            padding: 8px 12px;

            border: none;
            border-radius: 6px;

            background: #111827;
            color: white;

            cursor: pointer;
        }


        /* ========================================
           MAIN CONTENT
        ======================================== */
        .main-content {
            flex: 1;
            padding: 30px;
            min-width: 0;
        }


        /* Page intro */
        .page-heading {
            margin-bottom: 25px;
        }

        .page-heading h1 {
            margin-bottom: 5px;

            font-size: 30px;
            color: #111827;
        }

        .page-heading p {
            color: #6b7280;
        }


        /* ========================================
           TOOLBAR
        ======================================== */
        .toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: 15px;

            margin-bottom: 25px;
        }

        .search-box {
            width: 100%;
            max-width: 400px;

            padding: 12px 15px;

            border: 1px solid #d1d5db;
            border-radius: 8px;

            background: #fff;

            outline: none;
        }

        .search-box:focus {
            border-color: #2563eb;

            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .mobile-filter-btn {
            display: none;

            white-space: nowrap;

            border: none;

            padding: 11px 15px;

            border-radius: 7px;

            background: #2563eb;
            color: #fff;

            cursor: pointer;
        }


        /* ========================================
           CARD GRID
        ======================================== */
        .cards-container {
            display: grid;

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

            gap: 22px;
        }


        /* ========================================
           CARD
        ======================================== */
        .card {
            display: flex;
            flex-direction: column;

            overflow: hidden;

            background: #fff;

            border: 1px solid #e5e7eb;
            border-radius: 12px;

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-4px);

            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        }

        .card-image {
            height: 190px;

            object-fit: cover;
        }

        .card-body {
            display: flex;
            flex-direction: column;

            flex: 1;

            padding: 18px;
        }

        .card-category {
            display: inline-block;

            width: fit-content;

            margin-bottom: 8px;

            padding: 4px 8px;

            background: #eff6ff;
            color: #2563eb;

            border-radius: 5px;

            font-size: 12px;
            font-weight: 600;
        }

        .card-title {
            margin-bottom: 8px;

            font-size: 19px;
            color: #111827;
        }

        .card-description {
            margin-bottom: 18px;

            color: #6b7280;

            font-size: 14px;
        }

        .card-button {
            margin-top: auto;

            display: inline-block;

            padding: 10px 15px;

            border-radius: 7px;

            background: #2563eb;
            color: #fff;

            text-align: center;

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

            transition: background 0.2s ease;
        }

        .card-button:hover {
            background: #1d4ed8;
        }


        /* ========================================
           NO RESULTS
        ======================================== */
        .no-results {
            grid-column: 1 / -1;

            padding: 50px 20px;

            text-align: center;

            color: #6b7280;

            background: #fff;

            border: 1px dashed #d1d5db;
            border-radius: 10px;
        }


        /* ========================================
           FOOTER
        ======================================== */
        .footer {
            margin-top: 40px;

            background: #111827;
            color: #d1d5db;
        }

        .footer-content {
            max-width: 1500px;

            margin: auto;

            display: grid;

            grid-template-columns: 2fr 1fr 1fr 1fr;

            gap: 35px;

            padding: 45px 30px;
        }

        .footer h3 {
            margin-bottom: 12px;

            color: #fff;
            font-size: 17px;
        }

        .footer p {
            font-size: 14px;
            color: #9ca3af;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 8px;
        }

        .footer-links a {
            color: #9ca3af;

            font-size: 14px;
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-bottom {
            padding: 15px 30px;

            border-top: 1px solid #374151;

            text-align: center;

            color: #9ca3af;

            font-size: 13px;
        }


        /* ========================================
           SIDEBAR OVERLAY
        ======================================== */
        .sidebar-overlay {
            position: fixed;
            inset: 0;

            z-index: 999;

            display: none;

            background: rgba(0, 0, 0, 0.45);
        }

        .sidebar-overlay.show {
            display: block;
        }


        /* ========================================
           RESPONSIVE - TABLET
        ======================================== */
        @media (max-width: 1100px) {

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

            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }


        /* ========================================
           RESPONSIVE - MOBILE
        ======================================== */
        @media (max-width: 768px) {

            /* Header */
            .header {
                padding: 0 18px;
            }

            .menu-toggle {
                display: block;
            }

            .desktop-nav {
                position: absolute;

                top: 70px;
                left: 0;
                right: 0;

                display: none;

                padding: 10px;

                background: #fff;

                border-bottom: 1px solid #e5e7eb;

                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
            }

            .desktop-nav.show {
                display: block;
            }

            .nav-menu {
                flex-direction: column;
                align-items: stretch;
            }

            .nav-menu > li > a {
                padding: 12px;
            }

            .submenu {
                position: static;

                width: 100%;

                border: none;
                box-shadow: none;

                padding-left: 15px;
            }

            .has-submenu.open .submenu {
                display: block;
            }

            /* Page */
            .main-content {
                padding: 20px 15px;
            }

            .page-heading h1 {
                font-size: 25px;
            }

            .toolbar {
                align-items: stretch;

                flex-direction: column;
            }

            .mobile-filter-btn {
                display: block;
            }

            /* Sidebar */
            .sidebar {
                position: fixed;

                top: 0;
                bottom: 0;
                left: -260px;

                z-index: 1000;

                height: 100vh;

                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);

                transition: left 0.3s ease;
            }

            .sidebar.show {
                left: 0;
            }

            .sidebar-close {
                display: block;
            }

            /* Cards */
            .cards-container {
                grid-template-columns: 1fr;
            }

            /* Footer */
            .footer-content {
                grid-template-columns: 1fr;

                padding: 35px 20px;
            }

            .footer-bottom {
                padding: 15px 20px;
            }
        }


        /* ========================================
           SMALL MOBILE
        ======================================== */
        @media (max-width: 450px) {

            .site-title {
                font-size: 17px;
            }

            .logo {
                width: 38px;
                height: 38px;
            }

            .card-image {
                height: 170px;
            }
        }