.hero-banner {
    position: relative;
    background-size: cover;
    background-position: center;
     z-index: 1; 
     padding: 70px 0px 40px 0px;
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 35%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0) 85%);
}

.apply-btn {
  background: linear-gradient(135deg, #D32F2F, #1976D2);
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.apply-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.apply-btn:active {
  transform: scale(0.96);
}

.banner-content h1 span {
  display: block;
  margin-top: 15px; 
}


@media (max-width: 991px) {
    .hero-banner::before {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
    }
    
    .hero-banner {
     padding: 40px 0px 30px 0px;
}
}