/* ==============================
   PDF Tools - Professional Squares with Subtle PDF Image
============================== */
.tool-box.upgraded .tool-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* ہر row میں 5 box */
  gap: 15px; 
  padding: 0;
  list-style: none;
}

.tool-box.upgraded .tool-grid li {
  aspect-ratio: 1 / 1; /* perfect square */
  position: relative; 
  background: rgba(255, 255, 255, 0.95);
  color: black;
  font-weight: bold;
  border-radius: 12px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: flex-start; 
  align-items: flex-start; 
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.tool-box.upgraded .tool-grid li a {
  color: #333;           
  text-decoration: none;
  font-size: 14px;
  text-align: left;
  display: flex;
  flex-direction: column; /* icon + title + description vertical */
  justify-content: flex-start;
  align-items: flex-start;
  width: 150%;
  height: 80%;
  padding: 10px;
}

/* ==============================
   Subtle PDF Image in each box
============================== */
.tool-box.upgraded .tool-grid li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 80px;
  background: url('images/pdf-icon.png') no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  opacity: 0.08;    /* barely visible, subtle */
  pointer-events: none; 
}

/* Title & Description Styling */
.tool-box.upgraded .tool-grid li a .tool-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.tool-box.upgraded .tool-grid li a .tool-desc {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

.tool-box.upgraded .tool-grid li:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  background: rgba(255, 255, 255, 1);
}

.tool-box.upgraded .tool-grid li a i {
    font-size: 30px;
    margin-bottom: 5px;
}

/* Icon Colors by Tool */
.icon-merge-pdf i { color: #ff5733; }          
.icon-split-pdf i { color: #28a745; }          
.icon-compress-pdf i { color: #007bff; }       
.icon-convert-pdf i { color: #ffc107; }        
.icon-pdf-to-word i { color: #6f42c1; }        
.icon-pdf-to-ppt i { color: #e83e8c; }        
.icon-pdf-to-excel i { color: #17a2b8; }       
.icon-word-to-pdf i { color: #fd7e14; }        
.icon-ppt-to-pdf i { color: #20c997; }         
.icon-excel-to-pdf i { color: #6610f2; }       
.icon-edit-pdf i { color: #dc3545; }           
.icon-pdf-to-jpg i { color: #198754; }        
.icon-jpg-to-pdf i { color: #0d6efd; }        
.icon-sign-pdf i { color: #fd7e14; }           
.icon-watermark i { color: #ffc107; }          
.icon-rotate-pdf i { color: #6f42c1; }         
.icon-html-to-pdf i { color: #20c997; }        
.icon-unlock-pdf i { color: #fd7e14; }         
.icon-protect-pdf i { color: #dc3545; }        
.icon-organize-pdf i { color: #198754; }       
.icon-pdf-to-pdfa i { color: #6610f2; }       
.icon-repair-pdf i { color: #007bff; }        
.icon-page-numbers i { color: #ff5733; }       
.icon-scan-to-pdf i { color: #28a745; }        
.icon-ocr-pdf i { color: #6f42c1; }            
.icon-compare-pdf i { color: #e83e8c; }       
.icon-redact-pdf i { color: #fd7e14; }        
.icon-crop-pdf i { color: #20c997; }           
.icon-ai-summarizer i { color: #6610f2; }      
.icon-translate-pdf i { color: #17a2b8; }      
.icon-workflow i { color: #ffc107; }          

/* ==============================
   Responsive for PDF Tools
============================== */
@media (max-width: 768px) {
  .tool-box.upgraded .tool-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
  }

  .tool-box.upgraded .tool-grid li a {
    font-size: 13px;
    padding: 8px;
  }

  .tool-box.upgraded .tool-grid li a .tool-title { font-size: 15px; }
  .tool-box.upgraded .tool-grid li a .tool-desc { font-size: 12px; }

  .tool-box.upgraded .tool-grid li::before {
    width: 40px;
    height: 55px;
  }
}

@media (max-width: 480px) {
  .tool-box.upgraded .tool-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
  }

  .tool-box.upgraded .tool-grid li a {
    font-size: 12px;
    padding: 6px;
  }

  .tool-box.upgraded .tool-grid li a .tool-title { font-size: 14px; }
  .tool-box.upgraded .tool-grid li a .tool-desc { font-size: 11px; }

  .tool-box.upgraded .tool-grid li::before {
    width: 30px;
    height: 40px;
  }
}