/* How It Works — 3-card layout */

.av-hiw { margin: 0; }
.av-hiw-grid{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* Breakpoints to match your usual pattern */
@media (max-width: 1280px){
  .av-hiw-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px){
  .av-hiw-grid {
    display: flex;  
    flex-direction: column;
  }
}
@media (max-width: 500px){
  .av-hiw-grid{ grid-template-columns: 1fr; }
}

.av-hiw-card{
  background:#0F172B;           /* dark navy */
  color:#fff;
  border-radius:16px;
  padding: 54px 40px;
  box-shadow:0 10px 18px rgba(9,14,28,.12);
  display:flex; flex-direction:column;
  min-height: 220px;
}

.av-hiw-icon-wrap{ margin-bottom:32px; }
.av-hiw-icon{
  width: 85px;
  height: 85px;
  object-fit:contain; display:block;
  filter: none; /* keep icon color */
}

.av-hiw-title{
  font-size:36px; 
  color:#ffffff;
  padding-bottom: 16px;
}

.av-hiw-text{
  color:#fff;                
  font-size:24px;
  line-height:1.5;
}

/* Grayscale ONLY the background image of the section */
.trade-footer{
  position: relative;
  overflow: hidden; /* keeps the overlay clipped to the section */
}

.trade-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  /* inherit the same background image/settings Divi applied to the section */
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  background-attachment: inherit;

  filter: grayscale(100%);
  z-index: 0;
  pointer-events: none;
}

/* ensure normal content sits above the grayscale layer */
.trade-footer > *{
  position: relative;
  z-index: 1;
}

.trade-footer h2 {
  font-size: 72px;
  color: #fff;
  padding-bottom: 32px;
}