/* Google Fonts + Bootstrap Icons */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css');

body {
  background: #0d1b24;
  font-family: Arial, sans-serif;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 40px;
}

/* CARD STYLE */
.card {
  background: #07131a;
  border: 1px solid #11303d;
  padding: 25px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Animation */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0px 8px 20px rgba(0, 255, 180, 0.3);
}

/* HEADER */
.card-header {
  background: var(--accent-color);
  color: white;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  gap: 10px;
}

/* Description */
.card-desc {
  color: white;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 15px;
}

/* LIST STYLE */
.card-list {
  list-style: none;
  padding: 0;
}

.card-list li {
  color: #cceeee;
  font-size: 14px;
  margin-bottom: 8px;
  position: relative;
  padding-left: 22px;
}

/* Custom icon for li */
.card-list li::before {
  content: "\2714";   /* check mark icon */
  color: #00ff88;
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
}

/* RESPONSIVE --------------------------- */

/* Tablet: 2 cards per row */
@media (max-width: 992px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 card per row */
@media (max-width: 576px) {
  .cards-container {
    grid-template-columns: 1fr;
  }
}
.numbered-list {
            list-style: decimal; /* Uses numbered bullets */
            padding-left: 1.5rem; /* Indent for numbers */
            color: #cccccc;
            font-size: 0.9rem;
            line-height: 1.4;
        }
        .numbered-list li {
            margin-bottom: 0.5rem;
        }