/* ============================================
   FINAL CSS - 5 BOXES PER ROW, CENTERED
   ============================================ */

/* HEADER */
.heading-bar {
    display: flex;
    gap: 10px;
    padding: 15px;
    overflow-x: auto;
    justify-content: center;
    flex-wrap: wrap;
}

.heading-bar::-webkit-scrollbar {
    display: none;
}

.heading-bar button {
    padding: 10px 16px;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.heading-bar button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* TOOL BOX */
.tool-box {
    display: none;
    width: 100%;
    max-width: 1200px;
    margin: 15px auto;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.tool-box.show {
    display: block;
}

body {
    padding-top: 50px;
}

.site-title {
    text-align: center;
    margin-top: 7px;
}

.site-description {
    text-align: center;
    max-width: 800px;
    margin: 10px auto;
    font-size: 18px;
    color: #666;
    line-height: 1.2;
}

/* ============================================
   MAIN GRID - 5 BOXES, CENTERED
   ============================================ */

/* Make all tool containers transparent */
[id^="tools"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    display: flex;
    justify-content: center;
}

/* Grid Container - Fixed 5 columns */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 220px));
    gap: 15px;
    padding: 20px;
    list-style: none;
    margin: 0 auto;
    justify-content: center;
    max-width: 1200px;
}

/* Square Boxes */
.tool-grid li {
    aspect-ratio: 1 / 1;
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    width: 100%;
}

/* Link Styling */
.tool-grid li a {
    color: #333;
    text-decoration: none;
    font-size: 13px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    z-index: 1;
}

/* Icon Styling */
.tool-grid li a i {
    font-size: 28px;
    margin-bottom: 8px;
}

/* Title Styling */
.tool-grid li a .tool-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

/* Description Styling */
.tool-grid li a .tool-desc {
    font-size: 11px;
    color: #666;
    line-height: 1.2;
}

/* Hover Effects */
.tool-grid li:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 1);
}

/* ============================================
   RESPONSIVE - SAME 5 COLUMNS ON ALL SCREENS
   ============================================ */

/* Tablet - Still 5 boxes, smaller gap */
@media (max-width: 992px) {
    .tool-grid {
        grid-template-columns: repeat(5, minmax(90px, 150px));
        gap: 12px;
        padding: 15px;
    }
}

/* Mobile - Still 5 boxes, adjust sizes */
@media (max-width: 768px) {
    .tool-grid {
        grid-template-columns: repeat(5, minmax(80px, 120px));
        gap: 10px;
        padding: 12px;
    }
    
    .tool-grid li a {
        padding: 6px;
    }
    
    .tool-grid li a .tool-title {
        font-size: 12px;
    }
    
    .tool-grid li a .tool-desc {
        font-size: 9px;
    }
    
    .tool-grid li a i {
        font-size: 22px;
        margin-bottom: 4px;
    }
}

/* Small Mobile - Still 5 boxes, smallest */
@media (max-width: 550px) {
    .tool-grid {
        grid-template-columns: repeat(5, minmax(65px, 95px));
        gap: 8px;
        padding: 10px;
    }
    
    .tool-grid li a {
        padding: 4px;
    }
    
    .tool-grid li a .tool-title {
        font-size: 10px;
    }
    
    .tool-grid li a .tool-desc {
        font-size: 8px;
        display: none; /* Hide description on very small screens */
    }
    
    .tool-grid li a i {
        font-size: 18px;
        margin-bottom: 3px;
    }
}

/* Extra Small - Still 5 boxes */
@media (max-width: 450px) {
    .tool-grid {
        grid-template-columns: repeat(5, minmax(60px, 85px));
        gap: 6px;
        padding: 8px;
    }
    
    .tool-grid li a .tool-title {
        font-size: 9px;
    }
    
    .tool-grid li a i {
        font-size: 16px;
    }
}

/* ============================================
   ICON COLORS (ALL TOOLS)
   ============================================ */

/* PDF Tools */
.icon-merge-pdf i { color: #ff5733 !important; }
.icon-split-pdf i { color: #28a745 !important; }
.icon-compress-pdf i { color: #007bff !important; }
.icon-convert-pdf i { color: #ffc107 !important; }
.icon-pdf-to-word i { color: #6f42c1 !important; }
.icon-pdf-to-ppt i { color: #e83e8c !important; }
.icon-pdf-to-excel i { color: #17a2b8 !important; }
.icon-word-to-pdf i { color: #fd7e14 !important; }
.icon-ppt-to-pdf i { color: #20c997 !important; }
.icon-excel-to-pdf i { color: #6610f2 !important; }
.icon-edit-pdf i { color: #dc3545 !important; }
.icon-sign-pdf i { color: #fd7e14 !important; }
.icon-watermark i { color: #ffc107 !important; }
.icon-rotate-pdf i { color: #6f42c1 !important; }
.icon-unlock-pdf i { color: #28a745 !important; }
.icon-protect-pdf i { color: #dc3545 !important; }
.icon-organize-pdf i { color: #20c997 !important; }
.icon-pdf-to-pdfa i { color: #6610f2 !important; }
.icon-repair-pdf i { color: #007bff !important; }
.icon-page-numbers i { color: #ff5733 !important; }
.icon-scan-to-pdf i { color: #28a745 !important; }
.icon-compare-pdf i { color: #e83e8c !important; }
.icon-redact-pdf i { color: #dc3545 !important; }
.icon-crop-pdf i { color: #20c997 !important; }
.icon-ai-summarizer i { color: #6610f2 !important; }

/* Calculator Tools */
.icon-age i { color: #FF6B6B !important; }
.icon-emi i { color: #4D96FF !important; }
.icon-fd i { color: #6BCB77 !important; }
.icon-sip i { color: #FFD93D !important; }
.icon-percentage i { color: #845EC2 !important; }
.icon-discount i { color: #FF9671 !important; }
.icon-gst i { color: #00C9A7 !important; }
.icon-profit-loss i { color: #FFAB76 !important; }
.icon-simple-interest i { color: #FF6EC7 !important; }
.icon-compound-interest i { color: #4ECDC4 !important; }
.icon-loan i { color: #FFE66D !important; }
.icon-salary i { color: #A8E6CF !important; }
.icon-bmi i { color: #FF8B94 !important; }
.icon-bmr i { color: #FFAAA5 !important; }
.icon-calorie i { color: #FFD3B6 !important; }
.icon-time-duration i { color: #B5EAD7 !important; }
.icon-date-diff i { color: #C7CEEA !important; }

/* Image Tools */
.icon-image-resizer i { color: #FF6B6B !important; }
.icon-image-compressor i { color: #4ECDC4 !important; }
.icon-jpg-to-png i { color: #95E77E !important; }
.icon-png-to-jpg i { color: #FFD93D !important; }
.icon-webp-to-jpg i { color: #845EC2 !important; }
.icon-image-cropper i { color: #FF9671 !important; }
.icon-image-rotator i { color: #00C9A7 !important; }
.icon-image-flipper i { color: #FFAB76 !important; }
.icon-blur-image i { color: #FF6EC7 !important; }
.icon-sharpen-image i { color: #4D96FF !important; }
.icon-remove-bg i { color: #E74C3C !important; }
.icon-meme-generator i { color: #F39C12 !important; }
.icon-thumbnail-preview i { color: #9B59B6 !important; }

/* Color & CSS Tools */
.icon-gradient i { color: #FF6B6B !important; }
.icon-color-palette i { color: #FFD93D !important; }
.icon-hex-rgb i { color: #6BCB77 !important; }
.icon-rgb-hex i { color: #4D96FF !important; }
.icon-css-button i { color: #FF6EC7 !important; }
.icon-css-shadow i { color: #845EC2 !important; }
.icon-css-gradient i { color: #FF9671 !important; }
.icon-flexbox i { color: #00C9A7 !important; }
.icon-grid-layout i { color: #FFAB76 !important; }

/* JSON & Code Tools */
.icon-json-formatter i { color: #F7B32B !important; }
.icon-json-validator i { color: #2ECC71 !important; }
.icon-html-minifier i { color: #E74C3C !important; }
.icon-css-minifier i { color: #3498DB !important; }
.icon-js-minifier i { color: #F1C40F !important; }
.icon-base64-encoder i { color: #9B59B6 !important; }
.icon-base64-decoder i { color: #1ABC9C !important; }
.icon-url-encoder i { color: #E67E22 !important; }
.icon-url-decoder i { color: #34495E !important; }
.icon-regex-tester i { color: #16A085 !important; }
.icon-html-to-text i { color: #8E44AD !important; }
.icon-text-to-html i { color: #D35400 !important; }
.icon-code-beautifier i { color: #27AE60 !important; }
.icon-meta-generator i { color: #2980B9 !important; }
.icon-og-generator i { color: #C0392B !important; }
.icon-robots-generator i { color: #7F8C8D !important; }

/* Text Tools */
.icon-word-counter i { color: #FF6B6B !important; }
.icon-character-counter i { color: #4ECDC4 !important; }
.icon-sentence-counter i { color: #95E77E !important; }
.icon-paragraph-counter i { color: #FFD93D !important; }
.icon-case-converter i { color: #845EC2 !important; }
.icon-title-case i { color: #FF9671 !important; }
.icon-slug i { color: #00C9A7 !important; }
.icon-random-name i { color: #FFAB76 !important; }
.icon-username i { color: #FF6EC7 !important; }
.icon-fancy-text i { color: #4D96FF !important; }
.icon-text-reverser i { color: #6BCB77 !important; }
.icon-remove-duplicates i { color: #E74C3C !important; }
.icon-line-sorter i { color: #3498DB !important; }
.icon-keyword-density i { color: #F39C12 !important; }
.icon-hashtag i { color: #1ABC9C !important; }
.icon-bio i { color: #9B59B6 !important; }
.icon-caption i { color: #E67E22 !important; }
.icon-password i { color: #27AE60 !important; }
.icon-random-text i { color: #D35400 !important; }
.icon-word-scrambler i { color: #8E44AD !important; }

/* Unit Tools */
.icon-unit-converter i { color: #FF6B6B !important; }
.icon-speed-calculator i { color: #4D96FF !important; }
.icon-fuel-cost i { color: #6BCB77 !important; }
.icon-random-number i { color: #FFD93D !important; }

/* Games Tools */
.icon-dice-roller i { color: #FF6B6B !important; }
.icon-flip-coin i { color: #FFD93D !important; }
.icon-countdown-timer i { color: #4D96FF !important; }
.icon-stopwatch i { color: #6BCB77 !important; }
.icon-alarm-tool i { color: #FF9671 !important; }
.icon-time-zone i { color: #845EC2 !important; }
.icon-calendar-generator i { color: #00C9A7 !important; }

/* Productivity Tools */
.icon-work-hours i { color: #FF6B6B !important; }
.icon-meeting-time i { color: #4D96FF !important; }
.icon-habit-tracker i { color: #6BCB77 !important; }
.icon-todo i { color: #FFD93D !important; }
.icon-notes i { color: #845EC2 !important; }
.icon-clipboard i { color: #FF9671 !important; }
.icon-text-compare i { color: #00C9A7 !important; }
.icon-duplicate-finder i { color: #FFAB76 !important; }
.icon-random-picker i { color: #FF6EC7 !important; }
.icon-decision-maker i { color: #4ECDC4 !important; }
.icon-name-wheel i { color: #95E77E !important; }
.icon-yes-no i { color: #E74C3C !important; }

/* ============================================
   DARK MODE
   ============================================ */
.dark-mode .tool-grid li {
    background: rgba(30, 30, 40, 0.95);
    border-color: #444;
}

.dark-mode .tool-grid li a .tool-title {
    color: #eee;
}

.dark-mode .tool-grid li a .tool-desc {
    color: #aaa;
}

.dark-mode .tool-grid li:hover {
    background: rgba(40, 40, 50, 1);
}