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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: #667eea;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    animation: pulse 2s infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo:hover .logo-icon {
    animation: float 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a:hover {
    color: #667eea;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: #667eea;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Scroll progress indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    z-index: 9999;
}

/* Search input */
.search-container {
    max-width: 500px;
    margin: 2rem auto;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    font-size: 1rem;
    outline: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-input:focus {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
    background: rgba(255, 255, 255, 1);
}

/* Category Section */
.quiz-category {
    margin: 1.5rem 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    cursor: pointer;
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-header:hover {
    transform: translateX(10px);
}

.category-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
    color: white;
    transition: transform 0.3s ease;
}

.category-header h2 {
    font-size: 2rem;
    margin-right: 1rem;
}

.category-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.9rem;
    margin-left: auto;
}

.toggle-icon {
    font-size: 1.2rem;
    margin-left: 1rem;
    transition: transform 0.3s ease;
}

.quiz-category.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* Quiz Grid & Cards */
.quiz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.quiz-category.collapsed .quiz-grid {
    display: none;
}

.quiz-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Ensures text color is inherited */
}

.quiz-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.quiz-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    transition: transform 0.3s ease;
    font-weight: bold;
}

.quiz-card:hover .quiz-icon {
    transform: scale(1.1) rotate(5deg);
}

.quiz-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.quiz-card p {
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 0.9rem;
}

.quiz-btn {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
}

.quiz-card:hover .quiz-btn {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}


        .frontend { background: linear-gradient(45deg, #ff6b6b, #ffa500); }
        .backend { background: linear-gradient(45deg, #4ecdc4, #44a08d); }
        .ui-ux { background: linear-gradient(45deg, #ff6b6b, #ffa500); }
        .dotnet { background: linear-gradient(45deg, #512bd4, #764ba2); }
        .java { background: linear-gradient(45deg, #ed8b00, #f89820); }
        .database { background: linear-gradient(45deg, #667eea, #764ba2); }
        .programming { background: linear-gradient(45deg, #f093fb, #f5576c); }
        .cloud { background: linear-gradient(45deg, #4facfe, #00f2fe); }
        .mobile { background: linear-gradient(45deg, #43e97b, #38f9d7); }
        .devops { background: linear-gradient(45deg, #fa709a, #fee140); }
        .ai-ml { background: linear-gradient(45deg, #a8edea, #fed6e3); }
        .testing { background: linear-gradient(45deg, #ff9a9e, #fecfef); }
        .security { background: linear-gradient(45deg, #667292, #764ba2); }
        .gaming { background: linear-gradient(45deg, #667eea, #f093fb); }
        .python { background: linear-gradient(45deg, #3776ab, #ffd43b); }

        .projectmgmt { background: linear-gradient(45deg, #a8edea, #fed6e3); }
        .bigdata { background: linear-gradient(45deg, #ffecd2, #fcb69f); }
        .webserver { background: linear-gradient(45deg, #43e97b, #38f9d7); }
        .iot { background: linear-gradient(45deg, #fa709a, #fee140); }
        .nocode { background: linear-gradient(45deg, #a8edea, #fed6e3); }
        .javascript { background: linear-gradient(45deg, #f7df1e, #f0db4f); color: #333; }
        .python { background: linear-gradient(45deg, #3776ab, #ffd43b); }
        .react { background: linear-gradient(45deg, #61dafb, #21232a); }
        .vue { background: linear-gradient(45deg, #4fc08d, #4fc08d); }
        .angular { background: linear-gradient(45deg, #dd0031, #c3002f); }
        .nodejs { background: linear-gradient(45deg, #339933, #68a063); }
        .express { background: linear-gradient(45deg, #000000, #404040); }
        .django { background: linear-gradient(45deg, #092e20, #0f4c3a); }
       .figma { background: linear-gradient(45deg, #f24e1e, #ff7262); }
        .adobe-xd { background: linear-gradient(45deg, #ff61f6, #470137); }
        .sketch { background: linear-gradient(45deg, #fdad00, #f7931e); }
        .invision { background: linear-gradient(45deg, #dc395f, #e91e63); }
        .zeplin { background: linear-gradient(45deg, #fdca00, #fd7e14); }
        .axure { background: linear-gradient(45deg, #2c5aa0, #009cde); }
        .bootstrap { background: linear-gradient(45deg, #7952b3, #563d7c); }
        .tailwind { background: linear-gradient(45deg, #06b6d4, #0891b2); }
        .material-ui { background: linear-gradient(45deg, #0081cb, #00bcd4); }
        .chakra-ui { background: linear-gradient(45deg, #319795, #38b2ac); }
        
        .dotnet-core { background: linear-gradient(45deg, #512bd4, #8a2be2); }
        .aspnet-core { background: linear-gradient(45deg, #512bd4, #764ba2); }
        .ef-core { background: linear-gradient(45deg, #512bd4, #7c4dff); }
        .blazor { background: linear-gradient(45deg, #512bd4, #673ab7); }
        .maui { background: linear-gradient(45deg, #512bd4, #9c27b0); }
        .xamarin { background: linear-gradient(45deg, #3199dc, #3199dc); }
        .wpf { background: linear-gradient(45deg, #0078d4, #40e0d0); }
        .signalr { background: linear-gradient(45deg, #512bd4, #2196f3); }
        .azure { background: linear-gradient(45deg, #0078d4, #40e0d0); }
        .nunit { background: linear-gradient(45deg, #512bd4, #4caf50); }

        .flask { background: linear-gradient(45deg, #000000, #404040); }
        .fastapi { background: linear-gradient(45deg, #009688, #009688); }
        .numpy { background: linear-gradient(45deg, #013243, #4dabcf); }
        .pandas { background: linear-gradient(45deg, #150458, #e70488); }
        .tensorflow { background: linear-gradient(45deg, #ff6f00, #ff8f00); }
        .pytorch { background: linear-gradient(45deg, #ee4c2c, #e27d64); }
        .scikit-learn { background: linear-gradient(45deg, #f7931e, #3499cd); }
        .matplotlib { background: linear-gradient(45deg, #11557c, #306998); }
        .selenium { background: linear-gradient(45deg, #43b02a, #43b02a); }


        .java-se { background: linear-gradient(45deg, #ed8b00, #f89820); }
        .spring-boot { background: linear-gradient(45deg, #6db33f, #87c442); }
        .spring { background: linear-gradient(45deg, #6db33f, #68a063); }
        .spring-cloud { background: linear-gradient(45deg, #6db33f, #4caf50); }
        .hibernate { background: linear-gradient(45deg, #bcae79, #59666c); }
        .jakarta-ee { background: linear-gradient(45deg, #ed8b00, #ff9800); }
        .javafx { background: linear-gradient(45deg, #ed8b00, #3f51b5); }
        .tomcat { background: linear-gradient(45deg, #f8dc75, #f8dc75); color: #333; }
        .jboss { background: linear-gradient(45deg, #cc0000, #d30001); }
        .maven { background: linear-gradient(45deg, #c71a36, #e91e63); }
        .gradle { background: linear-gradient(45deg, #02303a, #4caf50); }
        .junit { background: linear-gradient(45deg, #25a162, #25a162); }
        .mockito { background: linear-gradient(45deg, #ed8b00, #ff5722); }
        .quarkus { background: linear-gradient(45deg, #4695eb, #ff6600); }
        .spring-MVC { background: linear-gradient(45deg, #0d7377, #14a085); }

        .flask { background: linear-gradient(45deg, #000000, #404040); }
        .spring { background: linear-gradient(45deg, #6db33f, #87c442); }
        .laravel { background: linear-gradient(45deg, #ff2d20, #ff5722); }
        .mysql { background: linear-gradient(45deg, #00618a, #f29111); }
        .SQL { background: linear-gradient(45deg, #9994eb, #6bdd72); }
        .postgresql { background: linear-gradient(45deg, #336791, #4169e1); }
        .mongodb { background: linear-gradient(45deg, #6e9358, #f47070); }
        .redis { background: linear-gradient(45deg, #ce736c, #d4d43a); }
        .html { background: linear-gradient(45deg, #e34f26, #f16529); }
        .css { background: linear-gradient(45deg, #1572b6, #33a9dc); }
        .java { background: linear-gradient(45deg, #ed8b00, #f89820); }
        .csharp { background: linear-gradient(45deg, #239120, #68217a); }
        .php { background: linear-gradient(45deg, #777bb4, #8892bf); }
        .golang { background: linear-gradient(45deg, #00add8, #00c4cc); }
        .rust { background: linear-gradient(45deg, #ce422b, #f74c00); }
        .kotlin { background: linear-gradient(45deg, #0095d5, #f88909); }
        .swift { background: linear-gradient(45deg, #fa7343, #ff6b35); }
        .aws { background: linear-gradient(45deg, #ff9900, #ff6600); }
        .azure { background: linear-gradient(45deg, #0078d4, #40e0d0); }
        .gcp { background: linear-gradient(45deg, #4285f4, #34a853); }
        .docker { background: linear-gradient(45deg, #0db7ed, #2496ed); }
        .kubernetes { background: linear-gradient(45deg, #326ce5, #1d8bf1); }
        .git { background: linear-gradient(45deg, #f14e32, #f05032); }
        .flutter { background: linear-gradient(45deg, #02569b, #0175c2); }
        .react-native { background: linear-gradient(45deg, #61dafb, #0088cc); }
        .selenium { background: linear-gradient(45deg, #43b02a, #43b02a); }
        .junit { background: linear-gradient(45deg, #25a162, #25a162); }
        .jest { background: linear-gradient(45deg, #c21325, #c21325); }
        .cypress { background: linear-gradient(45deg, #17202c, #17202c); }
        .unity { background: linear-gradient(45deg, #000000, #000000); color: white; }
        .unreal { background: linear-gradient(45deg, #0e1128, #313131); }
        .hadoop { background: linear-gradient(45deg, #66ccff, #66ccff); }
        .spark { background: linear-gradient(45deg, #e25a1c, #e25a1c); }
        .nginx { background: linear-gradient(45deg, #009639, #009639); }
        .apache { background: linear-gradient(45deg, #d22128, #d22128); }
        .arduino { background: linear-gradient(45deg, #00979d, #00979d); }
        .raspberry-pi { background: linear-gradient(45deg, #c51a4a, #c51a4a); }
        .svelte { background: linear-gradient(45deg, #ff3e00, #ff6900); }
        .bootstrap { background: linear-gradient(45deg, #7952b3, #563d7c); }
        .tailwind { background: linear-gradient(45deg, #06b6d4, #0891b2); }
        .jquery { background: linear-gradient(45deg, #0769ad, #0769ad); }
        .rails { background: linear-gradient(45deg, #cc0000, #d30001); }
        .aspnet { background: linear-gradient(45deg, #512bd4, #512bd4); }
        .fastapi { background: linear-gradient(45deg, #009688, #009688); }
        .koa { background: linear-gradient(45deg, #33333d, #33333d); }
        .sqlite { background: linear-gradient(45deg, #529bbd, #aeca31); }
        .cassandra { background: linear-gradient(45deg, #1287b1, #1287b1); }
        .dynamodb { background: linear-gradient(45deg, #3949ab, #3949ab); }
        .firebase { background: linear-gradient(45deg, #ffca28, #ffc107); }
        .elasticsearch { background: linear-gradient(45deg, #005571, #005571); }
        .neo4j { background: linear-gradient(45deg, #008cc1, #008cc1); }
        .typescript { background: linear-gradient(45deg, #3178c6, #3178c6); }
        .scala { background: linear-gradient(45deg, #dc322f, #dc322f); }
        .dart { background: linear-gradient(45deg, #0175c2, #0175c2); }
        .r { background: linear-gradient(45deg, #276dc3, #276dc3); }
        .matlab { background: linear-gradient(45deg, #e16737, #e16737); }
        .julia { background: linear-gradient(45deg, #9558b2, #9558b2); }
        .bash { background: linear-gradient(45deg, #4eaa25, #4eaa25); }
        .digitalocean { background: linear-gradient(45deg, #0080ff, #0080ff); }
        .heroku { background: linear-gradient(45deg, #430098, #430098); }
        .netlify { background: linear-gradient(45deg, #00ad9f, #00ad9f); }
        .vercel { background: linear-gradient(45deg, #000000, #000000); color: white; }
        .oracle-cloud { background: linear-gradient(45deg, #f80000, #f80000); }
        .jenkins { background: linear-gradient(45deg, #d33833, #d33833); }
        .ansible { background: linear-gradient(45deg, #ee0000, #ee0000); }
        .terraform { background: linear-gradient(45deg, #623ce4, #623ce4); }
        .puppet { background: linear-gradient(45deg, #ffae1a, #ffae1a); }
        .chef { background: linear-gradient(45deg, #f09820, #f09820); }
        .circleci { background: linear-gradient(45deg, #343434, #343434); }
        .prometheus { background: linear-gradient(45deg, #e6522c, #e6522c); }
        .grafana { background: linear-gradient(45deg, #f46800, #f46800); }
        .elk { background: linear-gradient(45deg, #005571, #fec514); }
        .xamarin { background: linear-gradient(45deg, #3199dc, #3199dc); }
        .ionic { background: linear-gradient(45deg, #3880ff, #3880ff); }
        .cordova { background: linear-gradient(45deg, #e8e8e8, #e8e8e8); color: #333; }
        .keras { background: linear-gradient(45deg, #d00000, #d00000); }
        .xgboost { background: linear-gradient(45deg, #189ad3, #189ad3); }
        .spacy { background: linear-gradient(45deg, #09a3d5, #09a3d5); }
        .nltk { background: linear-gradient(45deg, #154f5f, #154f5f); }
        .huggingface { background: linear-gradient(45deg, #ff9d00, #ff9d00); }
        .lightgbm { background: linear-gradient(45deg, #02d9f7, #02d9f7); }
        .mocha { background: linear-gradient(45deg, #8d6748, #8d6748); }
        .jasmine { background: linear-gradient(45deg, #8a4182, #8a4182); }
        .pytest { background: linear-gradient(45deg, #0a9edc, #0a9edc); }
        .testng { background: linear-gradient(45deg, #ffa500, #ffa500); }
        .postman { background: linear-gradient(45deg, #ff6c37, #ff6c37); }
        .owasp { background: linear-gradient(45deg, #000000, #000000); color: white; }
        .metasploit { background: linear-gradient(45deg, #2596be, #2596be); }
        .burp { background: linear-gradient(45deg, #ff6633, #ff6633); }
        .wireshark { background: linear-gradient(45deg, #1679a7, #1679a7); }
        .nessus { background: linear-gradient(45deg, #00b4a6, #00b4a6); }
        .kali { background: linear-gradient(45deg, #557c94, #557c94); }
        .nmap { background: linear-gradient(45deg, #4682b4, #4682b4); }
        .godot { background: linear-gradient(45deg, #478cbf, #478cbf); }
        .phaser { background: linear-gradient(45deg, #8bc34a, #8bc34a); }
        .cocos2d { background: linear-gradient(45deg, #55c2e1, #55c2e1); }
        .gamemaker { background: linear-gradient(45deg, #8bc34a, #689f38); }
        .kafka { background: linear-gradient(45deg, #231f20, #231f20); color: white; }
        .tableau { background: linear-gradient(45deg, #e97627, #e97627); }
        .powerbi { background: linear-gradient(45deg, #f2c811, #f2c811); }
        .flink { background: linear-gradient(45deg, #e6526f, #e6526f); }
        .redshift { background: linear-gradient(45deg, #8c4fff, #8c4fff); }
        .bigquery { background: linear-gradient(45deg, #4285f4, #4285f4); }
        .databricks { background: linear-gradient(45deg, #ff3621, #ff3621); }
        .caddy { background: linear-gradient(45deg, #1f88c0, #1f88c0); }
        .iis { background: linear-gradient(45deg, #5c2d91, #5c2d91); }
        .lighttpd { background: linear-gradient(45deg, #738bd7, #738bd7); }
        .tomcat { background: linear-gradient(45deg, #f8dc75, #f8dc75); color: #333; }
        .zephyr { background: linear-gradient(45deg, #4b8bbe, #4b8bbe); }
        .micropython { background: linear-gradient(45deg, #2b2728, #2b2728); color: white; }
        .esp8266 { background: linear-gradient(45deg, #d26911, #d26911); }
        .particle { background: linear-gradient(45deg, #00aeef, #00aeef); }
        .mbed { background: linear-gradient(45deg, #008bb0, #008bb0); }
        .mendix { background: linear-gradient(45deg, #0595db, #0595db); }
        .outsystems { background: linear-gradient(45deg, #ec1c24, #ec1c24); }
        .bubble { background: linear-gradient(45deg, #1273eb, #1273eb); }
        .webflow { background: linear-gradient(45deg, #4353ff, #4353ff); }
        .appgyver { background: linear-gradient(45deg, #00d4ff, #00d4ff); }
        .betty { background: linear-gradient(45deg, #3e50b4, #3e50b4); }
        
        .jira { background: linear-gradient(45deg, #0052cc, #0052cc); }
        .confluence { background: linear-gradient(45deg, #172b4d, #172b4d); }
        .asana { background: linear-gradient(45deg, #f06a6a, #f06a6a); }
        .visio { background: linear-gradient(45deg, #3955a3, #3955a3); }
        .lucidchart { background: linear-gradient(45deg, #f37626, #f37626); }
        .excel { background: linear-gradient(45deg, #217346, #217346); }
        .project { background: linear-gradient(45deg, #31752f, #31752f); }
        .agile { background: linear-gradient(45deg, #ff6b35, #ff6b35); }
        .kanban { background: linear-gradient(45deg, #0079bf, #0079bf); }
        .flowcharts { background: linear-gradient(45deg, #6b73ff, #6b73ff); }
        .jupyter { background: linear-gradient(45deg, #f37626, #f7931e); } /* New style for Jupyter */

/* Footer */
footer {
    background: #3a3f72; /* Themed dark color */
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 2rem 0;
    margin-top: 4rem;
}

/* --- Accessibility & Responsive --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

.quiz-card:focus-visible,
.category-header:focus-visible,
.quiz-btn:focus-visible,
.logo:focus-visible,
.nav-links a:focus-visible {
    outline: 3px solid #f7df1e;
    outline-offset: 3px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 65px; /* Adjust based on your header height */
        left: -100%;
        width: 100%;
        height: calc(100vh - 65px);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: left 0.3s ease;
    }

    .nav-links.active {
        left: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .category-header h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
     .category-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .category-header h2 {
        font-size: 1.3rem;
    }
    .category-count {
        order: 3;
        margin-left: 0;
    }
}