.mentor-badge {
   width: 120px;
}
/* .rewards-of-marketing-mentorship {
    overflow: hidden;
    padding: 80px 0;
} */
.rewards-of-marketing-mentorship h2 {
   margin-top: 0;
}
.rewards-of-marketing-mentorship p{ 
   font-size: 16px;
   font-weight: 400;;
}
@media all and (max-width: 768px) {
   .banner h1 {
      font-size: 56px;
      font-weight: 400;
      line-height: 58px;
      letter-spacing: -0.04em;
   }
}

/* Steps CSS */
.steps {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   overflow-x: visible;
}
.step-box {
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(16, 30, 54, 0.04);
   padding: 24px 28px;
   text-align: left;
   position: relative;
   flex: 1 0 220px; /* makes all step-boxes the same width */
   min-width: 180px;
   max-width: 280px; /* optional: prevents huge boxes on big screens */
}
.step-title {
   font-family: 'Poppins', sans-serif;
   background: var(--coral-gradient);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: rgba(0, 0, 0, 0);
   font-weight: 500;
   margin-bottom: 8px;
   font-size: 16px;
}
.step-desc {
   color: #15192A;
   font-size: 21px;
   font-family: 'Poppins', sans-serif;
   font-weight: 400;
}
.arrow {
   font-size: 1.5rem;
   color: #c1c6d1;
   margin: 0;
   user-select: none;
   flex-shrink: 0;
}
@media (max-width: 1300px) {
   .steps {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* Optionally: Add a little padding so first/last don't touch the edges */
      padding-bottom: 10px;
   }
}
/* Tablet horizontal scroll */
@media (max-width: 1024px) {
   .steps {
      overflow-x: touch;
      -webkit-overflow-scrolling: touch;
      /* Optionally: Add a little padding so first/last don't touch the edges */
      padding-bottom: 10px;
   }
   .step-box {
      /*min-width: 240px;*//* Make each step a bit wider for touch */
      min-width: 100%; /* Make each step a bit wider for touch */
      flex: 1 0 auto;
      text-align: center;
   }
   /* Hide scrollbar - optional */
   .steps::-webkit-scrollbar {
      display: none;
   }
   .steps {
      scrollbar-width: none; /* Firefox */
   }
   .steps {
      flex-direction: column;
      overflow-x: visible;
      padding-bottom: 0;
   }
   .arrow {
      transform: rotate(90deg);
      margin: 13px;
   }
}
@media all and (max-width: 820px){
   .faq-section .faq-content {
      flex-direction: column;
      gap: 40px;
   }
   .faq-section .faq-content h2:after {
      content: "";
      display: none;
   }
   .arrow {
      margin: 13px;
   }
}

/* Mobile: stack vertically */
@media (max-width: 800px) {
   .steps {
      flex-direction: column;
      overflow-x: visible;
      padding-bottom: 0;
   }
   .arrow {
      transform: rotate(90deg);
      margin: 8px;
   }
   .step-box {
      min-width: 100%;
      flex: 1 0 auto; /* Allow it to grow/shrink */
   }
}