/* css styles */

/* Make three equal columns side by side */
.custom-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: nowrap;       /* keeps them in one row */
  margin-top: 2rem;
}

.custom-col {
  text-align: center;
}

.col-20 {
  flex: 1 1 20%;
  max-width: 20%;
}

.col-30 {
  flex: 1 1 30%;
  max-width: 30%;
}

.col-50 {
  flex: 1 1 50%;
  max-width: 50%;
}

.col-70 {
  flex: 1 1 70%;
  max-width: 70%;
}


/* Optional: keep readable width on small screens */
@media (max-width: 900px) {
  .custom-row {
    flex-wrap: wrap;
  }
  .custom-col {
    max-width: 100%;
  }
}