.intro{
background: url('assets/images/vendorIntro BG.jpg') no-repeat center center/cover;
height:700 px;
padding: 250px 0; 
display: flex;
text-align: center;
color: white;
}

@keyframes typing {
    from { width: 0; }
    /* to { width: 100%; } */
    to { width: 18ch; } 
}


@keyframes blinkCursor {
    50% { border-color: transparent; }
}

@keyframes sparkle {
    0% { text-shadow: 0 0 5px #fff, 0 0 10px #fffb, 0 0 15px #fffa; }
    50% { text-shadow: 0 0 10px #fff, 0 0 20px #fffd, 0 0 30px #fffc; }
    100% { text-shadow: 0 0 5px #fff, 0 0 10px #fffb, 0 0 15px #fffa; }
  }
  
.sparkle-text {
color: white;
/* font-weight: bold; */
animation: sparkle 1.5s infinite alternate;
}

.typing-text {
color: white;
/* font-weight: bold; */
font-size: 2rem;
overflow: hidden; 
white-space: nowrap;
/* border-right: 3px solid white; Blinking cursor effect */
width: 0; 
display: inline-block;
animation: typing 3s steps(30, end) forwards, blinkCursor 0.7s infinite, sparkle 1.5s infinite alternate;
}

/* Section Background and Title */
.reach-customers-section {
   
    background: linear-gradient(to right, #fcb69f, #a1c4fd);
    animation: fadeIn 1s ease-in-out;
  }
  
  .section-title {
    color: #333;
    font-size: 2.5rem;
    position: relative;
  }
  
  /* Card Styles */
  .step-card {
    background: white;
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    animation: slideUp 1s ease forwards;
    opacity: 0;
  }
  
  .step-card img {
    width: 100px;
    margin-bottom: 15px;
  }
  
  .step-card h5 {
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .step-card p {
    font-size: 0.95rem;
  }
  
  /* Hover Effects */
  .step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  }
  
  .step-1 {
    animation-delay: 0.8s;
    background: linear-gradient(to right, #a1ffce, #faffd1);
    transition: background-color 0.3s ease;
  }
  
  
  .step-2 {
    animation-delay: 0.8s;
    background: linear-gradient(to right, #ffcccb, #ff6f61);
  }
  .step-4 { */
    animation-delay: 0.8s;
    background: linear-gradient(to right, #fff9c4, #ffe082);
    transition: background-color 0.3s ease;
  }
  
  
  /* Keyframes */
  @keyframes slideUp {
    0% {
      transform: translateY(40px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  

  body {
    margin: 0;
    font-family: Arial, sans-serif;
   
  }
  
  .feature-card {
    background: linear-gradient(135deg, #FFDAB9, #FFE5B4);

    border-radius: 15px;
    padding: 2rem;
    position: relative;
    transition: transform 0.3s ease;
  }
  .feature-card:hover {
    transform: translateY(-10px);
  }
  .circle-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
  }
  .btn-custom {
    background-color: black;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    transition: background-color 0.3s;
  }
  .btn-custom:hover {
    background-color: #333;
  }