/* =====================================================
   DNS TOOLS – CORPORATE PROFESSIONAL UI
   Brand Color: rgb(4,56,84)
   ===================================================== */

/* Page background */
.tools-section {
  background: linear-gradient(180deg, #f2f7fb 0%, #ffffff 100%);
}

/* =====================================================
   TOOL CARD BASE STYLE
   ===================================================== */

.tool-card {
  border-radius: 10px;
  padding: 12px 14px;                 /* Compact height */
  height: 100%;
  border: 2px solid rgb(4,56,84);     /* Deep blue border */
  box-shadow: 0 6px 10px rgba(4,56,84,0.99); /* Strong shadow */
  transition: all 0.25s ease;
}

/* Hover effect */
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(4,56,84,0.45);
}

/* Title */
.tool-card h6 {
  font-weight: 700;
  color: rgb(4,56,84);
  font-size: 14px;
  margin-bottom: 4px;
}

/* Description */
.tool-card p {
  font-size: 12px;
  color: #4f5d6b;
  margin-bottom: 8px;
  min-height: 22px;
}

/* Button */
.tool-card a.btn {
  font-size: 11.5px;
  padding: 3px 10px;
  border-color: rgb(4,56,84);
  color: rgb(4,56,84);
}

.tool-card a.btn:hover {
  background-color: rgb(4,56,84);
  color: #ffffff;
}

/* =====================================================
   DIFFERENT LIGHT COLORS FOR EACH BOX
   (Correct selector based on column structure)
   ===================================================== */

.row > div:nth-child(1)  .tool-card { background: #eef6fb; } /* light blue */
.row > div:nth-child(2)  .tool-card { background: #f0f9f5; } /* light green */
.row > div:nth-child(3)  .tool-card { background: #fef6ee; } /* light orange */
.row > div:nth-child(4)  .tool-card { background: #f4f1fb; } /* light violet */
.row > div:nth-child(5)  .tool-card { background: #fff4f4; } /* light red */
.row > div:nth-child(6)  .tool-card { background: #f3fbff; } /* sky blue */
.row > div:nth-child(7)  .tool-card { background: #f7fdf4; } /* mint */
.row > div:nth-child(8)  .tool-card { background: #fffbea; } /* pale yellow */
.row > div:nth-child(9)  .tool-card { background: #f2f8f7; }
.row > div:nth-child(10) .tool-card { background: #fef3f8; }
.row > div:nth-child(11) .tool-card { background: #f1f6ff; }
.row > div:nth-child(12) .tool-card { background: #f9f5ff; }
.row > div:nth-child(13) .tool-card { background: #f6fffa; }
.row > div:nth-child(14) .tool-card { background: #fff6f0; }
.row > div:nth-child(15) .tool-card { background: #f3faff; }
.row > div:nth-child(16) .tool-card { background: #fafafa; }

/* =====================================================
   FORM & TABLE POLISH (TOOLS PAGES)
   ===================================================== */

input.form-control,
select.form-select {
  border-radius: 8px;
}

.table th {
  background: #f1f5fb;
}

.alert {
  border-radius: 8px;
}

/* =====================================================
   MOBILE OPTIMIZATION
   ===================================================== */

@media (max-width: 576px) {
  .tool-card {
    padding: 10px 12px;
  }

  .tool-card h6 {
    font-size: 13px;
  }

  .tool-card p {
    font-size: 11.5px;
  }
.back-tools-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgb(4,56,84);
  color: #fff;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(4,56,84,0.35);
  z-index: 999;
}
.back-tools-fixed:hover {
  background: #02263c;
  color: #fff;
}