/* =========================================
   1. GLOBAL RESET & TYPOGRAPHY
   ========================================= */
* { box-sizing: border-box; }

body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
a:hover { text-decoration: none; color: #000; }

.page-content {
    padding-top: 110px;
}

/* =========================================
   2. PRELOADER
   ========================================= */
.preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #fff;
    display: flex; justify-content: center; align-items: center;
    z-index: 99999;
}

/* =========================================
   3. HEADER & NAVIGATION
   ========================================= */
.desktop-header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1030;
    transition: all 0.3s ease;
}

.desktop-header .nav-link {
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
}

.desktop-header .nav-link:hover {
    color: #48a82c !important;
    border-bottom: 2px solid #48a82c;
}

/* =========================================
   4. SIDEBAR (DRAWER)
   ========================================= */
.ab-sidebar {
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed !important;
    z-index: 2000;
    top: 0; left: 0;
    overflow: hidden;
}

.ab-sidebar-content {
    background-color: #fff;
    height: 100%;
    width: 0;
    overflow-y: auto;
    position: relative;
    transition: width 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
}

.ab-sidebar-content-show { width: 300px !important; }
.side-bar-close-area { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }

/* =========================================
   5. DESKTOP CATEGORY GRID
   ========================================= */
@media (min-width: 992px) {
    .app-category-grid {
        display: flex; flex-wrap: wrap; gap: 30px;
    }
    .app-category-item {
        display: block; width: calc(25% - 23px);
        text-decoration: none; background: #fff; border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: transform 0.3s ease; text-align: center; padding-bottom: 15px;
        border: 1px solid #eee; overflow: hidden;
    }
    .app-category-item:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
    .app-category-item .cat-image-wrapper { width: 100%; height: 200px; overflow: hidden; border-bottom: 1px solid #f0f0f0; }
    .app-category-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
    .app-category-item:hover img { transform: scale(1.1); }
    .app-category-item .cat-title { font-size: 18px; font-weight: 700; margin-top: 15px; color: #333; }
}

/* Responsive Utilities */
@media (max-width: 991px) { .desktop-only { display: none !important; } }
@media (min-width: 992px) { .mobile-only { display: none !important; } }