/* HERO SECTION */
.howitworks-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 65vh;
    background-size: cover;
    background-position: center;
    color: var(--white);
    display: flex;
    align-items: center;
}
.hero-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background-color: rgba(0,0,0,0.6); z-index:1;
}
.howitworks-hero .container {
    position: relative; z-index:2; text-align: center;
}
.howitworks-hero h1 { font-size: 48px; font-weight: 700; margin-bottom: 15px; color: var(--white); }
.howitworks-hero p { font-size: 18px; color: #ddd; }
.steps-box h2 {
    font-size: 28px;
    color: var(--white);
    margin-bottom: 30px;
    font-weight: 700;
}
/* STEPS SECTION */
.steps-box {  background-color: var(--primary-color); color: #fff; margin-bottom: 50px; border-radius: 24PX;
padding: 40px;}
.step-card {
    display: flex; justify-content: space-between; padding: 25px 30px;
    background-color: var(--white); margin-bottom: 10px; border-radius: 8px;
}
.step-title { font-size: 20px; font-weight: 600; display: flex; align-items: center; color: var(--dark-gray)}
.step-arrow { color: var(--primary-color); margin-right: 10px; font-size: 22px; }
.step-desc { font-size: 16px; color: var(--dark-gray); max-width: 60%; text-align: left; }



/* RESPONSIVE */
@media (max-width: 992px) {
    .step-card { flex-direction: column; text-align: left; }
    .step-desc { max-width: 100%; text-align: left; margin-top: 8px; }
    .step-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
}