/* CSS Document */

.download-grid {
  display: flex;             /* makes boxes side by side */
  gap: 20px;                 /* space between boxes */
  justify-content: center;   /* center the boxes in the container */
  flex-wrap: wrap;           /* wrap to next line if screen is too small */
  width:100%;
}

.download-box {
  display: flex;             /* stack items inside the box */
  flex-direction: column;    /* column alignment */
  flex: 1 1 calc(50% - 10px); /* take ~50% width minus half the gap */
  align-items: center;       /* center items horizontally */
  padding: 20px;             /* inner spacing */
  border: 1px solid #ccc;    /* optional border */
  border-radius: 8px;        /* optional rounded corners */

  text-align: center;        /* center text */

  transition: transform 0.2s; /* hover effect */
}



.download-platform-logo {
  max-width: 100px;           /* adjust image size */
  margin-bottom: 10px;       /* spacing between image and link */
}



.circle-list {
  list-style: none; /* remove default numbers */
  counter-reset: step; /* initialize counter */
  padding-left: 0;
}

.circle-list li {
  counter-increment: step;
  margin: 10px 0;
  margin-bottom:20px;
  position: relative;
  padding-left: 40px; /* space for the circle */
}

.circle-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 12px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 30px; /* vertically center the number */
  font-weight: normal;
}