.features {
    /* background: #fff; */
    padding: 3rem 1rem;
}
/* Stack the feature items vertically */
.features-container {
  display: flex;
  flex-direction: column;  /* stack items */
  gap: 2rem;               /* space between each feature */
  /* align-items: flex-start; /1* align to left (or center if you prefer) *1/ */
  align-items: center; /* align to left (or center if you prefer) */
  max-width: 700px;        /* optionally constrain width */
  margin: 0 auto;          /* center container */
}

/* Keep each feature-item itself in a row */
.feature-item {
  display: flex;
  align-items: center;
  /* justify-content: space-between; /1* box left, desc right, arrow in between *1/ */
  gap: 0.75rem;

  /* width: 100%;          /1* ← force full width *1/ */
}

/* The square box */
.feature-box {
    background: #a9a9a9;
    padding: 1rem;
    border-radius: 0.5rem;
    font-weight: 300;
    text-align: center;
    flex-shrink: 0;
}

/* Arrow */
.feature-arrow {
    font-size: 1.5rem;
    color: #333;
}

/* Description text */
.feature-desc {
    font-size: 0.95rem;
    color: #c57654;
    font-weight: 600;
    opacity: 1;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #c57654;
}

.training-features {
    /* background: #fff; */
    color: #111;
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 1rem;
}
.training-features h1 {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
}
.training-features h2 {
    font-size: 1.25rem;
    opacity: 0.8;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 768px) {
    .features-container {
        flex-direction: column;
        align-items: center;
    }
    .feature-item {
        flex-direction: column;
        text-align: center;
    }
    .feature-arrow {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }
}