.how-it-works {
  /* background: #FADAA3 !important;
  background-color: #000; */

  background-image: url('/images/How-bg.png');
  background-position: center;
  background-size: cover;

  /* background-color:#81AD7C; */


}

@media (max-width:768px){
  .how-it-works{
  background-image: url('/images/how-mb.png');
  background-position: center;
  background-size:cover ;
  }
}

.section-title1{
  font-size: 2.5rem;
  color: #fff !important;
  text-shadow: 2px 2px #000;
}

.steps-card {
  background: #F5DAB1 !important;
  border: 6px solid #000 !important;
  border-radius: 12px;
  box-shadow: 6px 6px 0 #000;
  position: relative;
  clip-path: polygon(
    0 0,
    calc(100% - 40px) 0,
    100% 0px,
    100% 100%,
    40px 100%,
    0 calc(100% - 40px)
  );
}

.steps-list {
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

.steps-list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #000;
  font-weight: bold;
}

.step-icon {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

/* Highlight Note Card */
.note-card {
  background: #ffef96;
  border: 4px solid #000;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #000;
}


.how-img {
  max-width: 80%;
  /* border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 6px 6px 0 #000; */
}

@media (max-width: 768px) {
  .section-title { font-size: 2rem; }
  .steps-list { font-size: 1rem; }
  .how-img { max-width: 100%; margin-top: 20px; }
}


.steps-header-img {
  position: absolute;
  top: -80px;   /* adjust based on your image size */
  left: 100%;
  transform: translateX(-50%);
  z-index: 5;
}

@media (max-width: 768px){
  .steps-header-img {
  position: absolute;
  top: -60px;   /* adjust based on your image size */
  left: 87%;
  transform: translateX(-50%);
  z-index: 5;
}

.steps-header-img img {
  max-width: 90px !important; /* adjust size */
}

}

.steps-header-img img {
  max-width: 150px; /* adjust size */
}

.cash-dollar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 5; /* below UI but above bg */
}

.cash {
  position: absolute;
  top: -50px;
  width: 32px; 
  height: 32px;
  image-rendering: pixelated;
  animation: fall linear forwards;
  opacity: 0.6;
}

@keyframes fall {
  from {
    transform: translateY(-50px) rotate(0deg);
  }
  to {
    transform: translateY(110vh) rotate(360deg);
  }
}